Using ActionScript to draw Button skins

The default skins in both the Halo and Sample themes use the same skin element for all states and draw the actual graphics through ActionScript. The Halo implementation uses an extension of the RectBorder class and some custom drawing code to draw the states. The Sample implementation uses the same skin and the same ActionScript class as the Halo theme, with different properties set in ActionScript to alter the appearance of the Button.

To create an ActionScript class to use as the skin and provide different states, the skin can read the borderStyle style property of the skin and emphasized property of the parent to determine the state. The following table shows the border style that is set for each skin:

Property	Border style
`falseUpSkin`	`falseup`
`falseDownSkin`	`falsedown`
`falseOverSkin`	`falserollover`
`falseDisabled`	`falsedisabled`
`trueUpSkin`	`trueup`
`trueDownSkin`	`truedown`
`trueOverSkin`	`truerollover`
`trueDisabledSkin`	`truedisabled`

To create an ActionScript customized Button skin:

Select File > New and choose ActionScript File.

Copy the following ActionScript to the file:

import mx.skins.RectBorder;
import mx.core.ext.UIObjectExtensions;

class RedGreenBlueSkin extends RectBorder
{
    static var symbolName:String = "RedGreenBlueSkin";
    static var symbolOwner:Object = RedGreenBlueSkin;
    
    function size():Void
    {
        var c:Number; // color
        var borderStyle:String = getStyle("borderStyle");

        switch (borderStyle) {
            case "falseup":
            case "falserollover":
            case "falsedisabled":
                c = 0x7777FF;
                break;
            case "falsedown":
                c = 0x77FF77;                
                break;
            case "trueup":
            case "truedown":
            case "truerollover":
            case "truedisabled":
                c = 0xFF7777;
                break;
        }

        clear();
        var thickness = _parent.emphasized ? 2 : 0;
        lineStyle(thickness, 0, 100);
        beginFill(c, 100);
        drawRect(0, 0, __width, __height);
        endFill();
    }
    
    // Required for skins.
    static function classConstruct():Boolean
    {
        UIObjectExtensions.Extensions();
        _global.skinRegistry["ButtonSkin"] = true;
        return true;
    }
    static var classConstructed:Boolean = classConstruct();
    static var UIObjectExtensionsDependency = UIObjectExtensions;
}

This class creates a square box based on the border style: a blue box for the false up, rollover, and disabled states; a green box for the normal pressed state; and a red box for the expanded child. It draws a hairline border in the normal case and a thick border if the button is emphasized.

Save the file.
For this example, name the file RedGreenBlueSkin.as.
Select File > New and choose Flash File (ActionScript 2.0).
Save the file in the same folder as the AS file.
Create a new symbol by selecting Insert > New Symbol.
Set the name to ButtonSkin.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript.
The identifier is automatically filled out with ButtonSkin.
Set the Class to RedGreenBlueSkin.
Make sure that Export in First Frame is already selected, and click OK.
Drag a Button component to the Stage.
Select Control > Test Movie.