Using skins with the NumericStepper component

The NumericStepper component uses skins to represent its up and down button states. To skin the NumericStepper component while authoring, modify skin symbols in the Flash UI Components 2/Themes/MMDefault/Stepper Assets/States folder in the library. For more information, see About skinning components in Using ActionScript 2.0 Components.

If a stepper is enabled, the down and up buttons display their over states when the pointer moves over them. The buttons display their down state when pressed. The buttons return to their over state when the mouse is released. If the pointer moves off the buttons while the mouse is pressed, the buttons return to their original state.

If a stepper is disabled, it displays its disabled state, regardless of user interaction.

Property	Description
`upArrowUp`	The up arrow button's up state. The default value is `StepUpArrowUp`.
`upArrowDown`	The up arrow button's pressed state. The default value is `StepUpArrowDown`.
`upArrowOver`	The up arrow button's over state. The default value is `StepUpArrowOver`.
`upArrowDisabled`	The up arrow button's disabled state. The default value is `StepUpArrowDisabled`.
`downArrowUp`	The down arrow button's up state. The default value is `StepDownArrowUp`.
`downArrowDown`	The down arrow button's down state. The default value is `StepDownArrowDown`.
`downArrowOver`	The down arrow button's over state. The default value is `StepDownArrowOver`.
`downArrowDisabled`	The down arrow button's disabled state. The default value is `StepDownArrowDisabled`.

To create movie clip symbols for NumericStepper skins:

Select File > New and choose Flash File (ActionScript 2.0).
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.
In the theme's Library panel, expand the Flash UI Components 2/Themes/MMDefault folder and drag the Stepper Assets folder to the library of your document.
Expand the Stepper Assets folder in the library of your document.
Expand the Stepper Assets/States folder in the library of your document.
Open the symbols that you want to customize for editing.
For example, open the StepDownArrowDisabled symbol.
Customize the symbol as desired.
For example, change the white inner graphics to a light gray.
Repeat steps 6-7 for all symbols that you want to customize.
For example, repeat the same change on the up arrow.
Click the Back button to return to the main timeline.
Drag a NumericStepper component to the Stage.
This example has customized the disabled skins, so use ActionScript to set the NumericStepper instance to be disabled in order to see the modified skins.

Select Control > Test Movie.

NOTE

The Stepper Assets/States folder also contains a StepTrack symbol, which is used as a spacer between the up and down skins if the total height of the NumericStepper instance is greater than the sum of the two arrow heights. This symbol linkage identifier is not available for modification through a skin property, but the library symbol can be modified, provided that the linkage identifier remains unchanged.