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:
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:
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?
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.