Many Flash beginners stick with using button symbols when creating navigation links for their Flash websites. And why not! That's what button symbols are made for, right?

Well, you can also create buttons using movie clip symbols. Movie clip buttons are basically buttons on steroids. With movie clip buttons, you have much more control over how your button behaves.

For example, when you're dealing with your button symbol's timeline, there's only so much you can do on the button's "over" state. If you want, you can stick a movie clip symbol within your button symbol's "over" state in order to add a little bit of animation, but what if you wanted a different animation to occur when you moved your mouse away from the button? There's not really a whole lot you could do there if you were using a simple button symbol.

So, in this tutorial, I'm going to show you how to make rollover and rollout animations on a movie clip button. For the sake of simplicity, we're going to create buttons that expand out sideways on rollover and animate back to their original size on rollout. So let's get started:

1. Create your movie clip button. For this example, create a simple rectangle with a piece of text centered on top of it. Here's what the graphics look like for my button:

button graphics

Easy enough, right? Now, select your graphics, hit F8 to convert to a symbol, select Movie Clip and call it whatever you want. Even though this graphic is going to look and act like a button, we want to make it into a movie clip in order to take advantages of all the benefits of using a movie clip symbol. Finally, select your new movie clip button, and enter in an instance name for it in the properties inspector. I'm giving my button an instance name of btn_mc.

2. Enter your movie clip button's timeline. Double-click on your movie clip to go into the movie clip's timeline. In the movie clip's timeline, you're going to create a few different states for your button and then use frame labels to label these states.

3. Insert new layers into your movie clip button's timeline. Create a new layer called "Labels" and another new layer called "Actions." Keep these two layers at the top of your layer stack for easy access. Also, we need to separate the background of the button and the button text into separate layers. An easy way to do this is to select the Selection Tool in your toolbar, click once outside of your artwork to deselect everything (don't double-click, or it will take you back to the main timeline), then right-click on the background rectangle (or ctrl+click with a one-button mouse on a Mac) and click on "Distribute to layers." This will send the background rectangle to a new layer just below the current layer. Here's what your layer stack should look like now:

timeline

4. Create the "states" for your button. For this tutorial, we're going to create an up state, an over state, and an out state. The up state will contain the button at its default size and position, the over state will contain an animation of the button's background expanding to the right, and in the out state, it will animate back to its original size.

The up state will consist of a single frame and will reside in frame one, which we've already created. With frame one selected for the "Labels" layer, go to the Properties Inspector and type up into the frame label text field. For the over state, click on frame 10 for the "Labels" layer, hit F6 to add a new keyframe, and with this new keyframe selected, enter over into the frame label text field in the Properties Inspector. This frame (frame 10) will be the beginning of the rollover animation. You're going to make this 10 frames long, so the animation will end in frame 20. So, to add a little breathing room, jump over to frame 30 on the Labels layer, add a new keyframe, and label this one out. This animation will also take up 10 frames, so it will end in frame 40. Click on frame 40 for the Labels layer and hit F5 to extend the frames out so that you can read the final label in the timeline.

Now we need to add our stop actions. By default, a movie clip symbol will start playing through its timeline, and that's not what we want. By default, we want our movie clip button to stay in frame one until we hover over it. We also need to add stop actions to the end of our over animation and our out animation. So click on frame one, hit Option+F9 (or just F9 on PC) to open up your actions, and type stop(); into your actions panel. Then, close your actions panel.

We can easily copy this stop action to frames 20 and 40 by doing the following:

  1. Click on the keyframe in frame one of the Actions layer (where you just entered your stop action).
  2. With this keyframe selected, hold onto Option (or Alt on PC), click on the keyframe again, and drag to the right.
  3. Release the mouse button at frame 20, and you should see a new keyframe copied to frame 20 with the stop action applied to it.
  4. Perform steps 1-3 again, this time for the end of the out animation in frame 40.

The timeline for your movie clip symbol should now look like this:

timeline

5. Create the over and out animations. Since the text of the button isn't going to change, go ahead and click on frame 40 for the text layer and hit F5 to stretch the frames across the entire animation. Then, before you create the animation for the background of the button, select the rectangular background and convert it to a movie clip symbol. Call it whatever you like. (This symbol does not need an instance name.)

With your background converted to a movie clip, add keyframes to frame 10 and frame 20 of the background layer. Frame 10 will contain the beginning keyframe of the animation, and frame 20 will contain the ending keyframe of the animation.

Leave frame 10 alone. Click on frame 20, switch to the Free Transform Tool (keyboard shortcut: Q), and stretch the shape out to the right about 10 or 20 pixels (or as far as you'd like). If the shape stretches out in both directions when you try to resize the width, simply hold onto Option (or Alt on PC) while you drag it out, and the left edge will stay in place.

Right-click anywhere between frames 10 and 20 on the background layer and click on Create Motion Tween. The over state is now complete.

Click on frame 30 for the background layer (the beginning of the out state) and add a new keyframe. This new keyframe will retain the expanded size of the button. In this state, we want the button to animate back to its original size. To create the ending keyframe for this animation (since it needs to be the exact same size as it's starting size), right-click on frame 1 for the background layer, click on Copy Frames, then right-click on frame 40 and click on Paste Frames. Then right click between frame 30 and 40 and select Create Motion Tween. Your animations are now complete, and your timeline should look like this:

timeline

6. Return to the main timeline. At this point, we're done editing the movie clip button's timeline. Click on Scene 1 on the edit bar (the bar right below the timeline) to return to the main timeline.

7. Code your movie clip button. Create a new layer on the top of the layer stack in the main timeline and call this new layer Actions. Lock this layer by clicking on the layer underneath the padlock icon, click on frame 1 for the Actions layer, and hit Opt+F9 (F9 on PC) to open up your actions panel. Enter the following code into your actions:

code

Line 1 sets the buttonMode property of the movie clip to true. Without this, your button would still work, but the user would not see the hand cursor when they hovered the mouse cursor over the movie clip.

Line 2 sets up the event listener for the rollover. When the user rolls the mouse cursor over the button, this event triggers a function called onButtonOver, which we created starting on line 5. Inside this function, we're simply telling our button movie clip to go to the frame labeled over and start playing. It will then play until it reaches a stop action.

Line 3 sets up the rollout event listener, which triggers the onButtonOut function, which tells the movie clip to go to the frame labeled out.

Notice that there's nothing in this code that explicitly returns our movie clip to the up state. This is because it's really not necessary. The end of the out state looks exactly like the up state, so it really doesn't make a difference. But if we wanted to, we could have just left out the final stop action at the end of the movie clip timeline, and instead of stopping at frame 40, it would simply loop back to frame 1 where it encounters the stop action there. Doing this would result in the exact same visual result.

8. Bump up the frame rate. One last thing... For a nice, smooth animation, bump the frame rate up to 24 frames per second. This will give you a quicker, smoother animation. To do this, simply double-click on the frame rate displayed at the bottom of the timeline and enter in a new value.

Your final file should look something like this (I've added a few more buttons for demonstrative purposes):

Source file: mcButtons.zip

Click here for more comprehensive Flash video training