Check Boxes

I l @ ve RuBoard

In Hour 8, "Selecting and Dragging," I showed you two methods for making a movie clip selectable. Check boxes are basically selectable movie clips that resemble the standard check box design used in Mac and Windows operating systems.

To create a basic check box, you need two buttons and a movie clip. The first button represents the check box while it is off. This means that it is usually an empty box. The second button represents the check box in its on state, which means that it is the same box, but filled with a check mark or X.

The movie 15checkboxes.fla features such buttons. You can see them in the Library. The up and down states of the buttons differ only in that the white fill of the buttons changes to gray when the user presses down on the button.

Figure 15.1 shows three check boxes. The first one is on. The second is off. The third one is off, but the user is in the process of clicking it to turn it on. If you look closely, you will see that the third box has a grayish fill.

Figure 15.1. Three check boxes. The text next to them is separate.

graphics/15fig01.gif

The way these check boxes are assembled is simple. The off state button is converted into a movie clip. A second frame is added to the movie clip by pressing F6, which copies the first key frame. Then the button on the second frame is swapped for the on state button. So you have two frames: one with the off state button and one with the on state button. The two frames are named off and on.

A stop(); command is placed in the first frame of the movie clip so that the movie clip does not animate. Each of the buttons gets this script, which simply calls a function in the movie clip's timeline:

 on (release) {     pressButton(); } 

The first frame of the movie clip contains a little more than just the stop() command. It also contains a function and a variable declaration. The state variable represents whether the check box is on or off. When a button is clicked, the pressButton function toggles the state variable and then goes to the appropriate frame so that the appearance of the movie clip matches state .

 state = false; function pressButton() {     state = !state;     if (state) {         gotoAndStop("on");     }  else {         gotoAndStop("off");     } } 

Now the user can click on the button in the movie clip and move it between frames 1 and 2. The state variable also changes to reflect the state of the check box.

To get the state of the check box, refer to the variable state in the movie clip. If your check box movie clip is named checkBox1, you can use this to get its state:

 trace(checkBox1.state); 

The sample movie 15checkboxes.fla includes a button that sends the states of all three check boxes to the Output window. Open and test this movie to see it in action.

I l @ ve RuBoard


Sams Teach Yourself Flash MX ActionScript in 24 Hours
Sams Teach Yourself Flash MX ActionScript in 24 Hours
ISBN: 0672323850
EAN: 2147483647
Year: 2002
Pages: 272

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net