Using skins with the RadioButton component

You can skin the RadioButton component while authoring by modifying the component's symbols in the library. The skins for the RadioButton component are located in the following folder in the library of HaloTheme.fla or SampleTheme.fla: Flash UI Components 2/Themes/MMDefault/RadioButton Assets/States. For more information, see About skinning components in Using ActionScript 2.0 Components.

If a radio button is enabled and unselected, it displays its rollover state when a user moves the pointer over it. When a user clicks an unselected radio button, the radio button receives input focus and displays its false pressed state. When a user releases the mouse, the radio button displays its true state and the previously selected radio button in the group returns to its false state. If a user moves the pointer off a radio button while pressing the mouse, the radio button's appearance returns to its false state and it retains input focus.

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

A RadioButton component uses the following skin properties:

Name

Description

falseUpIcon

The unselected state. The default value is RadioFalseUp.

falseDownIcon

The pressed-unselected state. The default value is RadioFalseDown.

falseOverIcon

The over-unselected state. The default value is RadioFalseOver.

falseDisabledIcon

The disabled-unselected state. The default value is RadioFalseDisabled.

trueUpIcon

The selected state. The default value is RadioTrueUp.

trueDisabledIcon

The disabled-selected state. The default value is RadioTrueDisabled.

Each of these skins corresponds to the icon indicating the RadioButton state. The RadioButton does not have a border or background.

To create movie clip symbols for RadioButton skins:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Select File > Import > Open External Library and then 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.

  3. In the theme's Library panel, expand the Flash UI Components 2/Themes/MMDefault folder and drag the RadioButton Assets folder to the library of your document.
  4. Expand the RadioButton Assets/States folder in the library of your document.
  5. Open the symbols that you want to customize for editing.

    For example, open the RadioFalseDisabled symbol.

  6. Customize the symbol as desired.

    For example, change the inner white circle to a light gray.

  7. Repeat steps 5-6 for all symbols that you want to customize.

    For example, repeat the color change for the inner circle of the RadioTrueDisabled symbol.

  8. Click the Back button to return to the main timeline.
  9. Drag a RadioButton component to the Stage.

    For this example, drag two instances to show the two new skin symbols.

  10. Set the RadioButton instance properties as desired.

    For this example, set one RadioButton to selected, and use ActionScript to set both RadioButton instances to disabled.

  11. Select Control > Test Movie.