Name: Actionscript for Flash 5 dummies: Creating radio buttons
Written by: Patrick Mineault
Time: 45 minutes
Difficulty: Intermediate
Requirements: Flash 5
Topics covered: duplicatemovieclip, bracket syntax
Assumed knowledge: basic actionscript download fla
Part 1

Note:

This tutorial is outdated. Flash MX and MX 2004 now include a radio button component which is very easy to use and is much more flexible than the script presented here

Actionscript for Flash 5 dummies: Creating radio buttons

Hello all and welcome to the third installment in the Actionscript for Flash 5 dummies series, Creating radio buttons. I know, I know, it's been a long time coming, but I think you'll find it was worth the wait.

If you're new to the series, I heartily recommend that you read the two first installments, Scrolling a text box I and II. While they're not necessary in order to finish this tutorial, it's still a good idea to read because this tutorial has in mind that you completed the first two tutorials.

As always, you can be reminded of further tutorials by sending a blank e-mail to with "subscribe" in the subject line.

Without further ado, here's the movie we're going to make:

Now, I know what you're saying. Radio buttons, how, hum, boring. Why yes, in fact. However, they are some of the most basic and intuitive to use interactive elements. The important thing to remember is that almost anybody that will go to your site will know instinctively how to use them.

Not only is it easy for users to use radio buttons, but if you code your buttons right, they will also be extremely easy for you to use. That is, updating, or recreating such a thing will be as easy as editing a few lines of code, or copy and paste.

Okay, enough with the small talk, let's get it on already.

Step 1: Building a single radio button

I know this will sound stupid, but let's start by analyzing how a radio button is made. Trust me, there are many elements which I'm sure you haven't thought of.

Well, first and foremost, a single radio button has two states: on and off. It also has a label, that is, a small blurb of text that sits there on the right and tells you what the button is for.

A radio button can be selected by clicking on it, but it can't be unchecked by clicking on it again; you have to select another option. And that's where the concept of dependency comes in: you can't have a radio button by itself. It doesn't make sense. The radio button must be part of something bigger, an option list, and it must be able to communicate with it.

So we'll start by creating a single radio button, which we'll put in relation to others later on. Create a new movie clip and name it "single radio button". Create two layers in it: states and label. In the first frame of the states layer, you should put a picture of an unclicked radio button, and in the second frame, the picture of it clicked. In my case, I simply used screenshots of radio buttons in different states, but you may use whatever you want.

Now in the first frame of the "label" layer of your movie clip, create a dynamic text box, about the length of 25 or so characters of text, and choose "label" as the variable name in the text options panel.

Your movie clip should now look like this:

Simple enough right? The first frame acts as the unselected radio button, and the second as the selected button. As you've probably guessed by now, we'll simply switch between these two frames in order to select and unselect our radio buttons.

Now that this is done, get out of that movie clip and go into your main timeline. Drag an instance of the "single radio button" and drop it into the first frame of your main timeline. Name it "radioButton0" in the instance properties window. That's it for the graphics part.

Wait a minute? That doesn't make sense, you say, I want more than one frigging radio button!!! Touché. The beauty of the script we're going to make is that it will be self-constructing: the script itself will make the radio buttons, not ourselves. So it will simply use this button as a template for all the others. It will even create text labels for each of them!

This will make updating your movie much easier, since you won't have to touch the graphics part. Instead, you'll just modify a few lines of code and the script will do all the dirty work for you. Meanwhile, you can peruse half-naked in your home drinking cheap tequila while your boss thinks you're doing work. That's right, better living through actionscript. Who would have thought?

Step 2: Adding actionscript to a single button

Now, seriously folks, you will still have to do a little work. The important thing is, you'll only do it once.

As I've noted earlier, a single radio button can't do much by itself, but it must be able to communicate with a whole group of radio buttons. Most notably, it should be able to tell the whole group that it has been clicked on. So what we're going to do is create an interface that will allow us to do so.

Select radioButton0 in the main timeline, go into the object actions panel and add this script:

onClipEvent(load){

 this.stop();
 this.myName = Number(this._name.substring(11, 12));

}

onClipEvent(mouseDown){

 if(this.hitTest(_root._xmouse, _root._ymouse)){

  _parent.reportClick(this.myName);

 }

}

All right, that's not too complicated, now is it. The first element in our script is the load clip event, which, as you remember, executes only once: when the clip is loaded.

The first line in this event tells the clip to stop, so that it won't continually toggle between its on and off states. The second is admittedly more complicated. I think this dialog will better illustrate the point of this line:

- Yo, hum, main clip?
- Yeah dude, what?
- I've like, been clicked on and stuff.
- Wait, who are you?
- Hum, I dunno dude
- Idiot...

As you can see, the clip must communicate with the whole group of radio buttons in order to tell it that it has been clicked. Of course, it must know it's own name in order to do so. Preferably, it should also know its "number", that is, the position of the radio button from the top of the radio button group.

So what the second line does here is that it first uses this._name, a property defined by default by Flash, in order to retrieve the name of the current clip. In this case, this would return "radioButton0". The important part of this string being the "0", we take a substring, or portion of the "radioButton0" string from the 11th to the 12th character; this will extract the last character, "0". This character is next converted to a number.

The rest of the script is contained within a mouseDown clip event, which is executed every time the mouse is clicked. The first line in this event should be familiar to you if you've followed the second tutorial; it checks whether the mouse was over the clip when it was clicked. If so, it triggers a function in the parent of this clip, the group of radio buttons, in order to report to it that it has been clicked, passing along with it its radio button number.

Simple enough, right? Now let's take a look at how we're going to handle multiple radio buttons.