Flash Explained

Learn Flash easily.

Flash CS3 animation basics: Shape tween

November 21st, 2008 | Author: Luka | Category: Animation


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.

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 of 3.

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 and eyes 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 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.

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:

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

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.

A vector circle ready to be morphed with shape tweens.

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

Placing a new keyframe 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.

The second keyframe has been put in place.

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

A shape tween.

3.6 Next, insert a keyframe at frame 20.

A keyframe inserted in the middle of a shape tween.

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

Deselecting a vector circle.

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.

Making a pointed incision in a vector circle in Flash CS3.

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

Modifying the shape of a vector circle in Flash.

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

Be Sociable, Share!

Comments

Submit a comment

  • kunika Dec 1, 2008 at 2:02 pm

    coooooooolll!!!!!!!!!!!!!!

  • Mountainjew Dec 3, 2008 at 12:15 am

    Awesome tutorial! Much appreciated! =)

  • Edin Dec 6, 2008 at 10:30 pm

    How to Thanks ?

  • Mehfooz Dec 18, 2008 at 5:16 am

    Thank you very much……….
    am already taking flash classes
    ….but this tutorial is Awesome
    thank you once again

  • livingdog Dec 21, 2008 at 3:30 pm

    I need to rotate a straight line at one end.

    But all I have been able to figure out is how to make the line spin about its center: | -> / -> – -> \ -> |.

    Any help would be appreciated.

  • gbiddapola Jan 25, 2009 at 7:57 am

    thanks you very very thanks

  • Eltowne Jan 25, 2009 at 4:27 pm

    SUPER. The Best way on how to work with Flash.

  • Gajanand Sharma Jan 27, 2009 at 6:48 am

    Very Nice : Your suggestion is very easy & very simple. Thanks

  • Constantino Jan 29, 2009 at 7:22 pm

    Thank you so much. This help me alot. AM a Beginer at this but it was so simple :) .

  • greyhound Feb 3, 2009 at 8:47 pm

    this works mucho bueno

  • buya Feb 5, 2009 at 1:41 am

    thankz coze u make this website.i hope u can upload note abour how to make a montage and u upload example of any montage

  • Victor Feb 19, 2009 at 1:14 am

    Thanks, this tutorial is really good.

  • Kanishka Feb 24, 2009 at 8:47 am

    please i need to learn that how to animate a bike like going along road while the tires and paddle are rotating;….

  • Waji Apr 6, 2009 at 9:06 am

    coooooooooollllll!!!!!!!!!

  • Coolboy May 6, 2009 at 6:29 pm

    thanks man, this helps alot

  • Lawrence Miller May 15, 2009 at 4:22 am

    This site is amazing. I cannot believe there are no advertisements served here. In the sense that you could be making some supreme money while doing supreme good.

    Consider it, for it’s not bad. (Not spam) I actually subscribed to this site via RSS feed. lol

  • Staging Mar 22, 2010 at 5:52 am

    I have purchased a couple of different books, and downloaded a virtual book, and the best resource I have found is gotoandlearn.com. It is by far the best resource to learn great flash techniques. It has everything from animation to action script.

  • Staging Apr 8, 2010 at 5:53 am

    You have the animation, copy the 5 frames you created. Double click on your button, go to the ‘Over’ frame. Create an object, change its property to ‘Movie Clip’ or something like that.

  • Jhulio Sep 24, 2010 at 5:27 pm

    I just loved your simple, precise and concise explanations. You should teach this!

  • [...] http://flashexplained.com/animation/flash-cs3-animation-basics-shape-tween/ Click here to cancel reply. Leave a Comment [...]

  • nick Jan 31, 2011 at 3:52 pm

    Helped alot

  • Stefanie Lampen Feb 22, 2011 at 3:36 pm

    I have to say that it took me while to get to the stage were I can make something like this animated smiley face. However after a bit of testing I finally got it and I’m proud. Thanks for the tips.

  • Avani Shah Mar 21, 2011 at 2:11 am

    Can I put this tutorial on my website?

  • Luka Mar 21, 2011 at 7:49 am

    @Avani Shah: If you credit me and put a live link back to this page, you can.

  • Marq Aug 16, 2011 at 6:07 am

    Very well explained !!.
    Thank you again and again much appreciated.

  • Monami Saikia Oct 20, 2011 at 8:21 am

    Your suggestion is very easy & very simple. Thank you very mush

  • Monami Saikia Oct 20, 2011 at 10:41 am

    Very Nice…Thank you very much…

  • sujatha Dec 4, 2011 at 4:08 pm

    thank you,i am a beginner, it is useful for me

  • Logan Hardin Feb 23, 2012 at 10:53 pm

    I’m using CS5, and even as of it, pretty much all of this tutorial still works.
    By the way, (as of CS5) it’s option on the Mac. Command (equivalent to ctrl on Windows) just makes the circle flatten in a really weird way.

    Love the tutorial. Very helpful and explanatory. You should make a tutorial for the new motion tween they have.

  • Luka Feb 27, 2012 at 11:46 am

    @ Logan Hardin It’s explained here: http://flashexplained.com/banners/how-to-create-ad-banners-in-flash-cs4/ but you are right, I should make a separate tutorial about it.

  • Aleeza Apr 16, 2012 at 1:55 pm

    Hello
    I Am A School Student And I Ended Up With 2 Mouths!
    I Didnt Follow Instructions Or You Need To Make Them Easier For Kids My Age To Read!
    I Think My Smiley Face Has A Spazz Attack Everytime I Play The Movie xx
    Good Luck :)
    Bye xxxxxxxxxxx

  • [...] Objective: Students learned to use shape tweens by creating the shapes in this instruction Shape Tweens [...]

  • [...] Objective: Students learned to use shape tweens by creating the shapes in this instruction Shape Tweens [...]

  • Rambhas Jun 26, 2013 at 9:46 am

    very useful.. simple way to learn thnx

Leave a comment