Flash CS3 Documentation

Using ActionScript 3.0 Components > Using the UI Components > Using the RadioButton > Creating an application with the RadioButton

Creating an application with the RadioButton

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.

To create an application with the RadioButton component:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag two RadioButton components from the Components panel to the Stage.
3. Select the first radio button. In the Property inspector, give it an instance name of yesRb and a group name of rbGroup.
4. Select the second radio button. In the Property inspector, give it an instance name of noRb and a group name of rbGroup.
5. Drag a TextArea component from the Components panel to the Stage and give it an instance name of aTa.
6. 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;  
   }
   

7. Select Control > Test Movie to run the application.

The following 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.

To create a RadioButton using ActionScript:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag the RadioButton component to the Library panel.
3. 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();        
   }
   

4. Select Control > Test Movie to run the application.

For more information, see the RadioButton class in the ActionScript 3.0 Language and Components Reference.

Flash CS3