Getting a Photoshop Design into Flex 2

Photoshop Fireworks Flex
Raw, unrehearsed, and barely edited. Hopefully useful. This video tutorial will show you how to get a Photoshop CS2 design into Flex 2. I show taking the design from Photoshop to Fireworks, and then importing it into Flex. I aditionally cover using those assets in states & transitions in Flex Builder 2. Ben, a commenter, asked for a tutorial on this subject.

This is not the only way to do this.

I’ve had a designer export all PNG’s for me from Photoshop.

I’ve had a designer export all graphics as GIF’s with per-screen printouts to tape inside of my cube for visual reference.

I’ve had a designer give me a PSD with no fonts. When I got the fonts, they were the Mac fonts, not the PC fonts.

So, I’ve had a full gamut of situations on how this went down. Typically, most designers do not know, or just don’t care to export PNG’s out of Photoshop. GIF’s are sometimes ok . Thus, these are the measures us Flash & budding Flex developers have to go through to get the design into our world. I’m not saying it’s the right way, but without a designer capable of exporting PNG’s, we have no choice.

Maybe if every designer capable of doing this wasn’t always busy when I asked them to do contract work, I wouldn’t be posting this. Unfortunately, there is still a shortage of talent, or that talent in house doesn’t get effectively communicated to, and it’s just faster to do this yourself.

I’ll be speaking about this as well as Flash integration at the 360Flex Conference March 5-7, 2007 at Ebay in San Jose, California, USA. [pending topic approval]

Anyway, I say “denote” at least 7 times. Also, apologies for Flex Builder’s non-real-time typing. Eclipse is stealing the key presses from Captivate. It catches up when I click though, so just wait patiently, and you’ll see the code.

If you are a Designer, you can safely stop on “Contents Layout”, the 9th section. If you are curious to see how to animate & implement image assets in Flex, feel free to watch the whole thing. I covered states & transitions by accident. All 30 sections counted, the whole tutorial is about 58 minutes. Took about 7 hours to create & edit since it was improv. Uploaded all 150 megs of it all of last night. BTW, I had to update my CaptivatePlayer to work with Captivate 2 skin SWF’s, so any problems viewing, just let me know and I’ll just link to the files directly.

Hope it helps!

Getting a Photoshop Design into Flex 2 – A Video Tutorial using Photoshop CS2, Fireworks 8, and Flex Builder 2.

WPF/e, Prototyping, and Workflow

Preface

I’m tired, but I’ve got to get these thoughts to text. I’m trying digest all of this WPF/e stuff. JD linked to Scoble and Scoble’s post has a lot of great information in it, especially the comments. If you need quick context for this post, hit comment #5 in Scoble’s post by Rory, then come back here. Comment #9 by Nick has some good 30,000 ft. view context.

You can skip the intro below if you want; not the main part of this entry.

Introductory Rant About My WFP/e Experience

First, Blend. Blend is one of 4 projects in Microsoft’s new design suite of products. Blend makes WPF & WPF/e apps. I think it was originally called “Sparkle”, then Expression Interaction Designer, and now Blend. I never played with Sparkle. Many called it a Flash killer. I actually got to play with Expression Interaction Designer. The build I played with is extremely different than what Beta 1 of Blend is. In fact, to me, I’ve been re-reading all the WPF sites I can find to ensure I’ve got my technologies straight. I truly believe they re-wrote Blend from the ground up, ditching what I played with, OR bought some company that had this product… it’s that different. Either way, it had familiar terms, like the designer window tab, the XAML tab, properties panel for modifying stage objects, etc.

I originally gave Expression a weekend to kick the tires. I gave Blend about 2 minutes. I couldn’t find the timeline, so called it a night… er, morning. I’ll give her more play this weekend. One of my biggest gripes with Expression was the timeline sucked. The entire app was really cool, but the timeline… I basically told them to copy After Effects, and they’d be golden. So, naturally, my expectations for Blend’s timeline are high.

The rumor mill the past 2 weeks really made things more confusing. Bottom line, Blend can create both WPF and WPF/e apps. That’s like saying Flex Builder can create both Flash Player & Apollo apps. Web & Desktop deployements.

WPF/e installed on my Firefox without me even have to reboot it. Nice job! The loading of apps was slow as nuts, with no visual feedback. It even locked Firefox. Horrible job. One thing that Firefox does to Flash is give it only a little CPU. That way, you can open 50 billion tabs, and they could all have Flex apps on it, and your browser still actually functions. Apparently, Microsoft found a way to get past this WPF/e. The apps do run extremely fast, though, once cached. I’m a big fan of major pain up front for faster loading later. If you’re girlfriend gets pissed at you, and you later give her a flower, she forgets she was ever mad at you. If she does, you can laugh about it, and use an apology to get lovin. Works every time. Pitching that analogy to upper management doesn’t always work though. Anyway, good job on speed! 2 for 1, w00t!

I forgot to test on IE7. That’s a good sign. Already, as a developer, I’m more concerned with creating content vs. deploying it.

Prototyping

Ok, so the first real point of my blog entry is about Scoble’s mention of prototyping. I really like how he accurately portrays how prototyping can get you into trouble. I am actually walking that very very very fine line currently. Prototyping has pro’s and con’s. Where the Pragmatic Programmer refers to Tracer Bullets, prototypes built to ensure met requirements, prototypes are more broad in this context, and are made with the intent of pitching ideas and seeing if they stick.

If you create something horrible, no worries, it was a prototype with little to no architecture in it, little time, and you can throw it away with no emotional remorse.

If you create something awesome, you better hope you effectively communicated there is a huge difference between a prototype and a real product. All to often the temptation is to turn the prototype into production code.

However, Scoble immediately scares me because he effectively conveys that Microsoft’s vision (with the corroboration of commenter’s) is that Blend can actually be used in prototyping, and actually be immediately turn into production code since the “code” is written for you by Blend, much like Flex Builder writes the MXML for you in Design mode. The whole post, combined with those commenter’s that have a lot of great information about Blend & WPF in general to share, IMPLY that “it just works”. Granted, I’m paraphrasing here, and you are welcome to go read Scoble’s post to see what I’m saying. If you do, I bet you come back here getting the same vibe I do.

No Workflow Problems?

I don’t know about those of you who have ever deal with designers & developers on the same project, but as far as I’m concerned, it’s frikin’ hard. Both camps have different motivations, different agenda’s, and different accountability structures. Making them mesh is rough. Being an advocate of either team without alienating your teammates is an extremely delicate balance. It’s all about the mediation and manipulating people to work together.

That doesn’t even relate to the tools, though. Version 9 of Flash is getting PSD import. Granted, from a legal standpoint, I can see why this took so long, but even that is fraught with issues.

“Dude, did you flatten your effect layers, render your text layers, and email me those fonts?”

“Yeah man, I sent you the fonts. Don’t worry about the PSD, Flash 9 will import it just fine.”

“Right… why don’t YOU organize this library for me then if it works so well. Do you really need 10 billion layers in your comps?”

The above is child’s play. You take your verbal stabs at each other, and move on. The above work flow is rough, but that’s the way it will be. The only difference now is one has to manually import this stuff.

…but, here’s a curve ball.

“So… you realize this is for the web right? The whole reason we used Flash on this project instead of Flex was because the Flex components are too big. Why are you sending me a PSD full of raster (bitmap) graphics? Why did you just use Illustrator or Flash?”

“Oh relax, most of the images are beveled gradients; Flash Player’s built-in PNG compression will knock those babies down really low, no problem!”

“So, rather than choose the appropriate tool, you bank your luck on LZW compression to justify your tool choice?”

“Just shuddup and get to work slacker!”

[punchline’s coming soon folks, bear with me]

The various tools, and the various ways they use content makes using Flash and/or Flex time consuming when implementing designs on programming projects. Even some design driven ones can be slow going depending on the programmer. Some developers can actually thrive in the design world, writing classes one second, and deleting them the next. I’ve got scares from that type of work, and will never go back, but my point is, NOT all developers suffer madly like people make it out to be.

However, what no one can deny is that production artwork, the insertion of designed assets into a Flex / Flash project takes time. A lot of time. And it’s not easy.

This, coming form Adobe & Macromedia, companies with a long history of design & multimedia development.

Suddenly, Scoble and others say in passing, almost like it “just works that way”, that Blend renders all of the above not an issue. Say WHAT!?!?!

Obviously, one has to import PNG’s and other audio / bitmap assets into your Blend project, but I’m talking about the whole “A designer creates content a developer can use.” This gets really fuzzy, and depends on your type of project, but at the end of the day, I’ve seen bad things happen every time a designer messes with a developers build, or a developer starts attempting to wrap code around a designer’s comp.

This is gone now? Huh? Just like that, eh? I find that extremely hard to believe from a company that has very little experience in this realm. Maybe there have been tons of web developers secretly doing multimedia engineering on the side, moonlighting to reduce the pain of wrapping good looking CSS around Windows forms and .NET client applications… but I doubt it. If I’m wrong, please link.

Here I am, with a Flash 9 alpha build that supports AS3, and Flex 2. I’ve been spending weeks of my free time developing an example for the community to see that you can design nicely looking applications in Flex 2 without having to “wait” for Flash 9 to get the AS3 speed goodness. There have been a slew of companies these past few months contacting me with either requests to be involved in incorporating design into their Flex projects, OR questioning if Flex CAN even design to the level they want.

I would of assumed most companies would be more worried about Flex. Instead, while it’s a good thing that they all so easily pick up Flex and run with it, they immediately think that it’ll give them a generic look and feel. Hell yeah! This means people are “getting it”. Not only are they quickly getting up and running, but they are recognizing what the Flash Platform gives them with regards to design. Love it.

Anyway, …I’m still struggling. You basically have 5 scenarios:

  1. Take the agency approach; using Flash, hire a, rare, Flash Hybrid.
  2. Take the software company approach; use Flex, design as an afterthought, if at all.
  3. Take the software company to another level, and use copious CSS + fonts + image icons in Flex. Looks a lot less generic. Or, dynamically load in Flash assets.
  4. Take the agency approach with a Flash Developer and a Flash Designer.
  5. Merge the two.

#1 is what most design firms do. They have few if any people on staff who can code, and instead make hot looking Flash animations and mini-apps. Flash is a design tool. It works.

#2 is what I loathe, and really have a challenging time educating on the importance of design. #2 is dying based on the ratio of them vs. pimp clients I’m seeing.

#3 is what almost every company now doing. They are using Flex 2’s CSS & skinning to it’s fullest. From what I’ve been reading, most are successful. Even by default, it looks and works hotter than Swing.

#4 is extremely rare to keep a team like this together. I’ve seen a lot of teams like this, but can’t imagine the constant pain of having to recode things, force designers into some form of template, etc. It DOES work, though, and well. Some of the best public facing Flash application development on the planet comes out of this.

#5 is what I’m TRYING to do. Most Flash Developers coming to Flex immediately want to “load their stuff”. Me? I’d rather assimilate it into the Borg cube. So far, though, there are a disparate amount of ways to do this, and a lot of my approaches are subjective. For example, a programmer could acknowledge my architecture is “not horrible”, whereas a designer could say “Man… in an hour, you’ll match the comp. Cool.” “COOL!?!?! I’ve worked for weeks, and all I get is a ‘Cool’!!?!?!?!?!?!?”

Adobe has very well over the years improving #4, empowering people like me to implement design work more fluidly, and code it well.

…yet, here comes Blend, jumping over #4, and becoming the panacea that is #5? No way dude… too good to be true.

Regardless, I’ll still continue to learn Blend to see stacks up. I have a feeling that using the Designer tool will really make a lot of the production art issues go away for the most part. Regardless though, I call bs until I’ve seen for myself that “it just works”. The proof for me will be when I’m on a project, and it goes down like this.

“So, designer, does it pass your review?”

“Yep, you’ve implemented the comp as best you could based on the limitations of the tool.”

“Cool… programmer, is the C# & XAML it generated ok?”

“Yep, fits into the framework nicely, and we’ve gone through multiple design edits with no problems.”

You’ll have to excuse me in finding the above scenario extremely unlikely for many years. Adobe is STILL working it out, and making it better all of the time. Half of the above isn’t even the technology. It’s the processes, team aptitude, and ability to execute. What is the likelihood that Microsoft comes out of nowhere and solves this with their new products and tool set? :: shrugs ::

Flash Development Process Notes, Dictionary.com’s New Design, & I Miss Steve Irwin

Bunch of small things about Flash this week, in particular, 8’s IDE.

JSFL Automation

Reading Steve Bryant’s post about Sharpening the Axe. I’ve actually been doing a lot of the same. I’ve been writing a lot of JSFL in the past few weeks to automate a lot of the repetitive tasks that my team and I have been doing in Flash on this project. Although she’s a tad un-forgiving because she’s so boilerplate level code, that same low-level also gives you a lot of power. Error handling is a bitch, but so far 100% of my efforts have been rewarded with time saving scripts to automate a variety of tasks. Publish all, setup a FLA with a specific SWC and stub code, build a custom UIComponent, amongst other things. With the RAD development we are doing via multiple people in multiple FLA’s, it certainly helps since we have to re-build a lot of the same things and ensures less of an error in doing so. I really do wish, however, the XUL implementation had more controls. While I’m ecstatic I can actually talk to them via code now, I could really use a Tree and a Dropdown. I’m curious if I could implement them anyway and see if the engine supports it via an unsupported fashion. Regardless, much faster to build minor GUI’s in record time vs. creating them in a WindowSWF.

Initialization Order & Default Values

Had some serious issues earlier in the week. While the designers chug away at production art, I’m trying to make our components more useful at authortime, so have been implementing Inspectable metatags like mad. They are the tags that expose your component’s public properties via the Property Inspector in Flash when you drag a component to the stage. What I didn’t realize is that the default values are ONLY written if the component is created at authortime. If you create it dynamically, you lose the default values. I kept some notes at my work computer, but the initialization order is crazy hard to memorize. Basically, it’s like static, prototype (class member), init object OR inspectable tag values, and finally constructor. So, I can’t do default values in the init function anymore; I have to do the old skool of setting them on prototype via:

private var __label:String = "";
private var __childHMargin:Number = 0;

I believe this still works in AS3 too, but it makes a lot of purists uncomfortable. Anyway, it’s really hard to support both the programmer and designer workflow at the same time. We’re getting damn good at it, though.

Extension Manager 1.7 Problems

Finally, having a hell of a time with Extension Manager 1.7.240 on both PC and Mac. Sometimes it won’t uninstall your files for Flash 8 from the user directory and you have to clean up the mess manually. On Mac, it’ll crash after uninstalling leaving files still there too, or at least it “thinks” they are. Really frustrating since I’ve come to love this app’s ability to seemlessly deploy desktop software.

I can tell a user to clear their browser cache, but there is no “clear cache” on a user’s desktop. I can see why a lot of old skool Win32 / fat client developers love web applications since those problems effectively vanish. Naturally, the thought of writing code to delete specific files on a user’s machine makes me cringe with horror. So much so, I refuse to do it, and instead opt for writing documentation on how to delete the files so the user can do it themselves. In IE and Firefox, this is trivial; you click the button, and your server delivers the latest / greatest build. Anyway, the effort is worth it, but damn, this is harder than web application development.

Scale 9

Last frustration. We all LOVE Scale 9. However, apparently Scale 9 in Flash 8 & Flash 9 alpha only works for vector shapes and not for bitmaps. Scale 9 DOES work in Flex 2 with bitmaps so… kind of frustrating. Hopefully Flash 9 (Blaze) will implement whatever magic mxmlc, Flex’ command line compiler, is using so Flash can do this too. I’ve heard you can use code in Flash 8 to get this to work, and although unconfirmed, that’s not the point; it should work in the IDE. The docs are not clear on this at all.

BTW, Dictionary.com’s new design is really nice!

I miss the Crocodile Hunter. You’ll be missed Steve Irwin; you were a good bloke.