Using skins with the RadioButton

The RadioButton has the following skins which you can edit to change its appearance:

If a RadioButton is enabled and not selected, it displays its over skin when a user moves the pointer over it. When a user clicks a RadioButton, it receives input focus and displays its selected_down skin. When a user releases the mouse, the RadioButton displays its selected_up skin. If a user moves the pointer out of the RadioButton's hit area while pressing the mouse button, the RadioButton redisplays its up skin.

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

The following example replaces the selected_up skin that indicates the selected state.

To create a new RadioButton selected_up skin:

Create a new Flash file (ActionScript 3.0).
Drag the RadioButton component to the Stage and double-click it to open its palette of skins.
Set the zoom control to 800% to enlarge the icon for editing.
Double-click the selected_up skin to select it and hit the Delete key to delete it.
Select the Rectangle tool on the Tools panel.
In the Property inspector, set the line color to red (#FF0000) and the Fill color to black (#000000).
Starting at the cross hairs that mark the symbol's registration point (also origin point or zero point), click and drag the pointer to draw a rectangle.
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.
Click the RadioButton to select it.

The RadioButton in the selected state should appear similar to the one in the following illustration.

RadioButton in customized selected state