Using movie clips to customize Button skins

The example above demonstrates how to use an ActionScript class to customize the Button skin, which is the method used by the skins provided in both the Halo and Sample themes. However, because the example uses simple colored boxes, it is simpler in this case to use different movie clip symbols as the skins.

Select File > New and choose Flash File (ActionScript 2.0).
Create a new symbol by selecting Insert > New Symbol.
Set the name to RedButtonSkin.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript.
The identifier is automatically filled out with RedButtonSkin.
Set the Class to mx.skins.SkinElement.
Make sure that Export in First Frame is already selected, and click OK.
Open the new symbol for editing.
Use the drawing tools to create a box with a red fill and black line.
Set the border style to hairline.
Set the box, including the border, so that it is positioned at (0,0) and has a width and height of 100.
The SkinElement class resizes the content as appropriate.
Repeat steps 2-11 and create green and blue skins, named accordingly.
Click the Back button to return to the main timeline.
Drag a Button component to the Stage.
Set the toggled property value to true to see all three skins.

Copy the following ActionScript code to the Actions panel with the Button instance selected.

onClipEvent(initialize) {
    falseUpSkin = "BlueButtonSkin";
    falseDownSkin = "GreenButtonSkin";
    falseOverSkin = "BlueButtonSkin";
    falseDisabledSkin = "BlueButtonSkin";
    trueUpSkin = "RedButtonSkin";
    trueDownSkin = "RedButtonSkin";
    trueOverSkin = "RedButtonSkin";
    trueDisabledSkin = "RedButtonSkin";
}

Select Control > Test Movie.

Using movie clips to customize Button skins

To create movie clip symbols for Button skins: