Section 4.1. Buttons as Symbols

4.1. Buttons as Symbols

In earlier chapters, you learned about graphic symbols and movie clip symbols. Next, you'll see how to create the third type of symbol, a button. Buttons are similar in many respects to other symbols, but there are two important differences.

The main difference is that, by default, a button doesn't have a full timeline, like a graphic or a movie clip. Instead, it has four distinct frames in which you can place the various button "states" (the default appearance of the button, as well as the way it looks when the mouse is hovered over and clicked down on the button).

The second difference is that a button will automatically update its appearance upon user interaction. That is, the button will automatically change its state, and switch the system cursor between the default selection arrow and a "pointing finger," to respond to corresponding mouse movements. Although the button must still be programmed with ActionScript to affect your movie, the button state and cursor feedback are handled for you.

4.1.1. Simple Buttons

Multiple button states are not required, and sometimes you just need a quick "hot spot." Soon, you'll see how to create more complex buttons (and even an invisible button), but your first project is to start with a basic button symbol.

To create a button with the word Button on it:

1. Create a new Flash document to experiment with and save the file as simple_button.fla in the 04 folder.

2. Draw a rectangle (choose any color you like) and resize it to 100 x 50.

3. Use the Text tool to create the word Button. Center-justify the text using the Properties panel, and center the text object itself within the rectangle. (Hint: Try using the Align panel.)

4. Click and drag to select everything on the Stage, and then press F8 to convert the image to a symbol.

5. In the Convert to Symbol dialog box, name the symbol btn and choose Button as the Behavior type, as shown in Figure 4-1. Click OK to close the dialog box.

   Figure 4-1. Converting the content to a button symbol

   

6. Test the movie.

The Preview window opens, and when you move your cursor over the instance of the btn symbol, the cursor displays as a hand, just as it does when you roll over a link on a web page. Why didn't the button's appearance change? You've created a default, or "Up," button state, but you haven't yet created new artwork to display when the mouse rolls over and clicks on the button. You'll do that next.

4.1.2. Button States

When you look inside a button symbol, the timeline appears unique because of the aforementioned four predefined frames. The first three are button states. The Up state represents the button's appearance when the mouse cursor is not over the button, the Over state is displayed when the mouse is rolled over the button, and the Down state displays when the user clicks on the button. You'll take a look at the fourth state, the Hit state, in a moment.

For the next project, make your button more complex by creating the Over and Down states for your button symbol:

1. In your existing simple_button.fla file, double-click the btn symbol to edit it in place.

2. Add a new empty layer and call it text. Name the previous layer art.

3. Be careful to select only the Button text in the original art layer, and cut it to your clipboard. Then select the new text layer, and use the Edit Paste in Place menu command (Ctrl/Cmd-Shift-V). This will paste any clipboard object into the same place on the Stage that it occupied when it was placed on the clipboard (it works for multiple objects as well). The result will be that Warning: The Paste in Place command is relative to the timeline you are editing, and locations and sizes can affect the registration point of each timeline. So, if you cut or copy from inside one symbol and then paste in place outside that symbol (for example, in the root scene or inside another symbol), you may not get the same results.

   ---

4. Select the Over and Down frames in the art layer, and press F6 to add keyframes. The rectangle in your button is re-created in these frames.

5. Select the same frames in the text layer, but this time press F5 to add frames, not keyframes.

6. Click on the Over frame in the art layer. This will let you work only on this state.

7. In order to visually distinguish the button's Over state from its Up state, while in the Over frame, change the fill color for the rectangle in the Properties panel.

8. Repeat this process for the Down state, choosing another unique color.

9. Save and test the movie. It should resemble simple_button_02.fla, and your timeline should look like Figure 4-2.

Figure 4-2. Timeline for a button symbol

When you roll over it, the button displays its Over state, which in this case changes the button's color. When you click the button, it displays its Down state, which causes it to change colors again.

You've now seen Flash's ability to automatically switch between the three primary button states and update the cursor, but what does the fourth state do? The Hit state allows you to customize the areas of the button that will respond to the cursor. By default, the button will react to the Up state. However, if the Hit frame is populated, any content in this frame, and only content in this frame, will trigger the mouse and allow the button to work. This makes it very easy to make buttons of irregular shapes, and since the Hit state content is invisible to the user, it means you can really get creative.

For example, think of a button that you might find in a Flash file about The Simpsonsa button that looks like a donut, say. You certainly want the button to function when you click on the creamy pink frosting with sprinkles on top, but you may not want the button to work when the mouse is over the inner hole of the donut. To see an example of this setup, open the donut_button.fla file in the 04 folder of your working directory.

Just as you can customize the Hit state to exclude a particular area, you can add content to a Hit state to make the button react to more than just what is visible. For instance, if you want to create a slide show, you can place previous/next buttons in the bottom center of the Stage, but also add a thin vertical ribbon, the height of the Stage, on the extreme left and right sides of the viewable area. This way, both the button art and the invisible areas at the sides will trigger the buttons. An example, slide_show_buttons.fla, is also included in the 04 folder.

To experiment with modifying a Hit state yourself, consider an old arcadestyle button. This traditional push button has a plastic bevel surrounding the button itself. It's easy to understand that the button should work as advertised, but should the bevel also be active?

1. Open bevel_button.fla in the 04 folder.

2. Test the movie to try both buttons. The button on the left represents the default scenario, with a Hit state derived directly from the Up state. Look at the button in action and get a feel for the interactive areas.

3. Next, try the button on the right and see how it differs. When you're through, close the test movie and go back to the Stage.

4. To improve the first button, double-click the button to edit it in place. In the mini-timeline, click in the Hit frame in the bevel layer, and delete its contents. You've removed the bevel, but not the button. Now only the button itself will respond to the mouse, which is the correct behavior. Figure 4-3 shows the visible button on the left, and the Hit state on the right.

   Figure 4-3. Visible button (left) compared with final Hit state (right)

   

5. Test your movie to try it out. Once you're satisfied, close the SWF and FLA files. You're finished with this segment.

---

Warning: Keep an eye on this issue when creating buttons made from text. Remember that only non-transparent pixels will respond to the mouse. Therefore, if you create a Hit state from the word "FOO," the button will respond when the mouse is over the solid areas of the letters, but not when it's between the letters or inside the "O" characters. To improve on this, simply draw a rectangle in addition to the word. The Hit state is invisible, so it doesn't matter what it looks like.

---