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.
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.