Flash CS3 Tutorial – Movie Clip Buttons

May 9th, 2008 | 119 Comments

(Also see our tutorial on coding animated Movie Clip Buttons in ActionScript 3 that don't rely on timeline animations.)

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

(Also see our tutorial on coding animated Movie Clip Buttons in ActionScript 3 that don't rely on timeline animations.)

Tags: , ,

119 Responses

  1. Looser says:

    Hello,

    I’m having a problem with this script.
    I’m not a Flash expert or anything, but I found this tutorial and applied it on my .fla
    It works perfectly with the 4 buttons that come in the original document that you provide us, but if I try to duplicate the buttons and rename them the script wont work anymore.
    Trying logic, i used this:

    Duplicated buttons and named them
    mcButton5
    mcButton6
    mcButton7

    then added this to the code after what was already there
    btn5_mc.buttonMode = true;
    btn6_mc.buttonMode = true;
    btn7_mc.buttonMode = true;

    and

    btn5_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
    btn5_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
    btn6_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
    btn6_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
    btn7_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
    btn7_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);

    After this, when I preview in flash player, it’s like the animation doesn’t obey the stops.

    What an I doing wrong? Can you help me?

    Thanks,
    Looser

  2. thanks! I have been looking for ages for info showing how to make a more flexible button like this.

  3. Hi!
    Thanks for the tutorial, but I have a slightly different problem. I’m creating a website in which I have buttons on the stage that references a Mc symbol_1 symbol, which then opens as the refered content page, in the Mc symbol_1 the content is placed as another Ms symbol_2, inside the content Mc symbol_2 is a button that’s supposed to respond to the coded mouse actions/eventListeners in Mc symbol_2. So we have a button inside a movieclip symbol_2, inside a movieclip symbol_1. I can’t get my buttons to respond, do you know why and how, because I want the button inside Mc symbil_2 to control what happens within mc symbol_2- indepent of other movie clips which might have the same functionality as well?
    Please I need help.

  4. Very useful tutorial thank you, but I have a question:

    How would I make these buttons to be links? I have tried everything, but I just get an error. Please help!

    chriscreene@gmail.com

    Chris

    • Gemmellness says:

      You posted a while ago so I’m assuming that the problem has either been fixed or is not relevant any more, but just in case anyone else is having the same problem:

      [Nameofyourbutton].addEventListener(MouseEvent.CLICK, [Nameofevent]);

      function [Nameofevent](e:MouseEvent):void
      {
      gotoAndPlay([framenumber], “[Scenename]“);
      }

      ;)

  5. msv says:

    Hy there, thanks a lot for the tutorial, though i’d like to ask you, how does it work
    if you do the motion though swapping pictures.

    I followed your steps and on over stage i assigned some pictures that would produce the motion for the button but once i test it on browser i have no actions.

    Thanks for your help.

    Best Regards
    MSV

  6. paul says:

    Hi it is a very nice tutorial. Everything worked fine for me

    http://www.sketchundlos.de/sketchundlos_02.swf

    But, now i ran into some problems. I am new to flash and especially the as3 coding part…but i keep trying^^…

    I would like to know how could i paste content (text,img,etc) on a button click.

    of course i will post the .fla if needed

    thanks in advance!

  7. NoeWhan says:

    OCCUPY ADOBE!

    They must pay for this change to AS3 BS.

  8. rahmud says:

    First image in section 3 contains layer “Actions” in main timeline. In section 4 we add action script which confirms image in this section (letter “a” in layer Actions). Next in section 7 We have to “Create a new layer on the top of the layer stack in the main timeline and call this new layer Actions.”

    This layer already exist.

    Too dificult for me … :(

  9. rahmud says:

    OK, everything is right.

    Newbies (like me): Sections 1-5 are for BUTTON timeline and only sections 6-8 are for MAIN timeline.

    Thaks for tutorial !

  10. Miss Sonia says:

    Button and Movie nicely explained. Thanks & Luv you.

  11. Gemmellness says:

    Hi, thanks very much for the helpful tutorial, I’ve managed to get it to work with my design :)

    Unfortunately, if you move the mouse over and off the button quickly it jumps to the “out” animation as soon as the mouse is moved off, and this is very obvious with my design. Is there anyway to fix it?

    Thanks in advance.

  12. Alex says:

    Well nice tutorial ,but at the end I got the same question of Chris, and I read your code:
    [Nameofyourbutton].addEventListener(MouseEvent.CLICK, [Nameofevent]);

    function [Nameofevent](e:MouseEvent):void
    {
    gotoAndPlay([framenumber], “[Scenename]“);
    }

    It already took me some time to get te explanation of the code, and then I do not understand this one, what exactly should we write in “Nameofevent”?
    onButtonClick or something? and in the same way have no clue what should I write in framnumber, whichframe number? and Scenename, please could you explain little better?
    And how would it be if I would like that this button links me to a html document? thanks for the answer.

  13. Noelia says:

    Very usefull!
    worked perfectly
    lovelovelove

  14. Pickles says:

    Thanks so much for this tutorial! It’s EXACTLY what I needed, and the accompanying file was a godsend! Thank you!!

  15. Mário says:

    Muito bom!

    Funcional e Simples

    Obrigado!

  16. someone says:

    Can this be done on AS 2.0?
    and I can’t see any of the pictures, so i can’t tell what the code is :(
    can anyone please tell me

Leave a Reply