There is many ways to skin Flex applications. To name some that I’ve used: Flex CSS, Programmatic AS3, Flash, Degrafa, Photoshop (JPG’s, GIF’s and PNG’s) and Illustrator.

What usually needs to happen on a project is a combination of some or all of the above. Not having a single point of reference for skinning creates quite a bottleneck.

From different approaches, two surfaced as having the best pipeline: Illustrator CS3 and Degrafa. If we are talking speed and ease of graphic design, I would now default to Illustrator CS3. For advanced skinning and interactions Degrafa holds first place.

Speed, of course, is a major factor. A lot of projects do not need advanced skinning, but just a step forward from useful but many times seen default Flex skins. By that I mean applying the brand guidelines of the company or product/service.

After a long time I gave Illustrator another chance and the CS3 version proved remarkably useful. Illustrator with Flex CSS that is.

My goal was to create the fore mentioned single point of reference for skins and I did it in Flex CSS. Good people of Adobe even made a script for Illustrator to speed things up which I gladly use. Process works fine without the script too (maybe even faster, but you have more skins to track yourself), and you can find a tutorial for that version here.

For the streamlined version you can find Illustrator scripts here (together with scripts for other apps) and you need to have a free Adobe account to download.

STEPS:

1. Download the Illustrator scripts from here. You can find the installation instructions in the downloaded archive.

2. Create your skins for various states of the component in Illustrator as you would do usually using all the wonderful features of Illustrator.

3. Convert your skins to Symbols.

a. Open the Symbols panel in Illustrator (Window -> Symbols).

b. Select a particular skin graphic that you have made.

c. Click the “New Symbol” icon in the bottom right corner of the Symbol panel.

d. Naming the symbol is important. For example, if you want to automate creating an “up” state skin for a button, you would name it myButton_upSkin. For “down” state you would select an appropriate graphic to create a symbol from and name it myButton_downSkin. So for every state you want, you would add an underscore and state name after the symbol name that needs to be camelCase.

e. I would highly recommend setting the “Flash Registration” point to upper left corner to be in sync with standard flex registration point.

f. If you want to have the symbol to scale using 9-slice approach, check the box labeled “Enable guides for 9-slice scaling”. You can later go back to your symbol and adjust the slices position.

4. Now that you have made the symbol (and adjusted slicing if need be), you can export it by choosing:

File -> Scripts -> Flex Skin -> Export Flex Skin.

A SWF file will be created by name of your choice.

5. Go to Flex Builder and choose:

File -> Import -> Skin Artwork

6. Set up parameters in the dialog box like this:

a. Select “SWC of SWF file” and point to the file you’ve just created in Illustrator.

b. Select the folder you want to import it in.

c. Click “Next”.

7. At this window you will be prompted to select the skins that you want to import. No reason not to “Check All” here. For the selected skins you will now see the states of the particular skin in the “Skin Part” Column.

8. Click “Finish” and a Flex CSS file will be made with all the skins appropriately declared.

9. All you have to do now is to apply the name of a particular skin to your components Style name.

This skining approach has proven very fast and error free for me.

I’m enjoying the 9-slice scaling, vector graphic crisp scaling and mouse interaction only with visible pixels.

Share/Bookmark