Using skins with the NumericStepper

The NumericStepper component has skins to represent the up, down, disabled, and selected states of its buttons.

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.

To change the color of the NumericStepper text background and the buttons in the up state:

Create a new FLA file.
Drag the NumericStepper component to the Stage.
Set the Zoom control to 400% to enlarge the image for editing.
Double-click the background of the TextInput skin on the skins panel until you drill down to the Group level and the background color appears in the Fill color picker in the Property inspector.
Using the Fill color picker in the Property inspector, select color #9999FF to apply it to the background of the TextInput skin.
Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.
Double-click the NumericStepper again to reopen the skins palette.
Double-click background of the up arrow button in the Up group until the background is selected and its color appears in the Fill color picker in the Property inspector.
Select color #9966FF to apply it to the background of the up arrow button.
Repeat steps 8 and 9 for the down arrow in the Up group.
Select Control > Test Movie.

The NumericStepper instance should appear as it shown in the following illustration:

NumericStepper with custom background and buttons