Animation Tip: Flash Buttons

Want to breathe some life in to your website? You need to get animated!

Here we are with another quick and easy tutorial for Macromedia Flash. This time, you will learn how to add some simple interactivity to your Flash movies by using buttons. We'll start with one of the easiest buttons to make: a start button.

In our previous Flash tutorials, the movies we made just looped over and over again. Adding a start button gives the viewer the ability to play the movie once through, without the incessant looping.

Make a Button

To make a simple button, start by selecting New Symbol under the Insert Menu. Name it whatever you want. ("Button" works fine for me.) For Behavior, choose Button.

Now you should be in the button editor. Making a button is similar to making a regular Flash movie, except that you only have four frames to work with-- Up, Over, Down, and Hit. The first three frames define how your button will look in various states.

Up: how the button looks while it's just hanging out, minding its own business.

Over: how the button looks when the cursor touches it.

Down: how the button looks when you click on it.

So let's start with the Up frame selected. To make your button, draw a circle, or any shape you prefer. Next, click on the frame under Over, and add a keyframe there by selecting Keyframe under the Insert menu. Change your button slightly-- you can make it a different color, change its shape, whatever you want to do to make it signify "Hey, you're touching me!"

Repeat this process for the Down frame. You might want to actually move your button down a little to give it the feeling of being clicked.

The last frame, Hit, defines the clickable area of your button. Flash automatically takes the shape of your button in the Down frame as the hit area. If you want to use a different shape, you can draw it yourself-- just use any black shape to define the hit area.

Push That Button!

Once your button is ready to go, you need to add it to your scene and tell Flash what you want it to do. In your main scene, open the Library window. (It's under the Windows menu, not Libraries.) Your new button should be there; just drag it to where you want it to go.

Now you need to define your button's properties. Right-click on it (control-click on the Mac), and select Properties from the pull-down menu. Under the Actions tab, click on the plus sign. You have a lot of options here. For this example, we just want the button to start our movie, so select Play. On the right-hand side of the window, select Release. That way, as soon as you let go of the button your scene will start playing.

There's one last thing you need to do. By default, when Flash loads a movie, it starts playing immediately and loops ad infinitum. Kinda defeats the purpose of having a start button in the first place. But that's easily fixed. Double-click on the first frame of the movie and go to the actions tab again. This time, choose Stop under the plus sign. This will make your animation stop until you push the button.

That's all there is to it. Your newly interactive movie is all ready to go. Click away!