Creating a Button

Interactivity, Sound, and Curvy Motions in Flash

A button is a symbol, but it's a symbol that has special states: up, over, down, hit. You can alter the button's appearance for each state, add actions, or incorporate sound.

First, let's create a basic button. Hit F8 to start the process. Name the symbol and check the button properties box. The new screen you'll see already has the four "states" ready

Figure 15: The Four Button States

for you. (Figure 15) You'll create your button in the "up" frame. You can then create key frames in each of the other three frames so that they all start out with the same core elements. In the sample shown from Banner B, all key frames have the same red box and the words "Web Design." I've then altered the color of the box in the "Over" and "Down" states.

Be creative with your button states. You may want to shift the position of the button in the "Down" frame or change the colors of some of the states so that they appear to respond to the user's mouse. To make any changes, just move your current frame marker to the frame you want to alter and then use to arrow tool (or the arrow keys) to move it. I've adjusted this sample's "Down" state four pixels to the right and four down.

There are many ways you can work with the color of the button states. Start thinking about it, and you'll see Flash's button properties can be used to make navigational elements for a web site, the kind of coding typically done in JavaScript (but not supported evenly across the browsers). To get the color effects I've used in the "Click" button, Banner A, I've actually created separate symbols for each phase of the button so that I could adjust the colors the way I wanted. I then dropped the finished symbols into the respective key frames. At right, you can see the four button states.

The final task with the button is to add the action to the "Hit" state. In this case, the owner of MySite.com wants the viewer to go to, you guessed it, MySite.com once the button is clicked.

Figure 16: Action Dialog

To add this action, click the small rectangular box next to the "Hit" key frame and select "action." From the pull-down menu, choose "Get URL," and fill in the URL and target properties. (Figure 16) Simple as that. For this example, I've coded the button to go to my own web site just so you can see the button in action.

While working on your movie, you can test button states by enabling them under Control/Enable Buttons. Now, when you preview your movie, you'll be able to see if the button states are working as you planned.