User Guide

138 Chapter 6: Components Dictionary
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.
3. Save the file.
4. Create a new FLA file.
5. Save the FLA file in the same folder as the AS file.
6. Create a new symbol by selecting Insert > New Symbol.
7. Set the name to ButtonSkin.
8. If the advanced view is not displayed, click the Advanced button.
9. Select Export for ActionScript.
The identifier will be automatically filled out with
ButtonSkin.
10. Set the AS 2.0 class to RedGreenBlueSkin.
11. Ensure that Export in First Frame is already selected, and click OK.
12. Drag a Button component to the Stage.
13. Select Control > Test Movie.
Using movie clips to customize Button skins
The above example 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.
To create movie clip symbols for Button skins:
1. Create a new FLA file.
2. Create a new symbol by selecting Insert > New Symbol.
3. Set the name to RedButtonSkin.
4. If the advanced view is not displayed, click the Advanced button.
5. Select Export for ActionScript.
The identifier will be automatically filled out with
RedButtonSkin.
6. Set the AS 2.0 class to mx.skins.SkinElement.
7. Ensure that Export in First Frame is already selected, and click OK.
8. Open the new symbol for editing.
9. Use the drawing tools to create a box with a red fill and black line.
10. Set the border style to hairline.
11. 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.