Lots of people have reported the news that Flex 2 has shipped (yay!), so I won’t repeat the details here. (Just go download the free Flex SDK or a trial of Flex Builder already! You know you want to.)

Instead, since it’s all about me, I’d like to point out an article I just published on the Flex Developer Center about designing skins for Flex 2 using Flash, Photoshop, or Fireworks. It’s aimed at visual designers who want to use their familiar design tools to customize the Flex components, but Flex developers might find it valuable as well to understand how skinning works.

There are two ways you can customize the look of the components in a Flex application. One way is to start with the built-in “Aeon” look, and tweak an extensive set of styles for each component using CSS; the excellent Flex Style Explorer can give you an idea of how far you can go just doing this. But if you have a specific visual design in mind that you can’t achieve using styles, you can completely change the look of the Flex components by replacing the built-in skins with your own bitmap or vector artwork.

The article provides template files for Flash, Photoshop, and Fireworks that have been set up with the symbol/layer structure you need to generate the different skin parts for each component. Using these files, you can see how the skin parts are structured, replace the artwork in the template with your own skin parts, and export the artwork directly into a Flex project. We’ve also provided a test MXML application that shows how your skins will look at runtime.

In practice, you’ll probably need to use a combination of skins and styles to get exactly the look you want, since things like fonts and text colors aren’t set through the skinning mechanism. The article goes through the styles you’ll commonly need to set in conjunction with your skin artwork.

Hope the article is useful—if you have any feedback, please let me know!

Digg!digg this | del.icio.usdel.icio.us | 12 Comments