Print Version  Email to Friend  Post comment

In this tutorial you will learn how to create an animated button. You should already know how to create a button if not click here. We are going to expand our knowledge on what we already know and learn how to do movement and shape transform. This will be great for you to make a sweet looking flash menu.

Step 1 : Setup and creating the button

1. Change the size of your document to 200 px by 200 px for better viewing of the stage.
2. Go to Insert ð New Symbol (or Ctrl+F8) Put the name as "Button" and select the button type.
   
   
    
3. We start on the 1st frame (Up) which is always default when creating a new button. Now select the Rectangle Tool and use any color you want but make sure their is no outline color. Draw a rectangle.
   
   
    
4. Now create another symbol and name it "Button Animation". Make sure the type is a movie clip.
    

Step 2 : Creating the movie clip and shape tween

1. Go to your "Button" and with the selection tool, click on the rectangle you made and copy.
2. Now open the movie clip you made called "Button Animation" and paste the rectangle in at frame 1.
3. Rename layer 1 to say "Shape".
4. Go to frame 10 and add a keyframe
5. In the properties window select shape tween on frame 1 and frame 10.
   
   
    
6. Your timeline should now look like this.
   
   
    
7. Go to frame 10 and click off the screen in the white or grey area with the Selection Tool.
8. Now place your mouse pointer over the top of the rectangle an you will see the mouse pointer change with a little black bend underneath. Click, hold and pull the top of the triangle down to the bottom (in the middle).
    

   Before	After



9. With frame 10 selected go to the action script panel and type in stop(); this will stop the animation from looping.
10. Now the shape tween is all done and were ready to move onto the next step.

Step 3 : Creating the motion tween

1. Add a new layer called "Motion".
2. Add a keyframe on frame 10.
3. Click on frame 1 and use the Oval Tool to draw a small circle next to your rectangle.
   
   
    
4. Click on frame 10 and select motion in the tween drop down menu.
   
   
    
5. Right click any frame between 1-9 and click "Create Motion Tween"
   
   
    
6. Go back and click on frame 10 and move your small circle right more closer to the rectangle. This will make the circle fly from the left to right when the mouse goes over the button.
   
   
7. With frame 10 selected go to the action script panel and type in stop(); this will stop the animation from looping.

Step 3 : Finishing the button

1. Go to the button you made by double clicking it in your library.
2. Click on the over state and hit F6 to add a keyframe.
3. Using the selection tool click on the rectangle you made and change its color. (I chose yellow)
4. Now drag the movie clip from the library onto the stage. Make sure the rectangle movie clip you are dragging on goes directly over the rectangle you just changed the color. This must be perfectly placed over else it wont look right. Notice how flash helps give a guide to perfection in the image below.
   
   
    
5. Add keyframes in the Down and Hit states.
6. Drag the "Button" onto the main flash page (scene 1) and your all done!

Copyright Flashtrue.com

Your Name:

Title:

Comment:

Verification code:

{show_comment}