Simple Animated Buttons in Flash
04/17/07
Skill Level: Beginner
Actionscript: Fairly easy
Animation: Fairly easy
Please note that while this is "beginner level," it still expects you know how to do certain basic things in Flash, such as making shapes, editing actionscript, making groups, etc. If you don't know how to do these things, go through the tutorials built into Flash under "Help."
Files: What this tutorial will teach you to do (.swf is presented below, .fla is downloadable)
Download the .fla
When I was first learning Flash, I really had no idea how to make animated buttons. It drove me friggin crazy. I was seeing all these Flash sites out there with spiffylicious navigation that animated when you moused over and out, but I couldn't figure out how to do it using "button" instances.
The key, I learned, was not to use button instances for my buttons, but rather movie clips. Now, this technique has a small drawback. Depending on how slow your animation is, it will tend to jump around if someone mouses over your buttons too rapidly (you can see this above a little). This is becaue the "over" animation hasn't finished playing before the mouse moves off the button, and thus it jumps directly to the "out" animation. For that reason, it is generally a good idea to keep your animations under half a second or so. However, this technique is far easier to learn and use than making animated buttons via actionscript. Lets get to it.
1. Make Your (movie clip) Button
The first thing you need to do is make your button. For this example, I'm only going to be making a simple pop up tab (which is quite common and popular). If this is your first attempt at animating a button, I suggest sticking with something easy like this. If you try to do something too flashy or advanced, it'll just be a pain. So. Here's the button I made:
It is just a rectangle with a rounded edge + a little glare I added just for fun + some text stuck on top. I then grouped all those elements just to keep them together (Ctrl+G on Windows, Apple + G on Mac)
You then need to convert this group to a MOVIE CLIP so that you can animate it. You can't truly animate buttons, so if you convert this group to a button symbol, your animation won't work.
I'm using Flash MX (how you make symbols or instances or whatever you want to call them changes depending on what version of Flash you have), so click "Insert" > "Convert to Symbol" with your group highlighted (or press F8). Name it mc_home.
2. Making Your Animation
Alright, now you have your group inside your movie clip. It is a good idea at this point to convert the group to a GRAPHIC symbol. This gives you more options when it comes to animation, as certain things can be done to graphic symbols that cannot be done to groups (such as changing their alpha level, their brightness, etc). Select the group, click "Insert" > "Convert to Symbol," make sure "Graphic" is clicked, and name it gfx_home.
(Note: It's also a good idea to always name your symbols with something that denotes what they are, such as "mc_" or "gfx_" or "btn_", just so you can keep stuff organized).
Now it's time to get started with the animation. First, make a new layer inside your movie clip. Name it "actions". Name the layer that is already there "animation" (again, this is just for organizational purposes. It's really hard to come back to a file like this that you haven't opened in months and not have anything labeled.)
The "gfx_home" symbol should be on the "animation" layer. Now click on the first keyframe in the "actions" layer, and, if your "Actions" window isn't open, open it now ("Window" > "Actions" or press F9).
In the "Actions" window, make sure you're using Expert Mode. Click the button on the far right of the window that looks like a little blue box with an arrow in it, and then click "Expert Mode." This allows you to type out your actionscript as opposed to using Flash's lame point and click coding.
Now you should have a big blank white space. In here we can put actions for Frame 1 of the "actions" layer. Type, "stop();" (for ALL action script, do not include the surrounding quotes, UNLESS the quotes are inside the actionscript itself).
Next, make a new keyframe on both layers on Frames 2 and 8. (I picked 8 because I want the animation to be short, as opposed to Frame 10, which would be more intuitive. Oh well.)
Now to animate the button. Select the graphic on Frame 8 on the "animation" layer and move it up a little bit. I moved it up by holding Shift and pressing the up arrow on my keyboard. This does a "large nudge," (not holding shift will do a "small nudge"). Unlike Photoshop, which always nudges by a specific number of pixels, Flash nudge sizes depend on how zoomed in or out you are, so I recommend you always nudge like this when you're viewing the file at 100% size. That way, all of your nudges will be the same.
Once you've done that, right click on any frame in between Frames 2 and 8 and select "Create Motion Tween." Your timeline should now look like the image below. Feel free to hit the Enter key a few times to see how the animation looks. This is what your button will do when you roll over it.
Now, on the actions Layer, click on Frame 8, and type "stop();" again.
Next, go to Frames 9 and 15 and add keyframes (F6) on both layers. Click on Frame 2 on the animation Layer, right click, and select "Copy Frames." Go back to Frame 15 on the same layer, right click, and select "Paste Frames." This makes sure that when your button goes back down (when you roll off), it goes back to the exact same place it started.
Right click somewhere in between Frame 8 and Frame 15 on the animation Layer and select "Create Motion Tween." Your timeline will now look like the below image. Go ahead and hit the Enter key a few more times to see what the full animation will look like. If you see any problems (like the button is shrinking randomly, or jumping around, or doing something else unexpected), you'll need to go back a few steps and try again. Note that the animation will NOT stop at any of the frames with "stop();" on them right now.
3. Giving the Button Functionality
Right below your timeline, you'll see a few pieces of text that tell you where you are in the movie. Since we're inside the "mc_home" movie clip at the moment, it will say "Scene 1" and then "mc_home" with icons for each. Click on "Scene 1" to go back to the main movie.
If you were to preview your movie right now, nothing would happen when you moused over the button. (You can try if you want. "File" > "Publish Preview" > "Flash.") This is because we haven't told Flash to play that movie clip when you roll over it. The movie clip is stuck on Frame 1, because we put a "stop();" there.
The next thing we have to do is create a little invisible cover for that button. I like to keep my movie clips and the actionscript operating on them seperate, so we're going to be applying this movie clip's functionality to a button symbol. So. Create a cover for the movie clip. If you want, you can just go inside your movie clip by double clicking on it, then going inside "gfx_home" by double clicking again, and then going inside the group inside gfx_home by double clicking again, and then copying the square you made earlier. That's what I did. Here's what my cover is going to look like: (the cover is dotted because I have it selected)
Now we need to convert this shape to a Button Symbol. Select your shape, click "Insert" > "Convert to Symbol," make sure "Button" is selected, and name it "btn_cover."
Now that you have your button cover, you probably want to put it on a new layer (since it's going to be sitting on top of your movie clip). Make a new layer, name it "buttons," and name your existing layer, "clips." (Again, this is for organization). Select your button cover, which is still on the "clips Layer" Cut it (Ctrl + X on Windows, or Apple + X on Mac), go to your "buttons" layer, and Paste it (Ctrl + V on Windows, Apple + V on Mac).
Now, before you put it on top of the movie clip, we need to give the movie clip an "Intance Name." Down in the "Properties" window ("Window" > "Properties" if you don't see it) you'll see a little box that says "Instance Name."
Inside that little "Instance Name" field, type "mc_home." We're giving the movie clip the same instance name as its symbol name just to keep things easy. We'll come back to this in a little bit.
Go back to the "buttons" layer, and move your button cover over top of your movie clip. With it selected, go to the "Actions" window and type in the following code:
I'd let you copy and paste it, but as this is a "Beginner" tutorial, I assume you need practice writing actionscript. :)
Explanation of code: Now. What this code is doing is telling the movie clip to go to certain frames when you roll over and out. "mc_home.gotoAndPlay(2);" tells Flash to look inside an movie clip with the Instance Name "mc_home" (remember when we did that just a few steps ago?), and to go to (and play) Frame 2 inside that movie clip. The movie clip plays until it reaches the "stop();" on Frame 8, which is the point where the button finishes it's over animation. When the mouse moves off the button, the code tells the movie clip to go to Frame 9, which makes it play the rest of the way through. It will stop again on Frame 1, where we put the first "stop();".
You need to set the alpha level on the cover button to zero so that you can see the movie clip below it. Go to the "Properties" window, and find where it says "Color: alpha" and change the percentage to 0%. You can now preview your Flash file. The button should pop up and down when you mouse over and out.
In order to make it an actual link, you need to add the following code to the button cover (below the code that's already there):
This makes the button pull up "http://www.centraldown.com" in your browser when you click it. Feel free to change that URL to whatever you want.
4. Making Further Buttons
In the unlikely event that you only want to make one button for your navigation, you can ignore this section. However, you probably want to make a few more, and it'd be a pain in the ass to go through all the steps above just to make another button with different text.
To do this more easily, go to your "Library" window ("Window" > "Library" if it isn't already shown), and find "gfx_home." Right click it, and select "Duplicate." This will pull up a dialogue box, asking you what you want to call it. Since the next section I'm making is going to be called "About," I named it, "gfx_about."
Do the same thing with "mc_home." Now you've got two movie clips and two graphics that look exactly the same as each other. Drag "mc_about" out onto the movie and place it where you want it. Double click it to go inside of it. Once you're there, click on the button and go down to your Properties window. It should say "gfx_home." Basically, when you duplicated the movie clip, it kept whatever graphic was in there. We don't want "gfx_home," however, we want "gfx_about." Find the button that says, "Swap," and click it.
This will bring up a window with a list of symbols in your Library. Select "gfx_about," and hit okay. Now it's displaying "gfx_about," as opposed to "gfx_home." However the text still says "Home," since that's what you duplicated earlier. Double click the graphic to go inside of it, and double click again to go inside the group. Once you're in there, use your Text tool to change "Home" to "About." Go back to "mc_about" on the little navigator below the timeline.
Now you'll have a button that says, "About," instead of "Home," on Frame 1. However, if you go to Frame 2, it'll say "Home," again. Same with the rest of the keyframes. This is because "gfx_home" is still being displayed in those frames. Go to each of them and swap it out for "gfx_about."
Go back to Scene 1 and set the Instance Name of "mc_about" to "mc_about". Copy and paste the invisible cover button that's sitting on top of "mc_home" and paste it on top of "mc_about." You'll need to change the actionscript on that button to make the about button work, so in the two places it says "mc_home," change it to "mc_about."
Your "Home" and "About" buttons should both animate now. Repeat these steps as many times as you want to get more buttons. Once you're finished, go to "File" > "Publish," and you'll get a nice little .swf in whatever directory you saved your .fla in.
Congrats! You now have animating buttons.
^ Top
Skill Level: Beginner
Actionscript: Fairly easy
Animation: Fairly easy
Please note that while this is "beginner level," it still expects you know how to do certain basic things in Flash, such as making shapes, editing actionscript, making groups, etc. If you don't know how to do these things, go through the tutorials built into Flash under "Help."
Files: What this tutorial will teach you to do (.swf is presented below, .fla is downloadable)
Download the .fla
When I was first learning Flash, I really had no idea how to make animated buttons. It drove me friggin crazy. I was seeing all these Flash sites out there with spiffylicious navigation that animated when you moused over and out, but I couldn't figure out how to do it using "button" instances.
The key, I learned, was not to use button instances for my buttons, but rather movie clips. Now, this technique has a small drawback. Depending on how slow your animation is, it will tend to jump around if someone mouses over your buttons too rapidly (you can see this above a little). This is becaue the "over" animation hasn't finished playing before the mouse moves off the button, and thus it jumps directly to the "out" animation. For that reason, it is generally a good idea to keep your animations under half a second or so. However, this technique is far easier to learn and use than making animated buttons via actionscript. Lets get to it.
1. Make Your (movie clip) Button
The first thing you need to do is make your button. For this example, I'm only going to be making a simple pop up tab (which is quite common and popular). If this is your first attempt at animating a button, I suggest sticking with something easy like this. If you try to do something too flashy or advanced, it'll just be a pain. So. Here's the button I made:
It is just a rectangle with a rounded edge + a little glare I added just for fun + some text stuck on top. I then grouped all those elements just to keep them together (Ctrl+G on Windows, Apple + G on Mac)
You then need to convert this group to a MOVIE CLIP so that you can animate it. You can't truly animate buttons, so if you convert this group to a button symbol, your animation won't work.
I'm using Flash MX (how you make symbols or instances or whatever you want to call them changes depending on what version of Flash you have), so click "Insert" > "Convert to Symbol" with your group highlighted (or press F8). Name it mc_home.
2. Making Your Animation
Alright, now you have your group inside your movie clip. It is a good idea at this point to convert the group to a GRAPHIC symbol. This gives you more options when it comes to animation, as certain things can be done to graphic symbols that cannot be done to groups (such as changing their alpha level, their brightness, etc). Select the group, click "Insert" > "Convert to Symbol," make sure "Graphic" is clicked, and name it gfx_home.
(Note: It's also a good idea to always name your symbols with something that denotes what they are, such as "mc_" or "gfx_" or "btn_", just so you can keep stuff organized).
Now it's time to get started with the animation. First, make a new layer inside your movie clip. Name it "actions". Name the layer that is already there "animation" (again, this is just for organizational purposes. It's really hard to come back to a file like this that you haven't opened in months and not have anything labeled.)
The "gfx_home" symbol should be on the "animation" layer. Now click on the first keyframe in the "actions" layer, and, if your "Actions" window isn't open, open it now ("Window" > "Actions" or press F9).
In the "Actions" window, make sure you're using Expert Mode. Click the button on the far right of the window that looks like a little blue box with an arrow in it, and then click "Expert Mode." This allows you to type out your actionscript as opposed to using Flash's lame point and click coding.
Now you should have a big blank white space. In here we can put actions for Frame 1 of the "actions" layer. Type, "stop();" (for ALL action script, do not include the surrounding quotes, UNLESS the quotes are inside the actionscript itself).
Next, make a new keyframe on both layers on Frames 2 and 8. (I picked 8 because I want the animation to be short, as opposed to Frame 10, which would be more intuitive. Oh well.)
Now to animate the button. Select the graphic on Frame 8 on the "animation" layer and move it up a little bit. I moved it up by holding Shift and pressing the up arrow on my keyboard. This does a "large nudge," (not holding shift will do a "small nudge"). Unlike Photoshop, which always nudges by a specific number of pixels, Flash nudge sizes depend on how zoomed in or out you are, so I recommend you always nudge like this when you're viewing the file at 100% size. That way, all of your nudges will be the same.
Once you've done that, right click on any frame in between Frames 2 and 8 and select "Create Motion Tween." Your timeline should now look like the image below. Feel free to hit the Enter key a few times to see how the animation looks. This is what your button will do when you roll over it.
Now, on the actions Layer, click on Frame 8, and type "stop();" again.
Next, go to Frames 9 and 15 and add keyframes (F6) on both layers. Click on Frame 2 on the animation Layer, right click, and select "Copy Frames." Go back to Frame 15 on the same layer, right click, and select "Paste Frames." This makes sure that when your button goes back down (when you roll off), it goes back to the exact same place it started.
Right click somewhere in between Frame 8 and Frame 15 on the animation Layer and select "Create Motion Tween." Your timeline will now look like the below image. Go ahead and hit the Enter key a few more times to see what the full animation will look like. If you see any problems (like the button is shrinking randomly, or jumping around, or doing something else unexpected), you'll need to go back a few steps and try again. Note that the animation will NOT stop at any of the frames with "stop();" on them right now.
3. Giving the Button Functionality
Right below your timeline, you'll see a few pieces of text that tell you where you are in the movie. Since we're inside the "mc_home" movie clip at the moment, it will say "Scene 1" and then "mc_home" with icons for each. Click on "Scene 1" to go back to the main movie.
If you were to preview your movie right now, nothing would happen when you moused over the button. (You can try if you want. "File" > "Publish Preview" > "Flash.") This is because we haven't told Flash to play that movie clip when you roll over it. The movie clip is stuck on Frame 1, because we put a "stop();" there.
The next thing we have to do is create a little invisible cover for that button. I like to keep my movie clips and the actionscript operating on them seperate, so we're going to be applying this movie clip's functionality to a button symbol. So. Create a cover for the movie clip. If you want, you can just go inside your movie clip by double clicking on it, then going inside "gfx_home" by double clicking again, and then going inside the group inside gfx_home by double clicking again, and then copying the square you made earlier. That's what I did. Here's what my cover is going to look like: (the cover is dotted because I have it selected)
Now we need to convert this shape to a Button Symbol. Select your shape, click "Insert" > "Convert to Symbol," make sure "Button" is selected, and name it "btn_cover."
Now that you have your button cover, you probably want to put it on a new layer (since it's going to be sitting on top of your movie clip). Make a new layer, name it "buttons," and name your existing layer, "clips." (Again, this is for organization). Select your button cover, which is still on the "clips Layer" Cut it (Ctrl + X on Windows, or Apple + X on Mac), go to your "buttons" layer, and Paste it (Ctrl + V on Windows, Apple + V on Mac).
Now, before you put it on top of the movie clip, we need to give the movie clip an "Intance Name." Down in the "Properties" window ("Window" > "Properties" if you don't see it) you'll see a little box that says "Instance Name."
Inside that little "Instance Name" field, type "mc_home." We're giving the movie clip the same instance name as its symbol name just to keep things easy. We'll come back to this in a little bit.
Go back to the "buttons" layer, and move your button cover over top of your movie clip. With it selected, go to the "Actions" window and type in the following code:
I'd let you copy and paste it, but as this is a "Beginner" tutorial, I assume you need practice writing actionscript. :)
Explanation of code: Now. What this code is doing is telling the movie clip to go to certain frames when you roll over and out. "mc_home.gotoAndPlay(2);" tells Flash to look inside an movie clip with the Instance Name "mc_home" (remember when we did that just a few steps ago?), and to go to (and play) Frame 2 inside that movie clip. The movie clip plays until it reaches the "stop();" on Frame 8, which is the point where the button finishes it's over animation. When the mouse moves off the button, the code tells the movie clip to go to Frame 9, which makes it play the rest of the way through. It will stop again on Frame 1, where we put the first "stop();".
You need to set the alpha level on the cover button to zero so that you can see the movie clip below it. Go to the "Properties" window, and find where it says "Color: alpha" and change the percentage to 0%. You can now preview your Flash file. The button should pop up and down when you mouse over and out.
In order to make it an actual link, you need to add the following code to the button cover (below the code that's already there):
This makes the button pull up "http://www.centraldown.com" in your browser when you click it. Feel free to change that URL to whatever you want.
4. Making Further Buttons
In the unlikely event that you only want to make one button for your navigation, you can ignore this section. However, you probably want to make a few more, and it'd be a pain in the ass to go through all the steps above just to make another button with different text.
To do this more easily, go to your "Library" window ("Window" > "Library" if it isn't already shown), and find "gfx_home." Right click it, and select "Duplicate." This will pull up a dialogue box, asking you what you want to call it. Since the next section I'm making is going to be called "About," I named it, "gfx_about."
Do the same thing with "mc_home." Now you've got two movie clips and two graphics that look exactly the same as each other. Drag "mc_about" out onto the movie and place it where you want it. Double click it to go inside of it. Once you're there, click on the button and go down to your Properties window. It should say "gfx_home." Basically, when you duplicated the movie clip, it kept whatever graphic was in there. We don't want "gfx_home," however, we want "gfx_about." Find the button that says, "Swap," and click it.
This will bring up a window with a list of symbols in your Library. Select "gfx_about," and hit okay. Now it's displaying "gfx_about," as opposed to "gfx_home." However the text still says "Home," since that's what you duplicated earlier. Double click the graphic to go inside of it, and double click again to go inside the group. Once you're in there, use your Text tool to change "Home" to "About." Go back to "mc_about" on the little navigator below the timeline.
Now you'll have a button that says, "About," instead of "Home," on Frame 1. However, if you go to Frame 2, it'll say "Home," again. Same with the rest of the keyframes. This is because "gfx_home" is still being displayed in those frames. Go to each of them and swap it out for "gfx_about."
Go back to Scene 1 and set the Instance Name of "mc_about" to "mc_about". Copy and paste the invisible cover button that's sitting on top of "mc_home" and paste it on top of "mc_about." You'll need to change the actionscript on that button to make the about button work, so in the two places it says "mc_home," change it to "mc_about."
Your "Home" and "About" buttons should both animate now. Repeat these steps as many times as you want to get more buttons. Once you're finished, go to "File" > "Publish," and you'll get a nice little .swf in whatever directory you saved your .fla in.
Congrats! You now have animating buttons.
^ Top
