Using skins with the Window component

The Window component uses skins for its title background and close button, and a RectBorder instance for the border. The Window skins are found in the Flash UI Components 2/Themes/ MMDefault/Window Assets folder in each of the theme files. For more information about skinning, see About skinning components in Using ActionScript 2.0 Components. For more information about the RectBorder class and using it to customize borders, see RectBorder class.

The title background skin is always displayed. The height of the background is determined by the skin graphics. The width of the skin is set by the Window component according to the Window instance's size. The close skins are displayed when the closeButton property is set to true and when a change state results from user interaction.

A Window component uses the following skin properties:

Property

Description

skinTitleBackground

The title bar. The default value is TitleBackground.

skinCloseUp

The close button. The default value is CloseButtonUp.

skinCloseDown

The close button in its down state. The default value is CloseButtonDown.

skinCloseDisabled

The close button in its disabled state. The default value is CloseButtonDisabled.

skinCloseOver

The close button in its over state. The default value is CloseButtonOver.

The following example demonstrates how to create a new movie clip symbol to use as the title background.

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

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Create a new symbol by selecting Insert > New Symbol.
  3. Set the name to TitleBackground.
  4. If the advanced view is not displayed, click the Advanced button.
  5. Select Export for ActionScript.

    The identifier is automatically filled out with TitleBackground.

  6. 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 required by the component framework.

  7. Make sure 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 of 100 and height of 22.

    The Window component sets the proper width of the skin as needed but it uses the existing height as the height of the title.

  12. Click the Back button to return to the main timeline.
  13. Drag the Window component to the Stage.
  14. Select Control > Test Movie.