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.
Three RadioButton Components with instance names button01_mc, button02_mc and button03_mc
Open a new Flash document and add a new layer.
Name the upper layer Actions and the lower one Content.
Select the first frame of the Content layer and open the Components panel (Window > Components).
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.
Option drag(PC - Ctrl + drag) the RadioButton on the stage twice to create two duplicates.
Select the first RadioButton, then open the Component Inspector (Window > Component Inspector).
Click the word Label in the Value column and change the text to Button01 then press Enter. The label on the RadioButton updates.
Change the value to Button01 Clicked, then press Enter.
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.
Select the Button01 Button, then open the Properties panel and assign it an instance name of button01_mc.
Repeat the process with the other two buttons and assign them instance names of button02_mc and button03_mc.
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
Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.
Copy/Paste the following code in the ActionScript Panel:
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");
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).