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.
1
The
Eyeball
From the Insert menu choose New Symbol and
create a new graphic symbol naming it 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 1. 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.
2
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 another new layer and 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 be looking like the third eye
ball below.
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.
Below is a representation of the some of
the steps in the process of creating the eye ball.
2
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.
Cutting a shape in half is as simple as
using a contrasting color with the line tool. 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.
3
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 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.
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.
5
The Mouth
The mouth is a movie clip. Create a new
symbol as a movie clip and name it mouth.
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 as below. Now select key
frame one and create a shape tween.
6
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.
Below is what the mouth movie clip looks
like.
7
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.
8
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.
