flash cs3 animation 2 st

Flash CS3 animation basics: Shape tweenAfter learning how to make a motion tween in Flash CS3, its 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 on the web page of this lesson. 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, thats the outline color. When the palette opens up, select the No color option. You can see it in the palettes upper right corner in the image below. Then

select a nice yellow fill color for your smiley.

www.FlashExplained.com

1.4 Deselect the Object drawing option.

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 cant 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.

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.

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 thats 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.

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.11 Select Edit > Paste in Place.

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

1.12 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.

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. Thats 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.13 Lock the eyes layer.


1.14 Make a new layer and call it mouth.

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

1.16 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 smileys 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 wont be visible in other frames.

2.2 To update the other layers, do the following (you dont 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.


If you ever see a dashed, discontinued arrow, it means that Flash hasnt 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!

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 whats going on its 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 thats 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.

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 dont know if its Ctrl or Cmd on a Mac, sorry, my old one is too slow for Flash CS3 and I havent 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).

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.

ConclusionYou have just learned how to make shape tweens. For anything more complicated, for example a character that moves and speaks, you cant 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.

The source file for this lesson is included with this PDF. If missing, get it at http://flashexplained.com/animation/flash-cs3-animation-basics-shape-tween/.

Like this Flash lesson? Subscribe to FlashExplained.com to stay up to date on new lessons and tutorials!


Flash CS3 animation basics: Shape tween1. Drawing the smiley shape2. Making a simple shape tween animation3. How to create a morphing effect with shape tweensConclusion

flash cs3 animation 2 st

Documents

eye shape

color panel

shape tween animation

simple shape tween

color option

shape tweenafter

smiley shape

outline color