Flash Explained

After learning how to make a motion tween in Flash CS3, it’s time to see how a shape tween is made.You will see and learn:

• How to animate a drawn line,
• How to animate a shape and morph it into something different,
• You will also learn some really simple drawing and shape manipulation techniques along the way.

The first simple shape tween that you are going to learn to create is shown right below. The second one will follow right after it, in this same lesson.

1. Drawing the smiley shape

1.1 Open a new document by selecting File > New. Select Flash File (ActionScript 3.0) and click OK.

1.2 Go to the Property inspector (below the working area) and find the Frame rate option. Change it to 24 fps. This is a nice speed, for a smooth animation in your SWF.

1.3 Select the Oval tool (O)...

...and go to the lower portion of the Tools panel. Click the colored square near the pencil icon, that's the outline color. When the palette opens up, select the No color option. You can see it in the palette's upper right corner in the image below. Then...

...select a nice yellow fill color for your smiley.

1.4 Deselect the Object drawing option.

1.5 Now, draw a circle on the stage. Make it 150 by 150 pixels.

1.6 Call the current layer head. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name. Now, press the small dot beneath the padlock icon to lock this layer. Since you finished all the work here, it makes sense to lock it. This will prevent you from accidentaly placing any drawings or objects inside it.

1.7 Create a fresh layer by clicking on the Insert Layer icon. Call the new layer eyes.

1.8 Select the Oval tool (O) again. Change the fill color to black.

1.9 Now, click and drag with the Oval tool to draw an ellipse. It should be elongated (on its vertical axis), so that its dimensions are approximately 20 px by 40 px.

If you want to get these dimensions right, just click on the eye with the Selection tool (V) and go to the left side of the Property Inspector. You will find the W and H options there, which serve to adjust the width and height of your ellipse.

1.10 Click on the eye with the Selection tool (V) to select it. Press Ctrl+C (PC) or Cmd+C (Mac) to copy the eye shape.

1.12 Select Edit > Paste in Place.

Now, do not click anywhere or touch anything! Just read the following step.

1.13 Hold Shift on your keyboard and press the right arrow key repeadetly until the second eye has been positioned well. If you want to position it more precisely, release Shift and just use the arrow keys to move it by 1 pixel at a time.

1.14 Lock the eyes layer.

1.15 Make a new layer and call it mouth.

1.16 Select the Line tool (N). In the Property Inspector, choose black as color, Solid as line type and a thickness of 3.

1.17 Draw a horizontal line using the Line tool. Do this by holding Shift, clicking and dragging your mouse horizontally.

Well, your smiley is done! You will now see how to make it smile! 🙂 Save your work before proceeding (File > Save)!

Top of page

2. Making a simple shape tween animation

2.1 Right-click on frame 15 of the mouth layer and select Insert Keyframe from the menu that pops up.

You have just inserted a new keyframe in the mouth layer. This is necessary for any kind of animation in Flash, because a keyframe makes change possible. Whenever you want to animate something, be it movement, color or shape change, you must use a keyframe.

...but you have certainly noticed that only the line representing the smiley's mouth is visible on the stage.

...and this is perfectly normal! Once you have inserted a new keyframe in the mouth layer, you have made it last longer inside the timeline. All the while the first two layers have remained the same. The contents of the head and eyes layers are visible in the first frame only. Until you make them last longer, they won't be visible in other frames.

2.2 To update the other layers, do the following (you don't have to unlock them!): Right-click on frame 15 of the eyes layer and select Insert Frame (not keyframe!) from the menu. A frame is used when you just want to prolong the duration of a keyframe in the timeline, without any changes.

And now, the eyes layer has the same lifespan as the mouth layer. As you can see, a simple, plain frame is represented by a small rectangle, unlike a keyframe, which has a solid black dot.

2.3 Repeat the above step for the head layer.

Everything is visible now, in the same time span.

2.4 Fine! Let me show you how to make the shape tween now. Click the second keyframe in the mouth layer to select it.

This automatically selects every single object in this keyframe. You will see that the mouth (the line) has become highlighted. To unselect it (to be able to change its shape)...

2.5 Click anywhere outside it using the Selection tool (V), on an empty part of the stage.

2.6 Here is how you can easily make a nice smile:

1. Use the Selection tool (V). Bring it over the line, so that a small curve appears near your cursor.
2. Click and start dragging your mouse downwards.
3. Once you are satisfied with your curve, release the mouse button. There! The line became a curve!

2.7 Now, to create a shape tween, right-click anywhere between the two keyframes (or on the first one) and select the Create Shape Tween option from the menu.

If you have done everything as I explained to you up to this point, you should see an arrow between the two keyframes appear, on a light green background.

2.8 To see your first shape tween animation, select Control > Test Movie. The testing window will appear, with your smiley!

You should see an animation like this:

There! The shape tween has been successfuly made! But after the smile appears, it returns abruptly to the straight line. Why? Because you made it that way! Flash cannot know what's going on - it's just executing what you told him to do. So, if you want to make that smile return to its initial position more smoothly, you should add another shape tween animation segment. And that's really easy to do, because you can just copy the first keyframe, instead of having to re-create it manually.

2.9 Right-click on the first keyframe in the mouth layer and select Copy Frames.

2.10 Right-click on frame 30 of the mouth layer and select Paste Frames.

Your timeline should look like this:

2.11 Let me show you now a different way of making a shape tween. Click anywhere between the second and third keyframes in the current, mouth, layer.

2.12 Jump over to the Property Inspector and find the Tween drop-down menu. Select the Shape option.

The second shape tween should appear in the mouth layer, just as before, represented by a continuous arrow on green background.

2.13 What is apparent immediately, is that you should add a frame in both the eyes and head layer, to make them last as long as the mouth layer. You already know how to do it - for a reminder take a look at step 2.2 again. This is the result you should obtain:

2.14 Select Control > Test Movie to see your smiley change its expression, this time without any abrupt changes in animation.

Save your document and close it. I will show you now how to create a shape morph with the shape tween animation technique and also how to change the color of your drawing.

Top of page

3. How to create a morphing effect with shape tweens

3.1 Open a new document by selecting File > New > Flash File (ActionScript 3.0) and clicking OK.

3.2 Select the Oval tool (O). It should have similar settings as before: block the outline color by selecting the No color option for it. Choose blue for the fill color. Also, exactly like in the previous exercice, the Object Drawing option should be turned off. Just like you did in step 1.3 and 1.4.

3.3 Draw a circle on the stage. I made it a little bit bigger than 100 by 100 pixels.

3.4 Insert a keyframe in frame 40 on the first layer.

Do not make any changes to your circle here. Because, as you have seen in the previous exercice, this last frame will serve to make a nice loop. So that your animation will run smoothly, without any sudden jumps.

3.5 Right-click between the two keyframes and select the Create Shape Tween option.

3.6 Next, insert a keyframe at frame 20.

3.7 Fine. Now, use the Selection tool (V) to deselect the circle by clicking anywhere outside it.

3.8 Bring the Selection tool (V) next to the top of your circle, until a curve appears. Now, press and hold Ctrl on your keyboard (I don't know if it's Ctrl or Cmd on a Mac, sorry, my old one is too slow for Flash CS3 and I haven't bought a new one yet 🙂 ). Still holding the Ctrl key, click and drag your mouse downwards.

You should see a pointed deformation start to appear, like a wedge has been driven into the circle.

3.9 Repeat this operation at the remaining three sides of your circle, until you get a flower-like shape.

3.10 Test your SWF movie by selecting Control > Test Movie or pressing Ctrl+Enter (Cmd+Return on a Mac). Your animation should resemble this one:

Now, if you want to change the color, just select the shape in the middle keyframe (where it is resembling a flower) and change its fill color in the Tools panel.

Conclusion

You have just learned how to make shape tweens. For anything more complicated, for example - a character that moves and speaks, you can't rely on Flash to do that for you. Any complex animation requires drawing the changes that happen, frame by frame. Flash cannot replace the human hand, while it is excellent for smooth transitions used in many websites that you see around. If you want to create complex animations, arm yourself with patience. Check out the excellent animated wings tutorial to see how it is done.

Download the source file for this lesson

Comments

Submit a comment