Computersight -

For my first tutorial, I have decided to cover how to make basic animations, using keyframes and tweens. Note: this is very basic, and practically all Flash users out there already know what is covered in this tutorial – therefore this tutorial is for beginners only.

Making An Animation Using Keyframes:

First, you have to draw the original shape you want to animate on the stage (the white area). This will be the first frame in your animation. When you are done, press Insert > Timeline > Keyframe (or push F6). Now, slightly change your shape (for example, move it slightly, or use the Free Transform Tool (Q) to modify the shape). Then insert another keyframe, and change you shape again. Repeat this until your animation is complete. You can press Control > Test Movie (or push ctrl + enter) to view your animation.

Making An Animation Using A Shape Tween:

A shape tween is used to blend one shape into another. It can also blend other factors of shapes together including color, size, position and alpha (transparency). To use a shape tween, you first have to create the first frame of your animation. Next, on the timeline, click on frame 50 (you can use any frame, but for the purposes of this tutorial, i will use frame 50), and create a new keyframe (F6). On this keyframe draw the last frame of your animation. Now, click on any frame on the timeline in between your two keyframes. On the Properties Inspector on the bottom of the screen, you should see a Tween option, with a drop-down menu. Select shape from the list.

Your time line should now look like the one shown below:

Your shape tween animation is now complete! You can press Control > Test Movie (or ctrl + enter) to view it.

Making an animation using a motion tween:

A motion tween is used to move a movie clip from one place to another. You can move the movie clip along a set path (called a motion guide), and make it rotate a custom number of times. First, you need to start by creating the first frame of your animation (see above). Now, you use the Selection Tool (V) to select what you have just drawn, and press Modify > Convert to Symbol (or push F8). Type in a suitable name to the box that comes up (e.g. tween_shape), and make sure “Movie clip” is selected as the type. Also, make sure the registration is set to center. It should look like the box shown below.

Next, on the timeline, click on frame 50 (again, you can use any frame, but I will use 50), and create a new keyframe (F6). Now, drag the shape you drew on the first frame (now a movie clip), to where you want it to move to in the animation. Just as you did in the shape tween, click on any frame in between your keyframes, and select Motion as the tween option in the properties inspector. Your timeline should now look the same as the timeline for the shape tween shown above, except the frames on the timeline should be a slightly different color. If you test your movie now (ctrl + enter), your movie clip should move from its position in the first frame, to its position in the last frame.

You can now do a few things to make it more interesting. If you click on any frame in between your keyframes on your timeline, and then look at the property inspector, there are a number of options here that you can use, including: rotations (make the shape rotate while it moves), easing (makes the shape accelerate while it moves, instead of moving at a flat speed), and the option to orient the shape to a path. We will look at this latter option in more detail.

Orienting A Motion Tween To A Path:

Orienting a motion tween to a path allows you to make whatever is in your tween (i.e. your movie clip) move along a certain path, that you can draw. To do this, right click on the layer that has your motion tween on it, and select “Add Motion Guide”. Now, using the pen tool, brush tool, line tool, or similiar, draw a path for your movie clip to follow. Here’s the path i drew for my movie clip:

Now, if you click anywhere on your motion tween in the timeline, you need to check the box that says “Orient to path”, and also checking the box that says “Snap” may help. Next, you have to click on the first frame in your timeline, and drag your movie clip to the “start” position of your motion guide. Make sure you get the center of the movie clip as close to the line as possible. You then have to click on the last frame, and drag your movie clip to the “end” position on your motion tween. If you now test your movie (ctrl + enter), your movie clip should follow your motion guide! Hint: if you click the dot beneath the eye logo next to the motion guide layer, you can make the motion guide “invisible”.

Improving The Quality Of Your Animations

You may find that your animations jolt and lag a little. This is because the animation has a low frame rate (12 frames per second by default). If you increase the fps, your animation will run much more smoothly. You can change the fps by double-clicking where it says “12.0 fps” beneath the timeline.

Also, when playing your animation, it will continuously loop. I think that this can ruin the animation, so here are two ways to solve this problem: You can make the animation’s first and last frames the same, so that in one play, the animation makes a full circle.. in other words, where continuously looped, you cant tell where the start and end of the animation is. Or, alternatively, if you click on the last frame of your animation, you could push F9 (which opens the actions panel), and paste this code:

Stop();

You can now push F9 to close the actions panel. If you test your movie now (ctrl + enter), you will see that your animation only plays once, and then stops.

And that’s about it for this tutorial! Don’t forget that you can mix and match all of these forms of animation in flash. Have fun!

This is my first ever tutorial, so any comments or suggestions would be welcome, as they would help me improve future tutorials! Thanks!