Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

RadioButton Smart Clip

The RadioButton smart clip has the same functionality and purpose as the HTML radio button. You use radio buttons when you want your viewer to pick one item out of a list of several.

You can pass four different parameters into the RadioButton smart clip:

  • _name. The instance name of the radio button on the Stage. By default, each instance of the RadioButton you drop on the Stage is assigned an instance name of radioBox1. If you want to do anything useful with your radio buttons, make sure you change this so that they have unique instance names. Remember, these are objects—if they have unique instance names, you can get information about them. As is the case when assigning instance names normally, don't use any spaces.

  • checked. Indicates whether the radio button is selected by default. The whole point of radio buttons is that you can pick only one of several options. Don't set the value of checked to be true for more than one radio button. If you set the value of checked to true for more than one radio button, Flash assumes that you really meant to choose the last instance that was placed on the Stage.

  • label. Indicates the text to be displayed next to the radio button.

  • style. Indicates whether to display the radio button using the Windows or Macintosh style. The default setting of "auto" causes Flash to display the button based on the user's operating system.

Adding radio buttons to the Stage is as simple as drag and drop.


The _name property overrides the instance name, if it has been set in the Clip Parameters panel.

Changing the default variable values in a smart clip symbol does not change the values of the instance(s) on the Stage.

Exercise 20.1 Adding RadioButton Smart Clips

Before you can begin to work with the RadioButton smart clip, you need to open the Smart Clip Library (Window > Common Libraries > Smart Clips) and drag an instance of the RadioButton onto the stage.

  1. Open smartclip.fla from your CD and then open the Smart Clips Library (Window > Common Libraries > Smart Clips).

  2. Add a new layer and name it radio buttons. With the radio buttons layer selected, drag the RadioButton smart clip from the Smart Clips Library onto the Stage.

  3. Duplicate the RadioButton smart clip on the Stage twice (Edit > Duplicate or Control+D or Command+D). Position all three smart clips in the Radio Button section of the movie. (See Figure 20.2.)

    Figure 20.2 Drag a copy of the RadioButton smart clip onto the Stage and make two duplicates. Position all three smart clips in the Radio Buttons section of the Stage.

  4. Open the Clip Parameters panel by right- or Control-clicking the first instance of the RadioButton smart clip on the Stage and selecting Panels > Clip Parameters.


    Resize the Clip Parameters panel so that you can see both the Name/Value and Description panes.The Description pane gives you valuable information about the clip you are modifying.

  5. To change the value of a parameter, you have to double-click the current value. For _name and label, you edit the text, but for checked or style, you select a value from the drop-down list. (See Figure 20.3.) For the three instances that are on the Stage, change the values for the parameters to the following:

    _name: radioBox1
    checked: false 
    label: Red
    style: Auto
    _name: radioBox2
    checked: false
    label: Blue
    style: Auto
    _name: radioBox3
    checked: true
    label: Green
    style: Auto

    You'll notice that when you change the values of the parameters, the clips on the Stage don't change. You won't see any changes until you test your movie.

    Figure 20.3 You use the Clip Parameters panel to set the parameters for the three radio buttons.


    To change the font style and color of radio button descriptive text, edit the RadioButton Assets movie clip in the Library. Pay attention when you do this; there's more than one frame with text in it.Alternately, double-click one of the instances on the Stage three times to edit the text. Use the Character panel to make any changes.You also can change the size and appearance of the actual radio button as well—just edit it.

  6. Test your file. You should be able to click any radio button to select it, but you can select only one at a time.

The CheckBox smart clip is very similar to the RadioButton smart clip. They share most of the same parameters.

  • + Share This
  • 🔖 Save To Your Account