Comtaste Consulting | Enterprise RIA consulting and development

There are different way to skin Flex components when you design an interface, but the easiest for me is doing it using Adobe Illustrator. I’ll tell you why.
The first thing is that, most of the time, the kind of graphic we create for an UI is vector-based and Illustrator is perfect as a software to create vector-graphics: really handy and with lots of useful tools to help you drawing. Then it’s even more simple if you install the Flex Skin Design Extension from Adobe, you can customize standard components already created with all the status you need. But even if you want to create symbols from the start you can do it in few minutes. Of course you can use all Adobe design software to create graphics to design Interfaces, I guess it depends on what is the one you like/know/use more, personally I use often Photoshop also but still I think that Illustrator is faster and it coops with Flash very well.
After you got the Flex extensions, with few steps you can create a movie with buttons and all the components you need. Let’s say that you want to create a button set for your UI, so you open Illustrator, go to File > Script > Create Flex Skin (sorry but the pictures here will show an Italian version:))

Then from the list you see you can choose the component you need

And this is what you will get, if you go to see the Symbol list in the Symbol panel you will see all the Button components.

You can custom every symbol just with one click, but if you want to create a new symbol from the start it’s as simple as customize the standard one. Let’s open a new document, with the shape tool create a button

Then go to the Symbol Panel and save this as a new symbol, a movie clip with the scale nine option

And you will have the firs status of you Button component, isn’t it simple?:) and if you clik on it you can adjust the scale nine guide if you need it.

At the end of the work you can use the File > Script >Export Skin to generate the swf or you can select the symbols and with Copy&Paste bring them to a Flash file if you need to work with more properties. If you do that just remember that sometimes it happens that when you import a symbol from illustrator you must reset to zero the XY value because they change.

So, don’t you agree with me that Adobe Illustrator is a really handy software to create graphics for User Interface?:)