Radio Buttons

I l @ ve RuBoard

Radio Buttons

Radio buttons are a little more complex than check boxes. All the radio buttons in a group are related .

Whereas check boxes are used when the user needs to choose options that are not exclusive, radio buttons are used when options are exclusive. At any one time, only one radio button in a group can be on. The rest in the group are off.

Figure 15.2 shows a group of radio buttons. The first one is on, but the user is in the process of selecting the second one. When the selection is complete, the first radio button turns off automatically.

Figure 15.2. These four radio buttons are all part of one group, so only one can be on at a time.

The basic radio button is the same as a check box. There is an on state and an off state represented by the two frames of the movie clip. Each frame contains its own button. The first button has an empty circle, whereas the second button has a circle with a dot inside it.

Check boxes make sense, but what are radio buttons? That name comes from old-fashioned car radios. Before digital tuners, you used to need to turn a dial to change the station. To have memory buttons on the radio, they had to be mechanical. You would press one, and it would move the dial to that station. On some radios, it would stay pressed until you pressed another one. Either way, only one button ”or option ”could be selected at a time.

Modern car radios work in basically the same way, except that the buttons don't stay pressed. However, the ideas that all the buttons are related and that only one option can be active at any one time still applies.

The major difference between check boxes and radio buttons is the script. Radio buttons need a much longer one because they need to act together as a group.

The first part of the script runs on the first frame of the radio button movie clip. It runs outside a function, which means that it gets executed as soon as the movie clip loads.

It checks to see whether there is an array named radioButtons one level up. If there is not, this must be the first radio button to load. The array is created. In addition, because this is the first radio button loaded, it is turned on. All other radio buttons will be turned off.

The radioButtons array sits one level up, usually at the root level. It holds a reference to each radio button movie clip created. The script uses push to place a reference to itself into the array.

 // don't animate stop(); // see if this is the first radio button if (_parent.radioButtons == undefined) {     // create array     _parent.radioButtons = new Array();     // turn this first one on     gotoAndStop("on");     state = true; }  else {     // if not first, then off     state = false; } // add this button to array one level up _parent.radioButtons.push(this); 

When a user clicks the button, the turnOn function is called. The first thing this does is loop through all the radio buttons using the radioButtons array. The function turnOff is called in each of these movie clips. The result is that all the radio buttons are turned off.

Then, the current button is turned on. This ensures that only one will be on at a time.

 // button pressed function turnOn() {     // use array to turn all buttons off     for(var i=0;i<_parent.radioButtons.length;i++) {         _parent.radioButtons[i].turnOff();     }     // turn this one back on     gotoAndStop("on");     state = true; } 

Next is the turnoff function. It sets the state variable and moves the movie clip to the proper frame.

 // told to turn off function turnOff() {     gotoAndStop("off");     state = false; } 

This is all that is needed to get the radio buttons working. You can now make as many copies of the radio button movie clip as you need. They will all act as a group.

One last function in all of them is the getValue function. This is used by other scripts to determine which radio button is pressed. You can call it using any of the movie clips. It loops through the radioButtons array and looks for one with state set to true. It returns the name of the movie clip that is turned on.

 // asked for value function getValue() {     // use array to loop through all buttons     for(var i=0;i<_parent.radioButtons.length;i++) {         // if this one is on, then return its name         if (_parent.radioButtons[i].state) {             return(_parent.radioButtons[i]._name);         }     }     // if no button is on, return empty string -- should never happen     return ""; } 

Here is how you use the getValue function. You simply use any one of the radio button instances:

 trace(radio1.getValue()); 

The value returned will be radio1 if that movie clip is the one turned on, or the name of another movie clip if another is turned on.

I l @ ve RuBoard