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.
- Create a blue circle with a black outline.
- 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.
- 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.
- 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.
- 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:
- 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
- The eye lids are created from a single gradient filled oval.
- 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.
- 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.
- 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
- 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.
- Create a new layer. Place both bottom lids on the new layer and line them
up over the eye balls.
- Copy and paste each upper lid to it's own layer and line up with the eye
- 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.
- 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.
- Create a key frame for each upper lid in frame 31.
- Create a key frame for each upper lid in frame 60.
- For each upper lid select key frame one and Edit>Copy and then Edit>Paste
to key frame 60.
- Select key frame 31 for each upper lid and create a shape tween for each.
- 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 is a movie clip. Create a new symbol as a movie clip and name
- For the mouth I drew a simple oval with a red radial gradient.
- 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.
- 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.
- 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 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.
- 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
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.