Buttons

Buttons

Until now, I have avoided the topic of buttons. That's because talking about buttons in MX 2004 can be quite a can of worms. The story goes like this.

In previous versions of Flash, a button was one of the three symbol types. There were movie clips, buttons, and graphics. In fact, the old button type is still available for use in Flash MX 2004 when you create a new symbol. Create one now and notice that there is an option to change the symbol type to button. That's the old-style button, and we won't be using it in this book even once. Why? The old button type is obsolete. There is a new kind of button in MX, and it can do anything the old buttons can do, plus a good deal more. Most books I have read on MX and later teach both kinds of buttons, mainly because the new type requires more advanced programming than the old kind. So I could have explained the old buttons in Chapters 1, "The Flash Authoring Tool," or 2, "Flash ActionScript," and let you create some of those, only to come along and change the way buttons are made when we got to this chapter. I decided to simply neglect the topic of buttons until you were ready for the new-and-improved button style and then teach that alone.

But the can of worms is not empty yet. There is also a new addition to MX in the form of a button object. This is a more powerful version of the old button symbol, but still not as powerful as the kind we will be using in this book. Our kind of button, the most powerful kind, is called a movie clip button. That's because it's technically not a button ”it's actually a movie clip.

So we have three types of buttons: button symbols, button objects, and movie clip buttons. As I've said already, we're only concerned with the most powerful of these: the movie clip button. From here on, when I refer to a button, I am referring to a movie clip button.

Note  

The reason that the older-style buttons are weaker than the new ones has to do with the fact that the old buttons did not have timelines . Instead, they could have only script attached to their instances in the form of button event handlers. As a result, most buttons in previous versions of Flash had to be placed inside a movie clip so that we could manipulate the button like we wanted to. This is a messy way to make a button, and as of the release of MX, it's an unnecessary one.

Note  

If you are interested in learning about the old style of buttons or about button objects, the lessons, tutorials, and Flash Manual should provide you with ample material. They are quite simple to learn and shouldn't present you with much of a challenge, particularly after you learn about the movie clip style of button.

The Button States

The first thing to learn about buttons is that they have what are called states . A button has three states: _up , _over , and _down . By using frame labels to define particular states of a button, you can tell Flash how the button should behave with almost no ActionScript at all. This is easier to demonstrate than to explain, so let's have a look at it in use before I say anything further about it.

Create a new movie and add a new symbol called myButton . The symbol should be a movie clip ”do not create a symbol of the button type. Edit the symbol and, in the first frame, draw a rectangle in a pretty color . Then place a text box on top of it with the message Click Me! inside it. It should look something like Figure 4.10.

Figure 4.10: The first step in creating a button is to draw the button's _up state in the first frame.

Caution  

Notice that the frame labels have an underscore at the beginning. That is required. If you simply label your frame up , Flash will not automatically change states for you.

Name the layer button and then create a second layer named labels . Select the first frame of the labels layer and look at the Properties panel. In the layer called Label , type _up . You should see the red flag appear in the frame you just named, indicating that it has a label, as in Figure 4.11.

Figure 4.11: After you have labeled your _up , _over , and _down frames , Flash knows automatically which frame to go to for the correct display.

Now right-click on frame 2 of the button layer and select Add Keyframe. Doing so copies the first frame's art into the second frame, giving you a duplicate frame. Change the color of the rectangle and the color of the text in this new frame, but be sure not to move them when you do. Now right-click frame 2 of the labels layer and add a blank keyframe. Label it _over in the property inspector. Finally, right-click the third frame of the button layer and add a keyframe; again, this copies the previous frame for you. Change colors yet again and add a blank keyframe to the third frame in the labels layer. Label this frame _down . You should now have something that looks similar to Figure 4.11, with the first three frames labeled with art inside. It won't work right if you test your movie now, but it's getting there.

The final thing we need to do is stop the button's timeline from playing. That's simple enough; just create a third layer called script and add blank keyframes in frames 2 and 3. Add the following line of script to frames 1 “3 in the script layer:

 stop(); 

Now export the symbol in the linkage properties and add the following script to the main timeline:

 attachMovie("myButton"," myButton",1); myButton._x += 200; myButton._y += 200; myButton.onPress = function(){} 

Test your movie and move your mouse over the button. You should see it changing colors when you roll over it and when you click it. Flash knows what you're doing and moves the playhead on the button clip to the correctly labeled frame when appropriate. You might be thinking, "Why did we define the empty function for onPress ?" The answer is that Flash interprets a movie clip to be a button only after one of its button event handlers has been defined. In the future, you'll need to define at least one handler for your button to actually do something, so this point is trivial. Let's take a look at the handlers that we can use for button functionality.

The Button Handlers

The second part of using buttons is the attachment of dynamic event handlers. Seven event handlers allow a movie clip to take on the functionality of a button. They don't all have to be defined for a given button ”and rarely will you have a button that defines them all ”but they are all useful from time to time.

The onPress Handler

The onPress handler is quite popular, and you'll find it used extensively in games . As the name implies, it is called when the mouse button is pressed. In contrast to the onMouseDown handler, however, the onPress handler is only called when the mouse button is pressed over the movie clip to which the handler is attached. If the user clicks elsewhere on the stage, the handler is not executed. Go ahead and use the same movie from the previous example ”the one with the simple button. Remove the empty onPress handler and replace it with this one:

 myButton.onPress = function(){     trace("button pressed over myButton"); } 

Now when you test your movie, you should see the message output only when the user presses the button over the button clip, as in Figure 4.12.

Figure 4.12: The onPress event will only occur when the user presses the mouse button over the clip to which the handler is attached.

The onRelease Handler

This handler is similar to the onPress handler, except that it is invoked when the user releases the button over your clip. Add the following code to the end of your script and then test the movie:

 myButton.onRelease = function(){     trace("button released over myButton"); } 

When you are testing, click outside the button, drag the mouse over the button, and release. Notice that no message is output. That's because onRelease is called only when the user first clicks down on the button and then releases over the button. The user can click over the button, drag out, drag back in, and then release, and the message will be printed as well. The criterion for onRelease being called is only that the user clicks down and up over the same clip.

Generally, onRelease is the handler you'll attach your button functionality to. You can attach it to onPress , but that's usually not what you want. In most cases, a button will do its job only when the user completes the click by releasing the button.

The onReleaseOutside Handler

If you want the user to be able to click down on your button, drag out, and then release outside, the event to use is an onReleaseOutside handler. This event is invoked when the user clicks on the clip, drags the mouse outside, and then releases the button. Add the following lines of code to the end of the existing script and test it out:

 myButton.onReleaseOutside = function(){     trace("button released outside myButton"); } 

The onDragOut Handler

The onDragOut handler occurs when the user clicks on the clip and then drags the mouse outside the clip. Add the following script to the end of the existing one:

 myButton.onDragOut = function(){     trace("mouse dragged outside myButton"); } 

As you test, you will see that this handler is called in combination with other handlers. For example, if you click on the clip, you'll get onPress . If you then drag outside, you'll get onDragOut , and if you then release, you'll get onReleaseOutside .

The onDragOver Handler

The onDragOver event is a bit tricky. The qualifications for this event are as follows : If the user clicks the mouse over your clip, drags out, and then drags back in again, the onDragOver event will occur. On the other hand, if the user clicks outside and simply drags in, it will not. Again, attach this code and test it out:

 myButton.onDragOver = function(){     trace("mouse dragged inside myButton"); } 

Try clicking inside, dragging out, and dragging back in, which should invoke the handler. Then click outside and drag inside, which should not.

The onRollOver Handler

This handler is called when the user is not pressing the button and moves the mouse over your clip. At that point, the onRollOver event is invoked, as you can see by testing the following code:

 myButton.onRollOver = function(){     trace("mouse rolled over myButton"); } 

The onRollOut Handler

The onRollOut handler is called when the user has not pressed the button from over the clip to outside it. At the point when the mouse leaves the clip, this event in invoked. Test the following code to see for yourself:

 myButton.onRollOut = function(){     trace("mouse rolled out of myButton"); } 

An example of the possible output from all these handlers is given in Figure 4.13. A full version of this script can be seen in the button handlers.fla file found in the Chapter 04 directory of the supplemental CD.

Figure 4.13: By using the various button event handlers, a movie clip can be turned into a fully interactive button.

Now that you have all seven event handlers defined in your script, take a few moments to play around with the button and get all the event handlers firing. All that's left to do now is to create some cool effects for each of these handlers instead of a simple trace call, and our button will be dazzling users with its interactivity.

The Button Hit Area

So how does Flash know when you are inside the button and when you are outside it? That seems like a stupid question; obviously, Flash knows where the button is and it knows its shape, so it can tell when the mouse pointer is inside and when it's not. But suppose we want to customize the area that Flash believes the button to be in. That would affect when the different events occur, and in the future, we might very well want to do this for various reasons. Fortunately, Flash gives us the power to do so by altering what is called the hit area of a button.

The hit area is the specific area that Flash assumes is your button. If you make your hit area larger than your button's image, the user will see the button go into its _over state when the mouse gets close to the button. On the other hand, if you make the hit area smaller, the user will be inside the button before the onRollOver and similar events occur.

The default hit area for a button is the button's image. That's logical enough. When you want to change the hit area, all you have to do is set the hitArea property of the button to some new movie clip reference. Whatever clip is pointed to by the reference will be used as the hit area for the button. The new hit area clip does not have to be visible; it must only exist. Let's see an example to illustrate .

Using the existing movie from the previous examples, create a new symbol called myHitArea and draw a circle inside it. Then export the symbol. Now add the following script to the end of the existing script on frame 1 of the main timeline:

 attachMovie("myHitArea"," myHitArea",2); myHitArea.onEnterFrame = function(){     this._x++;     this._y++;     if(this._x > 550)         this._x = 0;     if(this._y > 400)         this._y = 0; } myButton.hitArea = myHitArea; 

This first creates a new instance of the myHitArea clip, which contains a circle. Then the clip is given an onEnterFrame handler, which moves it around the stage slowly. This part isn't necessary, but it will help to illustrate the concept. The final line assigns the hit area of the button from the new myHitArea clip. Now test your movie and watch. As the hit area circle moves around, as in Figure 4.14, so does the hotspot for your button. No longer does the button dictate when the button events are invoked; instead, the new movie clip serves as the hit area. And what's more, it's moving. Cool, eh?

Figure 4.14: The hit area of a button can be defined as any movie clip on the stage using the hitArea property of the button clip.

If you want to make the hit area invisible, you should do so by setting the clip's _visible property to false . If you make it invisible by reducing the _alpha to 0, it will require more CPU if you are moving the clip around. Setting _visible to false is much more efficient.

Now that we know about button states, button handlers, and the button hit area, there is one last topic we need to discuss before we set about creating our big interactive button example: the ability to control the timeline playback of a movie clip.