Flash 5 Animation with Shape Tweening

The most difficult part of shape tweening in Flash is not the tweening itself. It is getting the shapes you want to tween created. Once those are created it takes just minutes to set up the action.

The above flash movie is animated only with shape tweens. The possibilities are endless and you could even with a lot of work, lip sync using shape tweens. We won't get into that here as it requires much work and is not always reliable in the final outcome due to many factors.

The first thing I did was create the eyeballs. When you have objects that will be the same you only have to create one and then copy and paste it to create however many of that object you need. In the case of the eyes, the tedious part was building the first eyeball.

The Eyeball

  1. Create a blue circle with a black outline.
  2. Using the line tool create a dark blue line and a light blue line with the line thickness set to Create them the same height and butt them up next to each other. Convert them to a graphic - Insert>Convert to symbol>Graphic. I named mine eyeline.
  3. Place the line graphic over the top of the circle. If it doesn't fit exactly, use the scale tool to size it to fit. Once you have a fit, make sure the line graphic is selected and go to Edit>Copy. Then paste a copy of the line. Move the copy of the line over the circle and using the rotate tool, rotate it around so that it doesn't cover the first line. Continue in this manner until you have the full circle cover by multiple copies of the eye line.
  4. Select both the circle and the lines by clicking the arrow tool then drawing a square around the circle. Insert>Conver the Symbol. Make it a graphic, and call it blue eye.
  5. Once you have the original circle covered with the eye lines, create a new layer, select the circle shape tool and black for the color. Create a circle in the center of the work you have just done. Create a new layer, then create an oval shape over the black circle. As you'll see that doesn't look quite right so using the arrow selection tool mouse over the right side of the white circle. You'll see a line shape attach to the arrow selection tool. When you see that hold down the left mouse button and drag the right side of the white oval to the left. It should start to look like the white line in the second eye ball below. The total eye ball should look like the eye ball shown here:
  6. Once I had the eyeball looking the way I wanted I went to Edit>Select All and then used the scale tool to stretch my eyeball so that it was more of an oval shape. I then did Edit>Copy and Edit>Paste so that I now have two eyeballs that are the same side by side.

The Eye Lids

  1. The eye lids are created from a single gradient filled oval.
  2. Once the oval is created I cut it in half and then used the arrow selection tool and the scale tool to shape the upper and lower half of the eye lid.
  3. Draw a line completely over the shape and the select part of the shape and move it. Select each piece of the line and delete it and you will end up with two separate halves.
  4. Using the arrow selection tool I moused over the top line of the bottom half of the eye lid shape and pulled it down so it had a slight curve. I then used the scale tool to shrink it down to a better size.I then selected both halves, Edit>Copy and Edit>Paste so that I now have two matching eye lids for my eye balls.

Putting the Eyes Together

  1. Create a new symbol and call it lids. From your movies library (if you can't see the library go to Window>Library to open it) drag the eye ball graphic to the first layer of the new symbol named lids.
  2. Create a new layer. Place both bottom lids on the new layer and line them up over the eye balls.
  3. Copy and paste each upper lid to it's own layer and line up with the eye balls.
  4. Create a key frame at about frame 30 for both layers with the upper lids on them. For each upper eye lid with key frame 30 selected use the scale tool to pull the top eye lid down over the bottom lid. Then use the arrow selection tool the pull the rounded shape down from each of the upper lids so that key frame 30 looks similar to the above image of the closed lids.
  5. Select key frame one for each of the upper lids and create a shape tween. Your movie named lids should look similar to below up to key frame 30.
  6. Create a key frame for each upper lid in frame 31.
  7. Create a key frame for each upper lid in frame 60.
  8. For each upper lid select key frame one and Edit>Copy and then Edit>Paste to key frame 60.
  9. Select key frame 31 for each upper lid and create a shape tween for each.
  10. Make sure you have all layers in the lids movie clip running all the way through frame 60. Your lids movie clip should look similar to below.

The Mouth

  1. The mouth is a movie clip. Create a new symbol as a movie clip and name it mouth.
  2. For the mouth I drew a simple oval with a red radial gradient.
  3. Using the arrow selection tool I moused over the top of the oval. When I saw the line shape attach to the arrow selection tool I dragged the top of the oval down to the bottom leaving a thin shape as below. This is in key frame one of my movie clip.
  4. Create a key frame in frame 5. Using the arrow selection tool, drag the top of the newly shaped oval back up a bit to get a more open mouth shape. Now select key frame one and create a shape tween.
  5. You can continue to add key frames and shape the mouth so that it appears to open and close as I did every 5 or so frames.

The Ears

The ears were created as with everything else in this tutorial with the oval shape and a radial gradient fill. They were created on a layer by themselves and the arrow selection tool was used to shape them. The ears could even be created in their own movie clip and animated also.

  1. The face was created again from a radial gradient oval and pushed and pulled with the arrow selection tool to get the shape I wanted. The face was created on a layer by itself. The eyes, eyebrows, nose and mouth were added on layers above the face layer while the ears where placed on a layer below the face layer.

The eyebrows were created as a solid color oval that was pushed and pulled with the arrow selection tool the create the correct shape.

The nose was created with a radial gradient filled oval pushed and pulled to the shape I wanted.

9 The Hair
The hair is created with an oval shape also. I used the arrow selection tool as we have used it throughout this tutorial to drag the edges of the oval into a shape I like.

The hair was created on it's own layer over the face so that it could be manipulated with altering the face layer.

10 As mentioned before the face is an oval shape on a layer of it's own.

Create a key frame in frame 5 on the face shape layer.

As with all the other shape tweening we have done, I used the arrow selection tool on both sides of the face shape to make it skinnier.

Select key frame 1 of the face shape layer and create a shape tween.

11 You can now copy and paste the frames of the face animation to subsequent frames filling out the animation.

The only special thing I did with the face shape tween was to set it up so that as the mouth opens wider the face gets skinnier and as it closes the face gets wider in the much the same way it works for our faces.

In the screen shot below, each shape tween (green section) is a copy of the first shape tween created for the face pasted in to keep the animation running. This effect could also have been accomplished by creating a separate movie clip and only running the shape tween one time.