Yahoo! Developer Network - Flash Developer Center - Articles - Skinning in Flex: Beauty is Only Skin Deep

What You Need

Adobe Flex Builder 3 (trial version available)
or the free Flex 3 SDK
Flash CS3 (trial version available)

Sample Code and Yahoo! Flex Skin are licensed under the BSD, per the YDN TOS.

Overview

In this article, we'll be demonstrating how to create a simple skin element in Flash for use in Flex Builder. With this skin, we will style the Button element with our own simple color design.

Skinning in Flex is a simple way to modify the appearance of Flex components with a small amount of work.

It allows you to turn the ordinary:	Into the extraordinary:

Skins can be created in a myriad of Adobe applications, including Flash, Photoshop, Illustrator and Fireworks. For simplicity's sake, we'll be focusing on creating a skin in Flash.

Step One: Creating a skin asset in Flash

Skins can be created in a number of Adobe applications (Flash, Photoshop, Illustrator, Fireworks), but for simplicity's sake, we'll focus on Flash. First, start Flash up and create a new Actionscript 2 Flash file:

Select the Rectangle tool and draw three rectangles. These rectangles will serve as skins for the different states of our button. They should all be the same size, so that we are not stretching/compressing/distorting the skin to fit the button. Our example has three squares, each for a different button state:

The blue square will be our up state, shown when the button is not being interacted with.

The red square will be our over state, displayed when the user rolls the mouse cursor over the button.

Finally, the green square will be our down state, shown when the button is pressed.

Let's turn these items into Movieclips and name them. Select the blue rectangle, and choose Modify > Convert to Symbol. This will display the Properties dialog, where we'll provide the name that Flex will use to find this particular clip. For the up state, we'll use the name MyButton_Up. Click 'Export for ActionScript', and the Identifier field should populate itself with the name you've chosen for the clip.

Select the red rectangle, and choose Modify > Convert to Symbol. We'll go through the same process as the blue rectangle, but we'll name this clip 'MyButton_Over':

Same for the green rectangle. We'll name it 'MyButton_Down':

If you haven't done so already, save the file. To keep things simple, I chose the name 'Skin.fla'

We'll create the .swf that Flex will use by choosing Control > Test Movie:

After creating the .swf, close Flash. We're 25% complete. You're doin' well!

Step Two: Creating the Flex application

Start the Flex Builder. We'll create a new Flex project by choosing New > Flex Project:

Name the project 'SkinSample' and click Next:

Use the default location for the project. (On Windows, this location is: C:\Documents and Settings\USERNAME\My Documents\Flex Builder,
and on OSX, this location is: /Users/USERNAME/Documents/Flex Builder 3)

Click Finish (not Next).

If all went well, you should be presented with the beginnings of a Flex project.

A Flex project is comprised of:

MXML document: This document is the main element of this project. It contains the layout definitions as well as logic and other presentation aspects.
bin folder: The bin (short for 'binary') folder is the destination for output of your project. Your application and its supporting elements will end up here when you compile.

The development environment should default to Source mode. This mode allows you to edit the layout and logic of your Flex application in MXML. You may find it easier to edit layout items using the GUI in Design mode.

Click the 'Design' button to get from the MXML view to a more graphical representation of the application:

If it isn't open, open the Components panel (Window > Components):

In the Components Folder, open the Controls folder, and drag the Button to the stage:

Open the Flex Properties dialog. Modify the button's dimensions to match the skin's dimensions from Flash:

If you were to run the application now, you would see your button displayed using the default Flex skin.

But we're about to bring the style...

Step Three: Authoring the stylesheet.

Right-click the SkinSample project, and choose New > CSS file. Use a filename of 'Skin.css'

In the CSS development view, we'll create a CSS class to apply to our component. A CSS class is a reusable modifier for components in your Flex application. A class is denoted in CSS by a period, the identifying name, and then the brackets which will contain the properties it's modifying.

We're going to name our class 'MyButton':

We want to modify three properties with our MyButton class. The upSkin, the overSkin, and the downSkin. A list of all the style properties that we can modify for a button can be viewed in Adobe's Flex Language Reference.

For neatness' sake, copy the Skin.swf that you created into your working Flex folder:

For each of the properties, we want to tell Flex to include items from the .swf. We'll do this using the Embed directive:

Now, we want to tell Flex to use particular symbols from Skin.swf. We'll do so by defining the symbol property. Note that we're using the names we defined in Flash:

We're done with the CSS! Save the document.

Step Three: Applying the stylesheet.

Calling this a step is an overstatement. We're a hair's width away from being done. We've got our stylesheet, we've got our Flex application, now we just need to pair them together. Switch back over to our MXML document, change to the Source view, and add the following line:

Our MXML document should now look like this: