Using skins with the DateField component

The DateField component uses skins to represent the visual states of the pop-up icon, a RectBorder instance for the border around the text input, and a DateChooser instance for the pop-up. To skin the pop-up icon while authoring, modify skin symbols in the Flash UI Components 2/Themes/MMDefault/DateField Assets/States folder in the library of one of the themes' FLA files. For more information, see About skinning components in Using ActionScript 2.0 Components. For information about skinning the RectBorder and DateChooser instances, see RectBorder class and Using skins with the DateChooser component.

In addition to the skins used by the subcomponents mentioned earlier, a DateField component uses the following skin properties to dynamically skin the pop-up icon:

Property

Description

openDateUp

The up state of the pop-up icon.

openDateDown

The down state of the pop-up icon.

openDateOver

The over state of the pop-up icon.

openDateDisabled

The disabled state of the pop-up icon.

To create movie clip symbols for DateField skins:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Select File > Import > Open External Library and then 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 DateField Assets folder to the library of your document.
  4. Expand the DateField Assets folder in the library of your document.
  5. Make sure that the DateFieldAssets symbol is selected for Export in First Frame.
  6. Expand the DateField Assets/States folder in the library of your document.
  7. Open the symbols that you want to customize for editing.

    For example, open the openIconUp symbol.

  8. Customize the symbol as desired.

    For example, draw a down arrow over the calendar image.

  9. Repeat steps 7-8 for all symbols that you want to customize.

    For example, draw a down arrow over all of the symbols.

  10. Click the Back button to return to the main timeline.
  11. Drag a DateField component to the Stage.
  12. Select Control > Test Movie.