Motion Tweening Buttons

Source Files: Download
Level: Easy
Version: 4,5 

This next lesson is a basic introduction to creating both buttons and simple animations. We¡¯re going to create a simple button and then animate the button to demonstrate that not only graphics can be animated in Flash. This could also be used as a Flash banner tutorial for creating animated banners. Here's a preview of the final, animated banner in Flash 5:

Step 1: Creating the button

1. Create a graphic or type out some text that you'd like to be your button.
2. Select it and convert it to a button by clicking F8 and choosing Button.

Step 2: Applying the Actions to the button

1. Select the button
2. Open the Actions Panel
3. Apply the following Actions to the button:

What we're telling the button to do is to stop playing when the button is rolled over. When the cursor rolls off the button, we're telling it to begin playing again. And, since we promised a prize if the viewer caught the mouse, we included an excellent prize: A first class link back to our site:-)

Step 3: Creating the button animation

1. Drag your mouse button to the far left of your stage at Frame 1.
2. Create 41 Frames by clicking at Frame 41 on the Mouse Layer and dragging down to the BG Layer. This selects the frames for both layers.
3. Create the frames by clicking F5.
4. On the Mouse Layer, create a keyframe at Frame 20.
5. Drag the mouse to the right side of the stage at Frame 20.
6. Create a new keyframe at Frame 21.
7. Flip the mouse horizontally by selecting the mouse and going up to Modify>Transform>Flip Horizontal.
8. Create a new keyframe at Frame 41.
9. Drag the mouse back to the left side of the stage.
10. Create the first Motion Tween by clicking in the timeline anywhere between Frames 1 and 20 and in the Frame Panel, select Motion for Tweening.
11. Create the second Tween by clicking anywhere in the timeline between Frames 21 and 41 and in the Frame Panel, select Motion for Tweening.

Step 8: Testing your movie

Click Command-Return/Control-Enter to test your movie

discuss this topic to forum