Using skins with the ProgressBar

The ProgressBar component uses skins to represent the progress bar track, the completed bar, and an indeterminate bar as shown in the following illustration.

The bar is placed over the track skin, using the barPadding to determine the positioning. The assets are scaled using 9-slice scaling.

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

You can edit these skins to change the appearance of the ProgressBar. For example, the following example changes the color of the indeterminate bar.

To change the color of the indeterminate bar by editing its skin:

Create a new FLA file.
Drag a ProgressBar component to the stage and double-click it to open its panel of skin icons.
Double-click indeterminate bar skin.
Set the zoom control to 400% to enlarge the icon for editing.
Double-click one of the diagonal bars, then hold down the Shift key and click on each of the others. The current color appears in the Fill color picker in the Property inspector.
Click the Fill color picker in the Property inspector to open it and select color #00CC00 to apply it to the selected diagonal bars.
Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.
Select Control > Test Movie.

The ProgressBar should appear as shown in the following illustration.

Custom skin for indeterminate ProgressBar