• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 5. Symbols and the Library > An Overview of the Button Symbol

An Overview of the Button Symbol

The button symbol is the least complex symbol in terms of understanding its purpose. It is designed for creating buttons! This symbol's timeline has predefined states for making it easier to design and develop a button. Buttons are important symbols when it comes to creating interactivity between a Web site and a user. You can place ActionScript on a button, but you cannot place it in the button.

Building a Button Symbol

Here are the steps to follow to build a button symbol:

Draw a shape anywhere on the stage.

Choose the Arrow tool and double-click the shape to select it.

With the shape now selected, choose Insert, New Symbol. The Create New Symbol dialog box pops up.

Select the Button radio button to give the symbol the button behavior. Also choose a center point for the symbol in the Registration icon. And give it a symbol name of myShape.

Click OK. Notice that the shape no longer has a speckled selection but rather a blue box with a crosshair for the center point.

Double-click the new symbol. Notice that you are brought into button symbol editing mode. Also notice that the first four frames are predefined button states, as shown in Figure 5.5.

Figure 5.5. Button symbol timeline.

The four states are Up, Over, Down, and Hit. Up is the state the button will have when the movie loads. Over is what the button will change to when the end user moves the mouse over the button. Down is the state the button will have when the end user presses the mouse button (but does not release it). When the user releases the mouse button, the state returns to Up. Finally, Hit defines the active area of the button. It's typically best to have a Hit state at least the size of the button. If the button is text, be sure to draw a solid box over the text in the Hit state. The Hit state is invisible, but if text is the subject for the end user to click, this could cause some buggy problems for the user. Remember that many characters have “holes” in them, such as the letter O, for example. In theory, the mouse could be clicked in that empty area of the O without ever clicking the Hit state of the button. If you draw a solid box over your text, the Hit state problem is solved.

Because we've converted an existing shape to a symbol, we automatically have content in frame 1, also known as the Up state. If you want, you can modify any part of the shape to better suit your liking.

Choose Insert, Keyframe or press F6 to insert a keyframe to move to the Over state. Notice that a keyframe has been inserted into the Over state, carrying over the attributes of the previous frame.

Now that we're in the Over state, all we're going to do is change the fill color of the shape. Select the shape using the Arrow tool and choose a different color in the Fill Color swatch of the Tools panel.

Press F6 to insert another keyframe. Make some similar modifications to the artwork in the Over state.

Press F6 one last time to insert a keyframe on the Hit state. Remember, the Hit state is invisible; it just defines the active area of the button. Simple shapes you can pretty much just leave alone; however, if the shape has a hole in it, like the letter O, draw a solid shape over it.

Come back to scene 1 by clicking the Scene 1 link, or you can use the Scene Select drop-down menu, as shown in Figure 5.6.

Figure 5.6. Select a scene by using the Scene Select drop-down menu.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint