8 - Shape Tween
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.
…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 of3.
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)!
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 andeyes 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 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.
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:
- Use the Selection tool (V). Bring it over the line, so that a small curve appears near your cursor.
- Click and start dragging your mouse downwards.
- 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 and that's it.....