Using skins with the Button

The Button component uses the following skins that correspond to its different states. To edit one or more skins to change the Button's appearance, double-click the Button instance on the Stage to open a palette of its skins, as shown in the following illustration:

Button skins

Button skins


If a button is enabled, it displays its over state when the pointer moves over it. The button receives input focus and displays its down state when it's pressed. The button returns to its over state when the mouse is released. If the pointer moves off the button while the mouse is pressed, the button returns to its original state. If the toggle parameter is set to true, the pressed state is shown with the selectedDownSkin, the up state with the selectedUpSkin, and the over state with the selectedOverSkin.

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

To edit one of the skins, double-click it to open it in symbol-editing mode, as shown in the following illustration:

Button in symbol-editing mode

At this point you can use the Flash authoring tools to edit the skin to your liking.

The following procedure changes the color of the Button's selected_over skin.

To change the color of the Button's selected_over skin:

  1. Create new Flash file (ActionScript 3.0).
  2. Drag a Button from the Components panel to the Stage. In the Parameters tab, set the toggle parameter to true.
  3. Double-click the Button to open the palette of its skins.
  4. Double-click the selected_over skin to open it in symbol-editing mode.
  5. Set the zoom control to 400% to enlarge the icon for editing.
  6. Double-click the background until its color appears in the Fill color picker in the Property inspector.
  7. Select color #CC0099 in the Fill color picker to apply it to the background of the selected_over skin.
  8. Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.
  9. Select Control > Test Movie.
  10. Click the button to put it in the selected state.

When you move the mouse pointer over the Button, the selected_over state should appear as it does in the following illustration.

Button showing selected_over skin with modified color