Using skins with the Alert component

The Alert component extends the Window component and uses its title background skin for the title background, a RectBorder class instance for its border, and Button skins for the visual states of its buttons. To skin the buttons and title bar while authoring, modify the Flash UI Components 2/Themes/MMDefault/Window Assets/Elements/TitleBackground and Flash UI Components 2/Themes/MMDefault/Button Assets/ButtonSkin symbols. For more information, see About skinning components in Using ActionScript 2.0 Components. The border and background are provided by the RectBorder class by default. For information on skinning the RectBorder class, see RectBorder class.

An Alert component uses the following skin properties to dynamically skin the buttons and title bar:

Property	Description	Default value
`buttonUp`	The up state of the buttons.	`ButtonSkin`
`buttonUpEmphasized`	The up state of the default button.	`ButtonSkin`
`buttonDown`	The pressed state of the buttons.	`ButtonSkin`
`buttonDownEmphasized`	The pressed state of the default button.	`ButtonSkin`
`buttonOver`	The rolled-over state of the buttons.	`ButtonSkin`
`buttonOverEmphasized`	The rolled-over state of the default button.	`ButtonSkin`
`titleBackground`	The window title bar.	`TitleBackground`

To set the title of an Alert component to a custom movie clip symbol:

Select File > New and choose Flash File (ActionScript 2.0).
Create a new symbol by selecting Insert > New Symbol.
Set the name to TitleBackground.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript.
The identifier is automatically filled out with TitleBackground.
Set the Class to mx.skins.SkinElement.
SkinElement is a simple class that can be used for all skin elements that don't provide their own ActionScript implementation. It provides movement and sizing functionality for components.
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 is positioned at (0,0) and has a width of 100 and height of 22.
The Alert component sets the proper width of the skin as needed, but it uses the existing height as the height of the title.
Click the Back button to return to the main timeline.
Drag an Alert component to the Stage and delete it.
This action adds the Alert component to the library and makes it available at runtime.

Add ActionScript code to the main timeline to create a sample Alert instance.

import mx.controls.Alert;
Alert.show("This is a skinned Alert component","Title");

Select Control > Test Movie.