Using skins with the ProgressBar component

The ProgressBar component uses skins to represent the progress bar track, the completed bar, and an indeterminate bar. To skin the ProgressBar component while authoring, modify symbols in the Flash UI Components 2/Themes/MMDefault/ProgressBar Elements folder. For more information, see About skinning components in Using ActionScript 2.0 Components.

The track and bar graphics are each made up of three skins corresponding to the left and right caps and the middle. The caps are used "as is," and the middle is resized horizontally to fit the width of the ProgressBar instance.

The indeterminate bar is used when the ProgressBar instance's indeterminate property is set to true. The skin is resized horizontally to fit the width of the progress bar.

A ProgressBar component supports the following skin properties:

Property

Description

progTrackMiddleName

The expandable middle of the track. The default value is ProgTrackMiddle.

progTrackLeftName

The fixed-size left cap. The default value is ProgTrackLeft.

progTrackRightName

The fixed-size right cap. The default value is ProgTrackRight.

progBarMiddleName

The expandable middle bar graphic. The default value is ProgBarMiddle.

progBarLeftName

The fixed-size left bar cap. The default value is ProgBarLeft.

progBarRightName

The fixed-size right bar cap. The default value is ProgBarRight.

progIndBarName

The indeterminate bar graphic. The default value is ProgIndBar.

To create movie clip symbols for ProgressBar 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 ProgressBar Assets folder to the library for your document.
  4. Expand the ProgressBar Assets/Elements folder in the library of your document.
  5. Open the symbols you want to customize for editing.

    For example, open the ProgIndBar symbol.

  6. Customize the symbol as desired.

    For example, flip the track horizontally.

  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 ProgressBar component to the Stage.

    To view the skins modified in this example, use ActionScript to set the indeterminate property to true.

  10. Select Control > Test Movie.