Basic Motion Tween Animation

In this lesson, you will learn how to create a simple Motion Tween animation. In other lessons, I will show you how to use some advanced capabilities of this type of animation, such as easing, changing the color, shape and transparency of your object.

1. Open a new Flash document. Draw a circle. You can do this by selecting the Oval tool (O) from the Tools panel. Click on the stage and start dragging, while holding the SHIFT key.

2. Select the circle with the Selection tool (V) from the Tools panel, by double-clicking on its fill color (if you are working with Flash MX 2004 or Flash MX) or clicking on it once (if you are working with Flash 8). You can also select it by clicking somewhere outside the circle, and dragging the mouse over the circle (see the image at left below). The circle is now selected (see the image at right below). If you are using Flash MX 2004 or Flash MX it is important that you select both the fill and the edge.

3. To create a motion tween animation, you need to convert your circle drawing to a symbol. Choose Modify > Convert to Symbol or press F8. This will bring up the Convert to Symbol dialog. Now, you can choose from three types of symbols: Movie Clip, Button and Graphic. Choose Movie Clip.

NOTE Movie Clip is by far the most versatile and powerful of the three symbols available in Flash. You will use it in perhaps 99% of the cases where some animation and/or interactivity is involved.

Still in the Convert to Symbol dialog, give your Movie Clip a name. Click in the Name field, and type circle. We'll leave the Registration option for now. Click OK to create your Movie Clip. You will see a thin blue square marking your newly created Movie Clip.

Now we need to create the movement. How? By using the Timeline, which is situated above the scene.

The frame with number 1 on the image (and in our document) is a keyframe. A keyframe is a place in timeline where something changes. When you open a new document, as soon as you draw something on the scene, a keyframe is created in frame number 1. To animate our Movie Clip, we need another keyframe.

4. To create the second keyframe, bring the mouse over frame 20 (you can choose whichever frame you want, of course, 20, 21, 30, 5, 86, it doesn't matter, but for the sake of keeping everything in sight, choose some frame not far away). Right-click on frame 20 and choose Insert Keyframe from the menu that appears. You should see the same result as in the image below:

5. Now click (once!) on our Movie Clip (the circle on the stage) and drag it to a position you want your movement to finish. If you press ENTER now, you will see the playhead in the timeline start to move, but there is no circle movement. Why is that? Because we haven't told Flash to make a Motion Tween yet. So the first keyframe is being shown, without any changes, till the playhead arrives at the second keyframe. At that moment, you see our Movie Clip "jump" to the new position and stop.

6. To make the Motion Tween, right-click anywhere between the two keyframes (or right-click on the first keyframe, but NOT on the second one), and choose Create Motion Tween from the pop-up menu. If you've followed correctly every step until now, you should see an arrow on a bluish background, between the two keyframes.

Press ENTER now to see your Movie Clip move on the scene. Whoa! Your first Motion Tween. Cool, ain't it? :) It is always exciting to see the first results of your newly aquired skills, but in time, motion tweening will become second nature to you, you'll do it automatically. Which is also cool. :)

If you want to test your movie, or see how it functions "for real" and not in the working space of Flash, press CTRL+ENTER or choose Control > Test Movie. Your Movie will open in a new window, and the animation will loop endlessly, that is, until you close the window. Maybe you've noticed that your movie is too "jumpy", i.e. your Movie Clip is not moving smoothly. To change that, press CTRL+J or choose Modify > Document. The Document Properties dialog appears. In the Frame rate field enter a higher number. Try 24. This value is the speed of your movie in fps, or frames per second units. That means that when a second has elapsed, Flash will have shown 24 frames in sequence. Test your movie by pressing CTRL+ENTER and see the difference.

NOTE Always use only one symbol in a Motion Tween animation. If you want to animate more symbols (Movie Clips, Buttons, Graphic symbols) you should place each symbol in its own layer on the timeline. Also, there mustn't be anything else except the symbol which is being animated in the layer containing the Motion Tween animation (no drawings, lines, text, other symbols etc). Otherwise, you may get unexpected and erroneus results.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!