To use graphical skins, you embed image files in your Flex application. These images can be JPEG, GIF, or PNG files, or they can be symbols embedded in SWF files.

When using SWF files for skins, you can use static assets, which are SWF files that contain symbol definitions but no ActionScript 3.0 code, or use dynamic assets. Dynamic assets correspond to Flex components and contain ActionScript 3.0 code. These components are designed to work with Flex features such as view states and transitions. To use dynamic assets in a Flex application, you export the symbols in the SWF file to a SWC file, and then link the SWC file to your Flex application.

For more information on embedding assets into a Flex application, see Embedding Assets.

Using JPEG, GIF, and PNG files as skins

To use a JPEG, GIF, or PNG file as a skin, you must embed the file in your Flex application. For example, to change the appearance of a Button control, you might create three image files called orb_up_skin.gif, orb_down_skin.gif, and orb_over_skin.gif:

The following example uses graphical skins for the up, over, and down states of the Button control:

<?xml version="1.0"?>
<!-- skins/EmbedImagesTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button {
        overSkin: Embed("../assets/orb_over_skin.gif");
        upSkin: Embed("../assets/orb_up_skin.gif");
        downSkin: Embed("../assets/orb_down_skin.gif");
     }
  </mx:Style>
  <mx:Button id="b1" label="Click Me"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

The reason that you must embed the file is that in order to determine a component's minimum and preferred sizes, skin assets must be present as soon as the component is created. If you reference external assets at run time, Flex does not have the sizing information and, therefore, cannot render the skins properly.

Because skins are embedded, if you change the graphics files that comprise one or more skins, you must recompile your Flex application for the changes to take effect. For more information on embedding assets, see Embedding Assets.

One drawback to embedding images as skins is that they can become distorted if you resize the component that has a skin. You can use a technique called 9-slice scaling to create skins that do not become distorted when the component is resized. For information on the 9-slice scaling technique, see Using 9-slice scaling with embedded images.

Using static SWF assets as skins

Static SWF files created in Flash 8 or Flash 9 contain artwork or skins, but do not contain any ActionScript 3.0 code. You can use the entire SWF file as a single skin, or you can use one or more symbols inside the SWF file as a skin. To embed an entire SWF file, you point to the location of the SWF file with the source property in the Embed statement, as follows:

<?xml version="1.0"?>
<!-- skins/EmbedSWFSource.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button {
        upSkin: Embed(source="../assets/SubmitButtonUpSkin.swf");
     }
  </mx:Style>
  <mx:Button id="b1"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

To import a symbol from a SWF file, you use the symbol property to specify the symbol name that you want to use in addition to pointing to the location of the SWF file with the source property. You must separate each property of the Embed statement with a comma. The following example replaces the Button control's up, over, and down skins with individual symbols from a SWF file:

<?xml version="1.0"?>
<!-- skins/EmbedSymbolsCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
    Button {
        upSkin: Embed(source='../assets/SubmitButtonSkins.swf', 
            symbol='MyUpSkin');
        overSkin: Embed(source='../assets/SubmitButtonSkins.swf', 
            symbol='MyOverSkin');
        downSkin: Embed(source='../assets/SubmitButtonSkins.swf', 
            symbol='MyDownSkin');
    }
 </mx:Style>
  
  <mx:Button id="b1"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

You use the same syntax when embedding skin symbols inline, as follows:

<?xml version="1.0"?>
<!-- skins/EmbedSymbolsInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Button id="b1" 
     overSkin="@Embed(source='../assets/SubmitButtonSkins.swf', 
        symbol='MyOverSkin')"
     upSkin="@Embed(source='../assets/SubmitButtonSkins.swf', 
        symbol='MyUpSkin')"
     downSkin="@Embed(source='../assets/SubmitButtonSkins.swf', 
        symbol='MyDownSkin')"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

In the source FLA file, all symbols that you use must meet the following conditions:

• The symbol must be on the Stage. After you create an image file and convert it to a symbol, you must drag it from the library to the Stage. Flash does not export symbols that are not on the Stage. Alternatively, you can select the Export in First Frame option in the Linkage Properties dialog box.
• The symbol must have been exported for ActionScript with a linkage name. In Flash, you select the Export for ActionScript option in the symbol's Linkage Properties dialog box, as the following example shows:

  

  The linkage name is the name used by Flex. Symbol names are ignored.

• The FLA files cannot contain any ActionScript.
• The symbol must have an upper-left registration point that you select in the Convert to Symbol dialog box. The following example shows an upper-left registration point:

  

1. You can use 9-slice scaling with image files (a grid with nine regions) so that the skin scales well when the component's size changes. You define the properties for 9-slice scaling of images when you apply the skin in CSS, as the following example shows:

   Button {
       overSkin: Embed(
           "../assets/orb_over_skin.gif", 
           scaleGridTop=6, 
           scaleGridLeft=12, 
           scaleGridBottom=44, 
           scaleGridRight=49
       );
   }
   
   

   For information on embedding assets that use the 9-slice scaling technique, see Using 9-slice scaling with embedded images.

Using dynamic SWF assets as skins

Dynamic SWF assets are Flex components that you create in Flash CS3 and then import into your Flex application. Since these assets are Flex components, you can use them just as you would a component shipped with Flex or as you would a custom component that you created as an MXML file or as an ActionScript class.

To create a Flash component, you define the symbol in your FLA file and specify the base class of the symbol as mx.flash.UIMovieClip. To integrate components from a dynamic SWF asset created in Flash CS3, you publish your FLA file as a SWC file.

For more information on creating dynamic SWF assets and using them as skins, see http://www.adobe.com/go/flex3_cs3_skinning_extensions and http://www.adobe.com/go/flex3_cs3_swfkit.