Using the setStyle() method -- Flex 2.01

Skins are defined as style properties, therefore, you can access them with the setStyle() and getStyle() methods. This lets you change skins during run time, or dynamically define them, as long as you embed the graphical asset at compile time.

To embed an image so that you can use it with the setStyle() method, you use the [Embed] metadata tag and assign a reference to a variable. You can then use the setStyle() method to apply that image as a skin to a component.

The following example embeds three images and applies those images as skins to an instance of a Button control:

<?xml version="1.0"?>
<!-- skins/EmbedWithSetStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
  <mx:Script><![CDATA[
     [Embed("../assets/orb_over_skin.gif")]
     public var os:Class;

     [Embed("../assets/orb_down_skin.gif")]
     public var ds:Class;

     [Embed("../assets/orb_up_skin.gif")]
     public var us:Class;

     private function init():void {
        b1.setStyle("upSkin",us);
        b1.setStyle("overSkin",os);
        b1.setStyle("downSkin",ds);
     }
  ]]></mx:Script>
  
  <mx:Button label="Click Me" id="b1"/>
  
</mx:Application>

To apply skins to all instances of a control, you use the StyleManager, as the following example shows:

<?xml version="1.0"?>
<!-- skins/EmbedWithStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
  <mx:Script><![CDATA[
     import mx.styles.StyleManager;

     [Embed("../assets/orb_over_skin.gif")]
     public var os:Class;

     [Embed("../assets/orb_down_skin.gif")]
     public var ds:Class;

     [Embed("../assets/orb_up_skin.gif")]
     public var us:Class;

     private function init():void {
        StyleManager.getStyleDeclaration("Button").setStyle("upSkin", us);
        StyleManager.getStyleDeclaration("Button").setStyle("overSkin", os);
        StyleManager.getStyleDeclaration("Button").setStyle("downSkin", ds);
     }
  ]]></mx:Script>
  
  <mx:Button label="Click Me" id="b1"/>
  
</mx:Application>