Patrick Mineault

Freelancer behind 5 1/2 math and physics enthusiast Patrick has a knack for making seemingly simple things overly complicated. Perfect for a tutorial writer.

View all articles by Patrick Mineault

Step 3: Creating multiple radio buttons

All right, so we have a single radio button done and ready. Of course, a radio button can't exist by itself; it just doesn't make sense. It must be put in relation to other radio buttons in order to work properly.

Select the radioButton0 clip in the main timeline and press f8 in order to nest it into a parent movieclip. Name this clip "radioButtonGroup".

This clip will act as the parent of our radio buttons. Most of the work will be done by it. Its first duty will be to create a set of radio buttons from the template, and add captions to them.

Let's see how this translates into actionscript. Select the radioButtonGroup clip in the main timeline, and add this script to it:

onClipEvent(load){

 labels = new Array();

 labels[0] = "potato";
 labels[1] = "potato";
 labels[2] = "potato";
 labels[3] = "Zimbabwe";
 numButtons = labels.length;

 vSpacing = 20;

 for(i = 0; i < numButtons; i++){
  if(i != 0){
   radioButton0.duplicatemovieclip("radioButton" add i, i);
   this["radioButton" add i]._y += i*vspacing;
  }
  this["radioButton" add i].label = labels[i];
 }
}

Let's examine this script line by line. The script is contained within a load clip event, which will only be executed once.

It starts off by defining an array named labels. This array will, as you've probably guessed, hold all of the labels for our buttons. labels[0] holds the label for our first radio button, labels[1] the label for our second radio button, and so on.

Next, the script defines the numButtons variable. Since there are as much radio buttons as there are labels, it makes sense to use the length property of the labels array in order to determine the total number of radio buttons.

The vSpacing variable holds the spacing, in pixels, between each of the radio button items. This will be useful to us when we place our buttons.

Now, for the meat of our script. As you remember, the single radio button we created acts as a template for all of our radio buttons. So we just need to duplicate it a set number of times, align the duplicates vertically, fill in the captions, and boom... we got ourselves some radio buttons.

So we start by defining a for loop that will be executed from 0 to the number of buttons - 1, for a grand total of numButtons times. Now, every time the loop is executed, it will first start off by duplicating our radioButton0 template. The duplicate will be named radioButtonX, where X is its number from the top, and placed on the Xth level.

When a movie clip is duplicated, it retains all of the properties from the original clip, including its position. Since we don't want our radio buttons to overlap, we'll simply move them an appropriate number of pixels vertically. For example, if a radio button is third from the top, then its "number" would be 2, and it would have to be moved 40 pixels vertically; more simply, number*vSpacing pixels.

Of course, since our template radio button, radioButton0, is already on the timeline and in its rightful place, we don't need to duplicate it or place it. Hence, we wrap these two last actions inside an if to make sure that we don't do so.

Finally, we fill the label text box with the appropriate label. That's it!

You might have noticed by now that we've been using this["radioButton" add i] to address our shiny new radio buttons. This is something called bracket syntax. Sometimes, we need to create variable or movieclip names dynamically, and bracket syntax is the answer to that problem.

What Flash does when it sees bracket syntax is that it evaluates what's inside the brackets as an expression. So if i is 2, this["radioButton" add i] becomes this["radioButton2"]. Next, it gets rid of the brackets and adds a dot before them, so this["radioButton2"] becomes this.radioButton2. Simple, now ain't it?

Before I move on, let me note that when you duplicate a movie clip, its attached actions are duplicated along with it. What this means is that like our template radio button, our duplicates will be able to know their own name and report their clicks to the parent movie clip. Hence, our clips will be self-aware and fully functional after being duplicated.

Step 4: Putting it all together

All right, we've got plenty of pretty radio buttons now, but the problem is, they don't do anything! Let's determine what our parent radio button group must be able to do.

First, it must be able to respond properly to the reportClick() function we defined earlier. This function must be able to select the clicked radio button, if it's not selected already.

We also need to be able to select a radio button by default. Finally, our parent clip should be able to tell us which radio button is selected.

Let's see how this all translates into actionscript. The old parts of the script are grayed out:

onClipEvent(load){

 labels = new Array();

 labels[0] = "potato";
 labels[1] = "potato";
 labels[2] = "potato";
 labels[3] = "Zimbabwe";
 numButtons = labels.length;

 vSpacing = 20;
 default = 3;

 for(i = 0; i < numButtons; i++){
  if(i != 0){
   radioButton0.duplicatemovieclip("radioButton" add i, i);
   this["radioButton" add i]._y += i*vspacing;
  }
  this["radioButton" add i].label = labels[i];
 }

 select(default);

 function reportClick(clicked){

  if(clicked != selected){

   select(clicked);

  }
 }

 function select(clicked){

  for(i = 0; i < numButtons; i++){

   this["radioButton" add i].gotoAndStop(1);

  }
  this["radioButton" add clicked].gotoAndStop(2);
  selected = clicked;

 }

 function getSelectedNum(){

  return selected;

 }

 function getSelectedLabel(){

  return labels[selected];

 }
}

Let's concentrate on the new parts of the script. We start off by defining the default selected option, in this case radio button #2. Moving down a bit, we make a call to the select function in order to select this default option.

What this function does, as you can see, is that it first loops through all of the radio buttons and unselects them one by one by sending them to their first frame. Next, it simply selects the appropriate radio button by moving it to its second frame, and makes sure to remember which radio button is selected by placing its number in the selected variable.

Our reportClick() function also uses the select() function. It simply checks if the radio button that called it was already clicked, and it not, it asks the select() function to select it.

Finally, we added two extra functions, getSelectedNum() and getSelectedLabel(), in order to retrieve information from our radio button group, that is, the number of the selected radio button and its label.

In the sample movie at the top, I named my group of radio buttons "groupOfRB", and simply made a call to groupOfRB.getSelectedNum() and groupOfRB.getSelectedLabel() in order to know what option you had selected. Knowing this, I produced appropriate feedback for the selected options.

Conclusion

As you can see, creating radio buttons in Flash is not quite as easy as in HTML. The great thing, however, about decision elements in Flash is that you can have instant or almost instant feedback.

Consider the same a|b|c|d type questionnaire in Flash and in HTML, where you only see one question per page. In HTML, you would have to load a new page every time a new question is asked; in Flash, however, you would have only one download. You could produce instant gratification to the user without worries of incompatibilities with different browsers and operating systems. You could even create an animated bar chart of the results! Just imagine the possibilities.

Well, I hope you've enjoyed this tutorial. Next time, we'll learn how to create a time machine and go back in time to prevent Netscape 4 from being released. No, seriously, I'm still looking for suggestions for new tutorials. Please send them to , as well as any questions or problems you might have.

As always, if you want to be reminded of upcoming tutorials, please send a blank e-mail to with "subscribe" in the subject line.

Until next time, happy scripting!