RadioButton Component

RadioButton Component

Flash CS4 ActionScript 3.0 Tutorial


How to Add Pre-Built Radio Button Component to Your Flash File



Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a Radio Button Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library. Radio Buttons are often used to give the user multiple choices. By clicking on one button, a previously selected button in the group is deselected.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

Three RadioButton Components with instance names button01_mc, button02_mc and button03_mc


Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the RadioButton Component icon to a add a RadioButton to the center of the stage. The RadioButton and it's assets are also added to the Library.

Step Five

Option drag(PC - Ctrl + drag) the RadioButton on the stage twice to create two duplicates.

Step Six

Select the first RadioButton, then open the Component Inspector (Window > Component Inspector).

Step Seven

Click the word Label in the Value column and change the text to Button01 then press Enter. The label on the RadioButton updates.

Step Eight

Change the value to Button01 Clicked, then press Enter.

Step Nine

Repeat the process for the other two buttons to change the label values to Button02 and Button03. Also change the values to Button02 Clicked and Button03 Clicked.

Step Ten

Select the Button01 Button, then open the Properties panel and assign it an instance name of button01_mc.

Step Eleven

Repeat the process with the other two buttons and assign them instance names of button02_mc and button03_mc.

Step Twelve

Select each button one at time and set it's position in the Properties panel.

Button01: x=100, y=100

Button02: x=100, y=130

Button03: x=100, y=160

Step Thirteen

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Fourteen

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.RadioButton;

import fl.controls.RadioButtonGroup;

var button04_mc:RadioButton=new RadioButton();

var button05_mc:RadioButton=new RadioButton();

var button06_mc:RadioButton=new RadioButton();

var groupA:RadioButtonGroup=new RadioButtonGroup("choicesA");

var groupB:RadioButtonGroup=new RadioButtonGroup("choicesB");;;;


button04_mc.value="Button04 Clicked";;





button05_mc.value="Button05 Clicked";;





button06_mc.value="Button06 Clicked";;




groupA.addEventListener(Event.CHANGE, onChange01)

function onChange01(e:Event):void{



groupB.addEventListener(Event.CHANGE, onChange02)

function onChange02(e:Event):void{



Step Fifteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The six buttons appear on the stage. Whenever a button is clicked, any currently selected buttons in that group are deselected and the selected RadioButton's value is displayed in the Output panel.

Dissecting the Code

The first two lines of the code at Step Fourteen import the code necessary to talk to the Button class and the RadioButtonGroup class. Lines three to five establish a new RadioButton variables named button04_mc, button05_mc and and button06_mc.

These are the second set of buttons that we are adding to the stage with ActionScript.

Lines six and seven establish two new RadioButtonGroup variables (groupA and groupB), one for each set of buttons.

Lines eight through ten assign the first set of buttons to RadioButtonGroup called groupA.

The next six lines set the label, value, group and location for button04_mc. The button is then added to the stage.

The following two blocks of code perform the same tasks for button05_mc and button06_mc.

The final blocks of code add event listeners and functions that display the clicked value in the Output panel.

More Component Options

In this example we showed how to change the RadioButton label and value. You can use this same method to change the other RadioButton values shown in the Component Inspector (i.e., enabled, groupName, labelPlacement, selected and visible).