Posted on by JesterXL

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.

4 Replies to “Getting a Photoshop Design into Flex 2”

  1. This is great! I didn’t think you would get to this so quickly.

    I’ll have to check it out tonight when I get home.

    I think this will be very useful for anyone that will have to work with designers and get their designs into Flex.

    Thanks again Jesse,
    Ben

  2. Hey man,

    Thanks a bunch! I don’t think this can be overemphasized. I haven’t watched the presentation, yet … but I will later today or tomorrow.

    This type of developer to designer education is sorely needed! It will only lead more designers to Flex!

  3. Hi, great work on captivatePlayer, however im having problem with playback control for Captivate 2 files.
    My directory structure looks like this

    CaptivatePlayer.swf
    captivate_playlist.xml
    demo1.swf
    index.html
    main.html
    untitled_skin.swf
    untitled.swf

    The untitled_skin.swf file doesnt seem to be read when untitled.swf is called through CaptivatePlayer.

    Any help on this would be appreciated :)

  4. Jesse,
    man, that was a great and informative demo. I never expected you to put that much time into it.

    I’m really starting to love Flex.

    I’m going to try and get out to Cali for the Flex 360 conference.

    Ben

Comments are closed.