9 - Morphing between shape tweens

15/11/2010 11:32


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.


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.

ASSIGNMENT:  Do your own shape morphing....