Flex 2 Developer's Guide > Customizing the User Interface > Using Skins > Using SWF files as skins

Using SWF files as skins

You can use SWF files as skins. 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>

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 attribute of the Embed statement with a comma.

The following example replaces the Button control's upSkin property with an entire SWF file, but the overSkin and downSkin properties with individual symbols from a second 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>

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>

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:

  
  
  

• You can use scale-9 image files (a grid with nine regions) so that the skin scales well when the component's size changes. You define the attributes for scale-9 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 scale-9 technique, see Using scale-9 formatting with embedded images.

Flex 2.01