Flex Article

Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator

Creating multiple skins for one component

For most components, you'll need to create only one skin. However, there might be cases where you want to create more than one skin for a given component. For example, you might want to create a neutral-looking skin for most of your buttons but create a more colorful "glow" skin for buttons that need to stand out.

Here's how to do this:

1. Decide what you want to name your new skin. For example, you might call the new skin glowButton. (By convention, non-default skin names start with a lowercase letter.)
2. Using the skin template, figure out what the default skin parts are for the component you want. For example, the skin template has four parts for Button: Button_upSkin, Button_overSkin, Button_downSkin, and Button_disabledSkin.

3. Create new skin parts and name them similarly to the default skin parts, incorporating the skin name you chose in Step 1. For example, you might name them glowButton_upSkin, glowButton_overSkin, glowButton_downSkin, and glowButton_disabledSkin.

   • In Flash or Illustrator, you can create these parts as new symbols in the existing template file, then re-export the SWF. If you’re using Flash, make sure to set the linkage for these symbols to ActionScript 2.0, with the linkage ID the same as the symbol name, and include instances of the symbols on the Stage—otherwise they won't get exported.
   • In Photoshop and Fireworks, you can either add new layers to the existing template file and export them using the same process as the default skins, or you can just create separate image files for the new parts and save them directly into the images folder. In either case, you should end up with files named glowButton_upSkin.png, glowButton_overSkin.png, etc.

4. Create a new rule in the flex_skins.css file that refers to the symbols or bitmap files you created in the previous step. (Notice that the rule has a period before the skin name, unlike the rules for the default skins.)

   • For Flash or Illustrator, it should look like this:

     .glowButton
     {
        upSkin: Embed(source="flex_skins.swf", symbol="glowButton_upSkin");
        overSkin: Embed(source="flex_skins.swf", symbol="glowButton_overSkin");
        downSkin: Embed(source="flex_skins.swf", symbol="glowButton_downSkin");
        disabledSkin: Embed(source="flex_skins.swf", symbol="glowButton_disabledSkin");
     }
     

   • For Photoshop or Fireworks, it should look like this:

     .glowButton
     {
        upSkin: Embed(source="images/glowButton_upSkin.png");
        overSkin: Embed(source="images/glowButton_overSkin.png");
        downSkin: Embed(source="images/glowButton_downSkin.png");
        disabledSkin: Embed(source="images/glowButton_disabledSkin.png");
     }
     

   • If you need to specify scale-9 grids for your Photoshop or Fireworks skin parts, add the scaleGrid attributes as described in "Editing scale-9 grids for bitmaps."

5. To apply this skin to a component in a Flex application, set the styleName property on the component to the name of your new skin (without the leading period). For example, to apply the glowButton skin to a button, you would write the Button tag like this:

   <mx:Button  styleName="glowButton"  label="My Glowing Button"/>

   Notice that Flex uses the styleName property for this purpose, unlike HTML, which uses the class property.

Page 9 of 10

Previous Page

Next Page