First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: 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.

» Level Intermediate

Added: 2001-12-05
Rating: 6.8 Votes: 30
(10 being the highest)
» Author
Patrick is a bored, bored 19 year old guy in desperate need of a girlfriend. He enjoys Flash, helping other people by writing tutorials, and has an almost creepy affection for blue squares. Come on girls, what are you waiting for?
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.