|
The RadioButton component lets you force a user to make
a single choice within a set of choices. This component must be
used in a group of at least two RadioButton instances. Only one
member of the group can be selected at any given time. Selecting
one radio button in a group deselects the currently selected radio
button in the group. You set the
groupName
parameter
to indicate which group a radio button belongs to.
A
radio button is a fundamental part of many form applications on
the web. You can use radio buttons wherever you want a user to make
one choice from a group of options. For example, you would use radio
buttons in a form to ask which credit card a customer wants to use.
User interaction with the RadioButton component
A
radio button can be enabled or disabled. A disabled radio button
doesn’t receive mouse or keyboard input. When the user clicks or
tabs into a RadioButton component group, only the selected radio
button receives focus. The user can then use the following keys
to control it:
|
Key
|
Description
|
|
Up Arrow/Left Arrow
|
The selection moves to the previous radio
button within the radio button group.
|
|
Down Arrow/Right Arrow
|
The selection moves to the next radio button
within the radio button group.
|
|
Tab
|
Moves focus from the radio button group
to the next component.
|
For more information about controlling focus, see the IFocusManager
interface and the FocusManager class in the
ActionScript 3.0 Reference for the Adobe
Flash Platform
and
Work with FocusManager
.
A live preview of each RadioButton instance on the Stage reflects
changes made to parameters in the Property inspector or Component
inspector during authoring. However, the mutual exclusion of selection
does not display in the live preview. If you set the selected parameter
to
true
for two radio buttons in the same group,
they both appear selected even though only the last instance created
appears selected at run time. For more information, see
RadioButton component parameters
.
When you add the RadioButton component to an application, you
can make it accessible to a screen reader by adding the following
lines of code:
import fl.accessibility.RadioButtonAccImpl;
RadioButtonAccImpl.enableAccessibility();
You enable accessibility for a component only once, regardless
of how many instances you have of the component. For more information,
see Chapter 18, “Creating Accessible Content,” in Using Flash
.
RadioButton component parameters
You can set the following authoring
parameters in the Property inspector or in the Component inspector
for each RadioButton component instance:
groupName, label, LabelPlacement, selected
,
and
value
. Each of these parameters has a corresponding
ActionScript property of the same name. For information on the possible
values for these parameters, see the RadioButton class in the
ActionScript 3.0 Reference for the Adobe
Flash Platform
.
You can write ActionScript to set additional options for RadioButton
instances using the methods, properties, and events of the RadioButton
class.
Create an application with the RadioButton component
The following procedure
explains how to add RadioButton components to an application while
authoring. In this example, the RadioButtons are used to present
a yes-or-no question. The data from the RadioButton is displayed
in a TextArea.
-
Create a new Flash (ActionScript 3.0) document.
-
Drag two RadioButton components from the Components panel
to the Stage.
-
Select the first radio button. In the Property inspector,
give it an instance name of
yesRb
and a group name of
rbGroup.
-
Select the second radio button. In the Property inspector,
give it an instance name of
noRb
and a group name of
rbGroup.
-
Drag a TextArea component from the Components panel to the
Stage and give it an instance name of
aTa
.
-
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code:
yesRb.label = "Yes";
yesRb.value = "For";
noRb.label = "No";
noRb.value = "Against";
yesRb.move(50, 100);
noRb.move(100, 100);
aTa.move(50, 30);
noRb.addEventListener(MouseEvent.CLICK, clickHandler);
yesRb.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
aTa.text = event.target.value;
}
-
Select Control > Test Movie to run the application.
Create a RadioButton using ActionScript
This example
uses ActionScript to create three RadioButtons for the colors red, blue,
and green and draws a gray box. The
value
property
for each RadioButton specifies the hexadecimal value for the color
associated with the button. When a user clicks one of the RadioButtons,
the
clickHandler()
function calls
drawBox()
,
passing the color from the RadioButton’s
value
property
to color the box.
-
Create a new Flash (ActionScript 3.0) document.
-
Drag the RadioButton component to the Library panel.
-
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code:
import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;
var redRb:RadioButton = new RadioButton();
var blueRb:RadioButton = new RadioButton();
var greenRb:RadioButton = new RadioButton();
var rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp");
var aBox:MovieClip = new MovieClip();
drawBox(aBox, 0xCCCCCC);
addChild(redRb);
addChild(blueRb);
addChild(greenRb);
addChild(aBox);
redRb.label = "Red";
redRb.value = 0xFF0000;
blueRb.label = "Blue";
blueRb.value = 0x0000FF;
greenRb.label = "Green";
greenRb.value = 0x00FF00;
redRb.group = blueRb.group = greenRb.group = rbGrp;
redRb.move(100, 260);
blueRb.move(150, 260);
greenRb.move(200, 260);
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
drawBox(aBox, event.target.selection.value);
}
function drawBox(box:MovieClip,color:uint):void {
box.graphics.beginFill(color, 1.0);
box.graphics.drawRect(125, 150, 100, 100);
box.graphics.endFill();
}
-
Select Control > Test Movie to run the application.
For
more information, see the RadioButton class in the
ActionScript 3.0 Reference for the Adobe
Flash Platform
.
|
|
|
