Today I was going to post about using flashvars and widget development. However, as I started to document the process, it became too much information for a single tip. So I’m going to do a separate post walking you through my widget development process. Now on to today’s tip!

To be honest with you guys, I’ve never really been a huge fan of Fireworks. I’m a Photoshop guy, and I have been since version 5.5 (hooray ImageReady). However, at our last SeaFlex meeting Marty gave a quick introduction into Flex skinning using Fireworks. My eyes were opened! So here is the basic run down of creating Flex skins using Fireworks CS4.

  1. Within Fireworks go to Commands > Flex Skinning > New Flex Skin
    fwskin_01
  2. Select the components you want to skin.
    fwskin_02
  3. Skin to your heart’s desire.
    fwskin_03
  4. When you’re finished, go to Commands > Flex Skinning > Export Flex Skin
    fwskin_04
  5. I created a new folder called testSkin and saved to that.
    fwskin_05
  6. Now in Flex Builder. File > Import > Skin Artwork
    fwskin_06
  7. Browse to the folder we just exported our assets to.
    fwskin_07
  8. Make sure the image to component mappings are correct.
    fwskin_08
  9. And…. you’re done.
    fwskin_09

Amazing.

:: UPDATE ::

Marty just posted a PC (and more in depth version) of the skinning your Flex applications with Fireworks. Read it here!