Animating with Flash

February 6, 2009 by: smonte

Learn the very basics of Flash tweening.

Let’s say that you want a rectangle in your Flash movie to move from the left side of the stage to the right side of the stage. Here are the steps that you need to follow to accomplish that in Flash CS3.

1. Create a rectangle.

2. Convert it into a movie clip (select it and press F8) and move it to the left side.

3. Insert a keyframe to frame 25 (select the frame and press F6).

4. Select frame 25 (just click it in the timeline if it’s not already selected) and move the rectangle to the right side of the stage.

5. Right click on any frame between 1 and 25 (could also be 1 or 25).

6. Select ”Create motion tween”.

7. To test the movie, hit Ctrl + Enter.

Now you have a moving rectangle! Remember, you can animate every property of a movieclip. It doesn’t have to be the coordinates. Try changing the alpha for example…

IMPORTANT: You can only have one object per layer if you are tweening an object in a layer. So if you have multiple movie clips and tweens, put them on separate layers!

Using a path in a tween

You can add curves to a motion tween by using motion guide. To create a ball that moves in a circle, follow these steps.

1. Draw a ball.

2. Convert it into a movie clip by selecting it and press F8.

3. Create a new motion guide layer.

Motion guide

4. In the motion guide layer, draw a circle with the oval tool (don’t use fill color).

5. At the top of the circle, erase a small portion.

Motion guide circle

6. Drag the ball into the motion guide circle (look at the picture). Be sure to drag the ball by clicking the center of the ball (a small circle in the center of the ball). Ensure that youhave snapping turned on.

Snapping icon

Begin state of motion tween

7. In the motion guide layer, insert a frame to frame 50 (select the frame and press F5).

8. In the ball’s layer, insert a keyframe to frame 50 (select the frame and press F6).

9. In frame 50 of the ball’s layer, drag the ball to the other side of the motion guide circle.

End state of motion tween

10. Create a motion tween in the ball’s layer.

Create motion tween

11. Test the movie by hitting Ctrl + Enter.

There you have it! Remember, you can use all kinds of motion guides, not just circles.

Using Flash CS3 shape tweens

Flash shape tweens allow you to change an object into another. Shape tweens can only be applied to shapes (not movie clips!). In this example, we’re going to create a ball and shape tween it into a rectangle.

1. Draw a ball (no borders).

2. Create a keyframe in frame 50 (press F6).

3. In frame 50, delete the ball (select it and hit backspace).

4. Draw a rectangle in the place of the deleted ball.

5. Select a frame between 1 and 50. Right click and select ”Create Shape Tween”