Flash Explained

With this tutorial, I am switching to Flash CS4 and ActionScript 3.0. This lesson will be the first of many in which you will learn how to make animations in Flash CS4. You will see what are shape tweens, motion tweens and classic tweens, with many applications and variations of these basic animation techniques. If you follow through with these lessons, you will learn all that you need to start creating great animations in Flash. So, don’t miss them – subscribe to Flash Explained now.

Let’s start with the simplest animation – the shape tween. In this lesson, you will learn:

• What are keyframes and what is their purpose
• How to use the timeline to create an animation
• How to morph shapes
• How to create smooth looping animations
• How to animate a shape’s color

1. Shape tween animation basics

1.1 Open a new Flash CS4 file selecting File > New. In the window that appears, select the top Flash File (ActionScript 3.0) option and click OK. Save your file now (File > Save) so that you can simply press Ctrl+S any time later on, to quickly save your work.

1.2 Select the Rectangle Tool (R) . At the bottom of the Tools panel, there are the Object Drawing and Snap to Objects buttons. Turn them both off if they are not. You don’t need these options now.

Also, pay attention that you have selected the Rectangle Tool and NOT the Rectangle Primitive Tool. You can use the latter for shape tweens also, but I want to show you some options that can be done with the raw vector drawing shapes only.

1.3 Click and start dragging with your mouse on the stage to draw a rectangle. Draw it somewhere in the middle of the stage.

You can make it any color and size you want. This isn’t so important right now.

What’s important right now is one small change that can be seen in the timeline panel, right below the stage. A keyframe has appeared as soon as you have drawn your rectangle. This is the black dot in the first frame – you can see it marked clearly in the screenshot below.

A keyframe is a special kind of frame: it has some content inside it. And it is used when you want to make a change in your animation. The other frames following after it are simple, empty frames. Now let’s add another keyframe so that you can make your first shape tween animation.

1.4 Right-click with your mouse inside the timeline, on, for example, frame 20 and select the Insert Keyframe option in the menu that shows up.

The second keyframe will appear.

At least two keyframes are needed to make a shape tween. The first keyframe is the initial state of your drawing — the beginning of your animation. The second keyframe is where the desired change occurs. The small white rectangle placed just before the second keyframe indicates the end of the first keyframe. Up to that point, there is no change whatsoever — the gray frames in between the first keyframe and the white rectangle also show that.

1.5 Let’s make a change now. Still being in keyframe 20, select the Selection Tool (shortcut key: V).

1.6 Bring your cursor near the bottom side of your rectangle, until you see a small curved line appear near it (see screenshot below). Click and pull downwards — you should see a green curve appear as you stretch your rectangle. Release your mouse and voilà — you have just changed the shape of the rectangle.c

1.7 Repeat this three more times, for each of the remaining sides of your rectangle, until you get something akin to the shape pictured below:

1.8 Right-click on any frame between the first and second keyframes (see below) and select the Create Shape Tween option.

If you did everything as shown up to now, you should see an arrow appear between the keyframes, on green background — see the screenshot below.

Flash will signal you a shape tween done incorrectly, by inserting a dotted line in the timeline, instead of the arrow. In case you have a symbol instead of a drawing in the second keyframe, it will look like this:

…and if you haven’t got anything in the second keyframe — it is called a blank keyframe — then the timeline will look like this:

Fine. Now that you know how different errors look like in the timeline, let me show you how to add more features to your current animation. But first, save your file. And take a look at what you have created so far.

1.9 Select Control > Test Movie (shortcut key: Ctrl+Enter). You should see your rectangle change its shape, as it was being inflated with air, something similar to this:

As you can see, Flash will calculate the change between the two keyframes: it will create the animation segments for each and every frame in between.

1.10 Close your animation's preview window.

It is easy to see that this animation isn't all smooth. Near its end, the rectangle transforms abruptly from the "inflated" state back to its initial one, where it is a proper rectangle. You can see this jump in the animation clearly. And this is normal. Why? Because Flash is made to loop every animation. Once it reaches the last frame, it goes straight back to the first one. It does not see the animation as we humans do. It just does what you told it to do: loop the animation endlessly, by going back to the first frame once it has reached the end. So let me show you how to make a smooth transition, to avoid having abrupt jumps in your shape tween.

Top of page

2. Making a smooth shape tween — adding further animation segments

To have a smooth looping animation, you would need the rectangle to morph into its initial state. The first idea that comes to mind is to insert a new keyframe further down the timeline, and then copy and paste the rectangle from the first keyframe here. This certainly works, but there is a much simpler and easier way to pull this off:

2.1 Right-click in the first keyframe and select the Copy Frames menu option.

2.2 Right-click on any empty frame after the second keyframe (for example, I chose frame 40) and select the Paste Frames menu option.

Here is how your file's timeline should look now:

The grey frames between the 2nd and 3rd keyframe indicate that there isn't any animation going on here. Of course — because you have to add it, Flash can't do it by itself.

2.3 So just right-click between the 2nd and 3rd keyframes and select the Create Shape Tween option.

Here is the result:

2.4 Test your animation by pressing Ctrl+Enter. You should have a smooth morphing effect, like the one shown below:

Everything looks much better now. Flash is playing the animation from the 1st keyframe to the 2nd one, where the rectangle changes shape. Then it goes to the 3rd keyframe, which is the same as the first one. And then it jumps back to the first one, and thanks to that you have a smooth transition.

Top of page

3. Animating a color via shape tween

3.1 Click on the playhead (pink rectangle) in the timeline and start dragging it towards the second (middle) keyframe. Once you reach the second keyframe, release your mouse button.

This is simple positioning inside the timeline.

3.2 Using the Selection Tool (V), click on the colored fill of your shape on the stage to select it. It will become rasterized (this indicates that it has been selected).

3.3 Go to the Fill and Stroke section of the Properties panel (on the right of the stage). Click on the Fill color icon (the small paint bucket) and select a different fill color for your shape. Choose a color that is in strong contrast with the previous one, so that you can see the change in animation clearly.

The shape on the stage should have changed color.

3.4 Test your animation: select Control > Test Movie. See how the color gradually changes together with the shape morphing, smoothly:

You can also apply a gradient color fill to your shape, it will be animated too. Check this out:

In subsequent tutorials, I will show you how to apply the various techniques that you have learned to real world projects.

Download the source file for this tutorial.

Comments

Submit a comment