Any time you create a new symbol, you must specify the behavior as a Movie Clip, Button, or Graphic. So far you've only chosen Graphic or Movie Clip. Creating a button is actually no more difficult than selecting Button as the behavior. The following task looks at creating a button in more detail.
Try It Yourself: Make a Super Simple Button
In this task you'll make the simplest button possible:
In a new file, draw an oval or a rectangle that will become your button.
Use the Selection tool to select the entire shape.
Convert the shape to a symbol by selecting Modify, Convert to Symbol (or pressing F8).
Name the symbol MyButton, make sure that you select the Button behavior, and then click OK.
Test your movie (by using Control, Test Movie or pressing Ctrl+Enter) and notice the way your mouse cursor changes when you place it over the button (as shown in Figure 14.1).
Figure 14.1. Any shape can be used as a button. The user's cursor changes to a hand when it's over the shape.
Save this file because you'll add to it in the next task.
Did you Know?: Enabling Simple Buttons
It's actually possible to preview buttons without testing a movie. To do this, you select Control, Enable Simple Buttons. However, this feature is more trouble than it's worth. You have to turn it off in order to modify your button (if you want to click to select it you don't want it behaving like a button). The best way to "see" the button is to use Test Movie.
Making a button looks easy, doesn't it? Even though you did make a button in the preceding task, it probably falls short of your expectations in two general ways: It doesn't look like a button (with various states) and it doesn't act like a button (causing something to happen when it's clicked). We'll address the issue of making the button do something in Hour 15. For now, though, you can complete the following task to make the simple button look better by adding an over state and a down state.
Try It Yourself: Add Multiple States to a Simple Button
In this task you'll refine the simple button you made earlier this hour:
In the file that contains the MyButton symbol you created in the previous task, double-click the instance of the button, and you are taken into the master version of the symbol. If you're having trouble clicking the button because you keep getting the hand cursor every time you go over the button, select the Control menu and make sure that the menu item Enable Simple Buttons does not have a check mark next to it.
Now that you're in the master version of the MyButton symbol, you should notice that this symbol has only four frames and instead of being numbered, they're named Up, Over, Down, and Hit (see Figure 14.2). They are still four frames they just all have names. Into each frame, you'll draw how we want the button to appear for various states. The up state already contains how the button looks normally.
Figure 14.2. Inside the button symbol are four named frames.
By the Way: The Four States
The up state contains the visual look of the button in its normal state. Over contains the look for when the user hovers his cursor over the button. Down is when the user clicks. Hit is a special state in which you place a visual representation of what portion of the button you intend to be clickable. This is what the user must "hit" in order to see the over and down states.
In the Over frame, draw how the button will look when the user's cursor hovers over it. To do this, insert a keyframe into the second frame of the button by clicking in the Timeline under Over and pressing F6 or selecting Insert, Timeline, Keyframe. Select the Paint Bucket tool and a color similar to but slightly lighter than the color currently filling the rectangle shape. Fill the shape in the Over frame with the lighter color.
Insert a keyframe in the Down frame by clicking in the Timeline under Down and pressing F6 or selecting Insert, Timeline, Keyframe.
Select the entire contents of the Down frame and using the arrow keys on your keyboard nudge the shape down and to the right three pixels (click three times with the right arrow and three times with the down arrow).
You're done editing the master button, so get back into the main scene (either by clicking Scene 1 at the top left of the Timeline or by pressing Ctrl+E) and test the movie by selecting Control, Test Movie.
This task proves you can create a pretty advanced button with very little effort. The various states contain the graphics for how the button will look in different situations: Up is the button's normal state, over is when the user passes the cursor over the button, and down is when the user presses the button. In the preceding task you had the states change just the color and location of the graphic, but you can put anything you want in each state (and you will later this hour).
Defining a Button's Hit State
In the preceding task you saw that there are four states. In addition to up, over, and down, there's one called hit. The hit state is never visibly seen by the user. It defines where the user must position her cursor to show a button's over state or where she must click to see the button's down state. Imagine that you had a doughnut-shaped button. If you didn't set a hit state, the user wouldn't be allowed to click anywhere in the hole (similar to Figure 14.3). However, if you inserted a keyframe and drew a solid circle (no doughnut hole) in the Hit frame, the user could click anywhere within the solid circle. This can also be useful when you want a small button but you don't want to frustrate the user by requiring her to have the precision of a surgeon. I say, "give them a break," and make the hit state big enough to easily click even if that means that it's bigger than the button itself. You can practice this in the following task.
Figure 14.3. Changing the shape contents of a button's hit state affects what portion is clickable.
Did you Know?: Hit State Is Always Present
The first four frames of a button are used, regardless of whether you place keyframes (or even frames) into all four of them. Compare this to a normal Timeline in which you insert only two frames. By the time the playback head reaches Frame 3 or beyond, you don't see anything on the Stage. However, buttons break this fundamental concept by effectively inserting frames (not keyframes) in all four frames at least that's a good way to think about it. Therefore, if you draw only into Frame 1, that image will remain as the visual element for all four frames (Up, Over, Down, and Hit).
Try It Yourself: Make a Button with an Extra Large Hit State
In this task you'll create a large hit state so the button is easy to click:
In a new file, use the Text tool to draw the word Home. Because this text will appear inside a button, use the Properties panel to ensure the Selectable option is not selected as shown in Figure 14.4. Because this text is not going to change, also set the Type to Static Text.
Figure 14.4. Text appearing in buttons should always be unselectable. For this exercise, you'll also want to use Static text.
Using the Selection tool, select the text block you just created and convert it into a symbol (by pressing F8 or selecting Modify, Convert to Symbol). Name it Home Button, make sure that you select Button behavior, and then click OK.
Test the movie (by selecting Control, Test Movie) and notice how the button is sensitive to where you move your cursor. You see the hand cursor only when you're exactly on top of the text. Back in the file, you can fix this by creating a larger hit state for the button.
Double-click the button so you can edit the master button. Inside our button, insert a keyframe in the Hit frame by clicking in the Hit frame and pressing F6 or selecting Insert, Timeline, Keyframe. Realize that the Home text in the Hit frame is just a copy of text in the Up frame; inserting a keyframe copies the contents of the other frame.
While in the Hit frame, use the Oval tool to draw a filled oval that's slightly larger than the text. When you have your oval, you can delete the text (from only the Hit frame). (After you draw the hit state, you can delete the Home text because the user never actually sees anything that's in the Hit frame.)
Test the movie now by selecting Control, Test Movie or pressing Ctrl+Enter, and you see that the button gives the user a break because it's much easier to click.
For the button in the preceding task, you used a hit state to create a larger area for the user to click. Often you can forgo creating a hit state, and the button's solid areas will define the clickable (or "hot") area. Just remember that without a hit state, the closest keyframe to the left of the Hit frame will define what's hot that is, the graphics in the down state.
Minimizing a Button's Impact on File Size
Regardless of how fast everyone's Internet connections are getting, there's no excuse for a file that's bigger than it has to be. And just because you're creating buttons this hour doesn't mean that you can ignore file size considerations. For example, in the previous task, I instructed you to insert three keyframes and use the Paint Bucket to color the shape in each differently. I didn't want to diverge from the main task, but hopefully you were thinking, "Hey, if all we're doing is changing the color or location, we should be using symbols instead of a new shape in each keyframe."
Did you Know?: Using Symbols Inside Buttons
Although most people understand why symbols are useful and important, many don't use symbols as much as possible. For example, if a multistate button has three nearly identical keyframes, the contents of each keyframe are duplicated. This isn't a problem if you use instances of a symbol on each frame. People often mistakenly think that because a button is a symbol, editing its contents will take full advantage of symbols. You need to consider using symbols while you're inside symbols. Anytime you copy and paste (which happens when you insert a keyframe), you should consider using symbols, even if you happen to be editing a symbol's contents.
In the following task you can try creating a multistate button again this time using the symbols in each state instead of new shapes.
Try It Yourself: Remake a Multistate Button by Using Symbols in Each State
Start this task from scratch, by following these steps:
In a new file, draw a rectangle with no stroke. This will become your button.
Use the Selection tool to select the entire rectangle you just drew. Convert the oval into a symbol by selecting Modify, Convert to Symbol or pressing F8. Name it MyButton, make sure that the behavior is Button, and then click OK.
Next, you need to edit the master version of the button you just created. Double-click the instance of the button and you are taken inside the master version. Inside the master button, you should see the shape you drew. Notice that it's not a symbol it's a shape or Drawing Object. After all, you just told Flash to convert the shape into a symbol, so inside the symbol you have a shape. This will be an issue if you start adding keyframes inside the button.
To be totally efficient, convert the rectangle shape itself to a symbol before you add any more keyframes. Select the entire shape, select Modify, Convert to Symbol, name the symbol Rectangle, be sure to select the Movie Clip behavior (it will be Button by default because that's the last symbol type you made this exercise won't work if you put a button inside a button), and then click OK. If you have Flash Professional 8 select the rectangle clip you just created and use the Filters panel to apply a Bevel filter.
Now that the first keyframe contains an instance of the Rectangle movie clip, insert a keyframe in the Over frame. For Flash Professional 8 users add a Glow Filter (in addition to the Bevel already on the instance). If you only have Flash Basic 8, simply Tint the Rectangle instance by selecting the Rectangle and from the Properties panel choosing Tint in the Color Styles drop-down list.
Insert a keyframe in the Down frame. Flash copies the contents of the previous frame. Next you can modify the Bevel that's already been applied (each new keyframe just copies the instance from the previous frame). Change the value for Angle from 45 to 225. If you have Flash Basic 8 simply nudge the tinted instance of Rectangle in the Over frame down and to the right.
Go back to the main scene and test your movie. It should look like Figure 14.5, and the file size should remain small because you did it all with just one shape.
Figure 14.5. A visual change occurs in the three states of the button.
Hopefully, you're beginning to get excited about the power you have to create buttons. Even the quick-and-dirty buttons you're making in this hour's tasks are looking pretty good. Add the Filters in Flash 8 Professional and you've really got some major power.
We're still going to wait until next hour to make the buttons do anything when they're pressed. In the meantime, you'll see that there's lots more you can do with buttons.