This chapter is from the book
This chapter is from the book
This chapter is from the book
#27. Creating Button Symbols
A button is typically used in an interactive environment (such as a Web page) as a way for the user to make something happen. As interactive design has matured, users have developed additional expectations. When they move the pointer over a button, they expect it to respond in some way—by getting brighter, for example. This change in a button’s appearance when a user rolls over it is known as a rollover effect.
When users click a button, they expect some feedback showing that their input has been recognized. This feedback may take the form of an audible beep or click, an appearance change, or both.
Flash has made it easy to create buttons that provide all of these responses. Here’s the usual procedure for making a functional button:
- Use the drawing tools to create the button’s normal appearance.
- Select the paths that constitute the button and choose Modify > Convert to Symbol, or press F8. The Convert to Symbol dialog box appears.
- Type a name for the symbol (preferably with a prefix such as b_) into the Name field.
- Below Type, choose Button.
- Click a square to choose the registration point. (For a button, the center position is typical.)
- Click OK. The button symbol appears in the library, and the button on the stage becomes an instance of the symbol.
Enter symbol-editing mode, either by double-clicking the button symbol in the library or by double-clicking its instance on the stage.
You’ll notice that the timeline changes from its standard layout to a series of four cells labeled Up, Over, Down, and Hit (Figure 27a). The labels Up, Over, and Down refer to three variations, or states, of the button. The Up state is the button’s appearance when the user isn’t interacting with it; the Over state is the way the button looks when the user rolls the pointer over it; and the Down state is the way the button looks when the user is clicking it (Figure 27b).
Figure 27a This is how the timeline looks when a button symbol is being edited.
Figure 27b These examples show how a button might look in each of its three states.
The black dot in the Up cell indicates that the symbol that’s currently on the stage will represent the Up state of the button.
Click in the cell below the Over label. The cell darkens to indicate that it’s selected.
Mystery Button
You may have noticed that the buttons in Figures 27b and 27c don’t have any labels on them. It’s certainly possible to include text in a button symbol, thereby giving the button a label. Nevertheless, most Flash developers choose not to do so. If a button symbol contains text, the button can be used only for one purpose: the one expressed by its label. If there’s no text in a button symbol, the button can be used repeatedly for a variety of purposes simply by placing different text on top of each instance.
Figure 27c A button’s Up state is on the left, and its Hit frame is shown in the center. The stroke and fill colors don’t matter for the Hit frame; all that matters is the shape of the filled path. That path determines the button’s clickable area, indicated by a dashed line on the right.
- Choose Insert > Timeline > Keyframe, or press F6. (To understand what’s happening in this step, see #30.) A black dot appears in the Over cell. Make sure this keyframe is highlighted (selected) for the next step.
- Change the button’s appearance to how you’d like it to look in its Over state. (The changes you make won’t affect the button’s appearance in the Up state.)
- Repeat Steps 8 through 10 in the next cell for the button’s Down state. You can ignore the Hit cell for now.
- Click Scene 1 in the breadcrumb trail above the stage. Flash exits symbol-editing mode.
- Choose Control > Enable Simple Buttons. (If the Enable Simple Buttons command already has a check mark next to it, skip this step.)
- Roll your pointer over the button instance on the stage. You’ll see it change to its Over state.
- Click the button instance on the stage. While your mouse button is depressed, you’ll see the button in its Down state.
)
)
)
While those are the basic steps for making a multi-state button, there are other things you might want to do to enhance it. For example:
- Add audio. You can add sounds as well as images to the Over and Down states. To find out how to attach an event sound to a keyframe, see #64.
- Add motion. A button doesn’t have to be static; any or all of its three states can be animated by means of embedded movie clips. To find out how to accomplish this, see #36.
- Add a Hit frame. Some buttons are difficult for a user to click—for example, because they’re too small or irregularly shaped (Figure 27c). You can make the button more user friendly by giving it a larger or more uniform “hot zone.” To do so, return to editing the button, and repeat Steps 8 through 10 for the Hit cell. The variation of the button you use for the Hit frame won’t ever be seen on the stage, but it determines the size and shape of the clickable area around the button.
Although this button may be attractive and easy to use, it’s still missing one important feature: It doesn’t do anything. To make the button functional, you’ll have to control it with ActionScript, which you’ll find out about in #88.