01. v1 Components, We Hardly Knew Ye   02. Button Component   03. Alert Component   04. Checkbox Component   05. Radio Buttons   06. The List Box family of Components   07. Date Chooser Component   08. Date Field Component   09. Label Component

10. Loader / Progress Bar Components   11. Numeric Stepper Component   12. Text Area/Input Components   13. Menu / Menu Bar Components   14. Scroll Pane Component   15. Window Component   16. Tree Component   17. Accordion Component   18. Conclusion

go to previous page

- discuss this tutorial -

go to next page

05. Radio Buttons

Unlike checkboxes, where you are allowed to select more than one for a given question in a form, you can only select one radio button from a radio button group. With radio buttons, the concept of a group is central to their use. They are used when a question requires a single answer (a "Select one of the following" type question.)

As with checkboxes, it is definitely possible to give radio buttons an active behavior by listening for the click event and I won't go into that here since it was discussed in detail for checkboxes in the previous section and the technique is the same. Instead, the example below will show you how to set up a form with radio buttons and passively inspect them when the user submits the form. The structure of the example is closely related to that of the Checkbox component example, above.

1. Layout the Stage using the screenshot below as a guide. The screen layout is essentially the same as the one you used for the Checkbox component example, above, so you can refer to the detailed instructions there if you feel lost at any point. The only difference is that you are replacing the four Checkbox components with four Radio Button components.
   
   
   
   
2. Give the first radio button the label Amazing and the instance name radioButton1. The most important property here is groupName. This is how we tell Flash that this radio button is part of the same group as the other three. For the groupName, enter myAdjective.
   
   
   
   
3. Similarly, set up the second radio button, using the screenshot below as a guide. Make sure you give it the same groupName as the first radio button.
   
   
   
   
4. Set up the third radio button using the Property Inspector, as shown below.
   
   
   
   
5. Set up the fourth radio button, as shown below.
   
   
   
   
6. Now that the radio buttons have been set up, enter the following code in Frame 1 of the Actions layer:
   

   // save a reference to the timeline that contains the form
   myForm = this; 
   // create a listener object for the submit button
   submitButtonListener = new Object();
              
   // submit button listener, click handler method
   submitButtonListener.click = function ()
   {
       // find the selected radio button in the group
       var selectedRadioButton = myAdjective.selection;
              
       // store the label of the selected radio button
       var selectedRadioButtonLabel = selectedRadioButton.label;
              
       // compose and display the message
       statusMessage.text = "You are " + selectedRadioButtonLabel;
   }
              
   // make the submit button listener listen for click events
   submitButton.addEventListener("click", submitButtonListener);
   

7. Test the movie, select one of the radio buttons and hit the Submit button and note the message that is displayed in the TextArea component.
   
   

If you have been following along from the Checkbox component, you will notice that the code in the submitButtonListener's click handler is much simpler for the Radio Button example. For one thing, you don't have to search in the form to find the correct components and then query them for their status. Instead, you can simply ask the radio button group to return a reference to the selected radio button. You created the radio button group by setting the groupName properties of the radio buttons in the Property Inspector in steps 2 to 5. Once you have the reference to the selected Radio Button component, you can easily get its label and compose and display a message within the TextArea component stating the user's selection.

go to previous page

- discuss this tutorial -

go to next page