Flash CS3 Documentation

Using ActionScript 2.0 Components > Creating Components > Creating the ActionScript class file > About styles

About styles

You can use styles to register all the graphics in your component with a class and let that class control the color scheme of the graphics at runtime. No special code is necessary in the component implementations to support styles. Styles are implemented entirely in the base classes (UIObject and UIComponent) and skins.

To add a new style to a component, call getStyle("styleName") in the component class. If the style has been set on an instance, on a custom style sheet, or on the global style sheet, the value is retrieved. If not, you may need to install a default value for the style on the global style sheet.

For more information about styles, see Using styles to customize component color and text.

Registering skins to styles

The following example creates a component called Shape. This component displays a shape that is one of two skins: a circle or a square. The skins are registered to the themeColor style.

To register a skin to a style:

1. Create a new ActionScript file and copy the following code into it:

   import mx.core.UIComponent;
    
   class Shape extends UIComponent{
       
       static var symbolName:String = "Shape";
       static var symbolOwner:Object = Shape;
       var className:String = "Shape";
               
       var themeShape:String = "circle_skin"
               
       function Shape(){
       }
               
       function init(Void):Void{
           super.init();
       }
   
       function createChildren():Void{
           setSkin(1, themeShape);
           super.createChildren();
       }
   }
   

2. Save the file as Shape.as.
3. Create a new Flash document and save it as Shape.fla in the same folder as Shape.as
4. Draw a circle on the Stage, select it, and press F8 to convert it to a movie clip.

   Give the circle the name and linkage identifier circle_skin.

5. Open the circle_skin movie clip and place the following ActionScript on Frame 1 to register the symbol with the style name themeColor:

   mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");
   

6. Create a new movie clip for the component.

   Name the movie clip and linkage identifier Shape.

7. Create two layers. Place a stop() function in the first frame of the first layer. Place the symbol circle_skin in the second frame.

   This is the component movie clip. For more information, see Creating a component movie clip.

8. Open StandardComponents.fla as an external library, and drag the UIComponent movie clip to the Stage on the second frame of the Shape movie clip (with circle_skin).
9. Close StandardComponents.fla.
10. Select the Shape movie clip in the library, select Component Definition from the Library context menu (Windows: Right-click, Mac: control-click), and enter the AS 2.0 class name Shape.
11. Test the movie clip with the Shape component on the Stage.

    To change the theme color, set the style on the instance. The following code changes the color of a Shape component with the instance name shape to red:

    shape.setStyle("themeColor",0xff0000);
    

12. Draw a square on the Stage and convert it to a movie clip.

    Enter the linkage name square_skin, and make sure the Export in First Frame check box is selected.

    NOTE

    Because the movie clip isn't placed in the component, Export in First Frame must be selected so that the skin is available before initialization.

13. Open the square_skin movie clip and place the following ActionScript on Frame 1 to register the symbol with the style name themeColor:

    mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");
    

14. Place the following code on the instance of the Shape component on the Stage in the main Timeline:

    onClipEvent(initialize){
        themeShape = "square_skin";
    }
    

15. Test the movie clip with Shape on the Stage. The result should display a red square.

Registering a new style name

If you have created a new style name and it is a color style, add the new name to the colorStyles object in the StyleManager.as file (First Run\Classes\mx\styles\StyleManager.as). This example adds the shapeColor style:

// initialize set of inheriting color styles
    static var colorStyles:Object =
    {
        barColor: true,
        trackColor: true,
        borderColor: true,
        buttonColor: true,
        color: true,
        dateHeaderColor: true,
        dateRollOverColor: true,
        disabledColor: true,
        fillColor: true,
        highlightColor: true,
        scrollTrackColor: true,
        selectedDateColor: true,
        shadowColor: true,
        strokeColor: true,
        symbolBackgroundColor: true,
        symbolBackgroundDisabledColor: true,
        symbolBackgroundPressedColor: true,
        symbolColor: true,
        symbolDisabledColor: true,
        themeColor:true,
        todayIndicatorColor: true,
        shadowCapColor:true,
        borderCapColor:true,
        focusColor:true,
        shapeColor:true
    };

Register the new style name to the circle and square skins on Frame 1 of each skin movie clip, as follows:

mx.skins.ColoredSkinElement.setColorStyle(this, "shapeColor"); 

The color can be changed with the new style name by setting the style on the instance, as shown here:

shape.setStyle("shapeColor",0x00ff00);

Flash CS3