Internet Commerce
Developer ChannelFlashKit.com
JavaScriptSource Developer Jobs ScriptSearch WebDeveloper.com Webreference HTMLGoodies HTML5 Dev Center Developer.com jGuru.com PHPBuilder
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Actionscripting/Basic
Step 3: Creating multiple radio buttonsAll 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.
|
||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||
Actionscript for Flash 5 dummies - Creating radio buttons
|
 |
 |
|