Using skins with the ComboBox component

The ComboBox component uses symbols in the library to represent the button states and has skin variables for the down arrow. These skins are located in the Flash UI Components 2/Themes/MMDefault/ComboBox Assets/States folder of the HaloTheme.fla and SampleTheme.fla files. The information below describes these skins and provides steps for customizing them.

The ComboBox component also uses scroll bar skins for the drop-down list's scroll bar and two RectBorder class instances for the border around the text input and drop-down list. For information on customizing these skins, see Using skins with the UIScrollBar component and RectBorder class. For more information on the methods available to skin components, see About skinning components in Using ActionScript 2.0 Components.

A ComboBox component uses the following skin properties:

Property

Description

ComboDownArrowDisabledName

The down arrow's disabled state. The default is ComboDownArrowDisabled.

ComboDownArrowDownName

The down arrow's down state. The default is ComboDownArrowDown.

ComboDownArrowUpName

The down arrow's up state. The default is ComboDownArrowOver.

ComboDownArrowOverName

The down arrow's over state. The default is ComboDownArrowUp.

To create movie clip symbols for ComboBox skins:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Select File > Import > Open External Library, and select the HaloTheme.fla file.

    This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes in Using ActionScript 2.0 Components.

  3. In the theme's Library panel, expand the Flash UI Components 2/Themes/MMDefault folder and drag the ComboBox Assets folder to the library for your document.
  4. Expand the ComboBox Assets/States folder in the library of your document.
  5. Open the symbols you want to customize for editing.

    For example, open the ComboDownArrowDisabled symbol.

  6. Customize the symbol as desired.

    For example, change the inner white square to a light gray.

  7. Repeat steps 5-6 for all symbols you want to customize.
  8. Click the Back button to return to the main timeline.
  9. Drag a ComboBox component to the Stage.
  10. Set the ComboBox instance properties as desired.

    For this example, use ActionScript to set the ComboBox to disabled.

  11. Select Control > Test Movie.