Radio button component in Actionscript 3

In this tutorial I will teach you how to use the radio component in Actionscript 3.0. I have created a simple quiz which uses the radio components, but you could also create a form if you wish. Some knowledge of basic buttons is also need for this tutorial.


Radio button component in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Text tool with static text and type your message on the stage. I will be creating a quiz, so I have typed the following question: “What is the capital of Great Britain?” You can type whatever question you wish.


Step 2

Drag four radio components from the components window by selecting Window > Components and place the components beneath each other on the stage. Then drag a button component on the stage as show below. You can alternatively create your own button if you wish.




Step 3

Select Window > Component Inspector to open up the component inspector and change the labels of each of the radio buttons, and also change the label for the button.


Step 4

Select each radio button and give the following instance name accordingly: radiobutton1, radiobutton2, radiobutton3 and radiobutton4. Then give the button the following instance name: showAnswer_btn


Step 5

Select the Text tool with dynamic text and drag a text field below the ‘Show Answer’ button as show below. Then give the dynamic text field the instance name: ‘result_txt’




Step 6

On the timeline create a new layer called ‘Actions’ then open up the Actions panel (F9) and enter the following code:

//import the nessary controls for the radio button.
import fl.controls.RadioButtonGroup;

//This sets a group nanme for the radio button instances.
var myradioGroup:RadioButtonGroup=new RadioButtonGroup("Group 1");

//This assigns the radio button instances to the radio group.
radiobutton1.group=myradioGroup;
radiobutton2.group=myradioGroup;
radiobutton3.group=myradioGroup;
radiobutton4.group=myradioGroup;

//Mouse click event listener added to the button.
showAnswer_btn.addEventListener(MouseEvent.CLICK, showResult);

//This function displays the appropriate answer when the button is clicked.
function showResult(event:MouseEvent):void {
   switch (myradioGroup.selection) {
       case radiobutton1 :
           result_txt.text="Wrong answer";
           break;
       case radiobutton2 :
           result_txt.text="Correct answer";
           break;
       case radiobutton3 :
           result_txt.text="Wrong answer";
           break;
       case radiobutton4 :
           result_txt.text="Wrong answer";
           break;
   }
}

Step 7

Test your quiz Ctrl + Enter. Now try choosing different values from the radio buttons and hitting the show answer button.



You should now be able to use the Radio button component in Actionscript 3.0.