8 - Shape Tween

15/11/2010 11:28

 Learning Shape Tweening by 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.

Modifying the speed of 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…

Selecting the No color option for the outline color.

…select a nice yellow fill color for your smiley.

A hue of yellow has been selected for the fill.

1.4 Deselect the Object drawing option.

Making sure that the Object drawing stays deselected.

This is a must if you want to draw pure shapes. Shape tween animation can be obtained by using simple vector shapes only. Objects, movieclips, graphic symbols and buttons cannot be used in a shape tween animation – they can’t change their shape. Morphing is possible with pure vectors only.

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

A borderless circle with 150px by 150 px dimensions made in Flash CS3.

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.

Locking the head layer.

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

Inserting a new layer in Flash CS3.

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

Selecting black for the fill color.

As you can see, I changed the fill color in the Color panel. This is just to show you that you can do the same thing in many different ways in Flash. For example, the fill color can usually be changed in the Tools panel, in the Property Inspector or in the Color panel. The result is the same – the fill color for the Oval tool has been changed. There is no absolute, best way of doing something in Flash. With time and practice, you will find what works best for you and that’s what matters.

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.

Adding an ellipse with the Oval tool in Flash CS3.

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.

Setting the dimensions for the elongated ellipse in the Property Inspector.

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.

Pasting a vector drawing in place in Flash CS3.

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.

Placing the second eye of your drawing.

While using the Paste in Place command to paste a vector drawing in place in the same layer, you must either use the Selection tool or the arrow keys to move it away from the original copy, before clicking anywhere else. Why? Simply because if you click on some other object or an empty spot of the working area, the pasted drawing will merge with the original copy. That’s how vectors in Flash work. Of course, you can always paste in place your drawing into a new layer. But here, with this simple drawing, there is simply no need for that.

1.14 Lock the eyes layer.

The eyes layer has just been locked to prevent further editing.

1.15 Make a new layer and call it mouth.

Adding a third layer.

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

Selecting the options for the Line tool.

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

Drawing a straight horizontal line.

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.

The second keyframe, preparing for the shape tween.

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

The thick line in the mouth layer on Flash 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 andeyes layers are visible in the first frame only. Until you make them last longer, they won’t be visible in other frames.

In Flash, layers can have a different lifespan inside the timeline.

2.2 To update the other layers, do the following (you don’t have to unlock them!): Right-click on frame 15 of theeyes 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.

A frame was added on the second layer to make it last longer.

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.

Making the layers have the same lifespan within the timeline.

2.3 Repeat the above step for the head layer.

All layers have the same duration now.

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.

Selecting the second keyframe in the mouth layer.

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.

Deselecting a drawing.

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!

Making a curve out of a straight line in Flash CS3.

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.

Creating a shape tween animation in Flash CS3.

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.

A successful shape tween shown in a layer.

If you ever see a dashed, discontinued arrow, it means that Flash hasn’t been able to make a good shape tween animation. This happens when there are objects other than simple vector shapes in your layer, such as movieclips, buttons, graphic symbols etc. A successful shape tween can only be made with pure vector shapes. No symbols or grouped objects are allowed in the layer where the shape tween takes place.

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

Testing a SWF file in Flash CS3.

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.

Copying frames for the shape tween.

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

Pasting a keyframe for a second shape tween.

Your timeline should look like this:

Adding the second segment of the shape tween animation.

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.

Selecting a frame on the Flash timeline.

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

Shape tweening done via the Property Inspector.

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

Another shape tween has been successfully added to the timeline.

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 and that's it.....

The end result: a nice, looping shape tween animation.