Using skins with the Button component

The Button component includes 32 different skins that can be customized to correspond to the border and icon in 16 different states. To skin the Button component while authoring, create new movie clip symbols with the desired graphics and set the symbol linkage identifiers using ActionScript. (For more information, see Using ActionScript to draw Button skins.)

The default implementation of the Button skins provided with both the Halo and Sample themes uses the ActionScript drawing API to draw the button states, and uses a single movie clip symbol associated with one ActionScript class to provide all skins for the Button component.

The Button component has many skins because a button has so many states, and a border and icon for each state. The state of a Button instance is controlled by four properties and user interaction. The following properties affect skins:

Property	Description
`emphasized`	Provides two different looks for Button instances and is typically used to highlight one button, such as the default button in a form.
`enabled`	Shows whether or not the button is allowing user interaction.
`toggle`	Provides a selected and unselected value and uses different skins to demonstrate the current value. For a Button instance whose `toggle` property is set to `false`, the `false` skins are used. When the `toggle` property is `true`, the skin depends on the `selected` property.
`selected`	When the `toggle` property is set to `true`, determines if the Button is selected (`true` or `false`). Different skins are used to identify the value and, by default, are the only way this value is depicted on screen.

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 and it retains input focus. If the toggle parameter is set to true, the state of the button does not change until the mouse is released over it.

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

A Button component supports the following skin properties:

Property	Description
`falseUpSkin`	The up (normal) state.
`falseDownSkin`	The pressed state.
`falseOverSkin`	The over state.
`falseDisabledSkin`	The disabled state.
`trueUpSkin`	The toggled state.
`trueDownSkin`	The pressed-toggled state.
`trueOverSkin`	The over-toggled state.
`trueDisabledSkin`	The disabled-toggled state.
`falseUpSkinEmphasized`	The up (normal) state of an emphasized button.
`falseDownSkinEmphasized`	The pressed state of an emphasized button.
`falseOverSkinEmphasized`	The over state of an emphasized button.
`falseDisabledSkinEmphasized`	The disabled state of an emphasized button.
`trueUpSkinEmphasized`	The toggled state of an emphasized button.
`trueDownSkinEmphasized`	The pressed-toggled state of an emphasized button.
`trueOverSkinEmphasized`	The over-toggled state of an emphasized button.
`trueDisabledSkinEmphasized`	The disabled-toggled state of an emphasized button.
`falseUpIcon`	The icon up state.
`falseDownIcon`	The icon pressed state.
`falseOverIcon`	The icon over state.
`falseDisabledIcon`	The icon disabled state.
`trueUpIcon`	The icon toggled state.
`trueOverIcon`	The icon over-toggled state.
`trueDownIcon`	The icon pressed-toggled state.
`trueDisabledIcon`	The icon disabled-toggled state.
`falseUpIconEmphasized`	The icon up state of an emphasized button.
`falseDownIconEmphasized`	The icon pressed state of an emphasized button.
`falseOverIconEmphasized`	The icon over state of an emphasized button.
`falseDisabledIconEmphasized`	The icon disabled state of an emphasized button.
`trueUpIconEmphasized`	The icon toggled state of an emphasized button.
`trueOverIconEmphasized`	The icon over-toggled state of an emphasized button.
`trueDownIconEmphasized`	The icon pressed-toggled state of an emphasized button.
`trueDisabledIconEmphasized`	The icon disabled-toggled state of an emphasized button.

The default value for all skin properties ending in "Skin" is ButtonSkin, and the default for all "Icon" properties is undefined. The properties with the "Skin" suffix provide a background and border, whereas those with the "Icon" suffix provide a small icon.

In addition to the icon skins, the Button component also supports a standard icon property. The difference between the standard property and style property is that through the style property you can set icons for the individual states, whereas with the standard property only one icon can be set and it applies to all states. If a Button instance has both the icon property and icon style properties set, the instance may not behave as anticipated.

The following interactive demo shows when each skin is used. Use the four ComboBox instances to set the skin-related properties of the button, and then click, mouse-over, and interact with the button to see which skin is used for each property settings.

Interactive demo of the sixteen Button states

Flash CS3