Introduction
Flash supports two types of tweening to make animating less
tedious, motion tweening and shape tweening. As opposed to drawing each frame as with a flipbook, one only needs to
draw a keyframe with the starting location/shape and
another keyframe later in the timeline with the
ending location/shape. (Flash gives less
paper cuts than a flipbook, too!)
In addition to making life easy, tweening helps reduce the
file size of the finished Flash presentation. Flash only needs to save information about the objects at the beginning
and ending keyframes and not the frames in-between
them… And we all want to make tighter,
leaner, meaner presentations, right? This tutorial will help you do just that by focusing on shape tweening
with the aid of shape hints.
To begin, open a new movie (FILE>New…) and adjust the
movie’s height and width to 300px by accessing the document property box
(MODIFY>Document…). You may wish to
increase the frame rate for a smoother animation, but this is a matter of
preference and not necessary for this tutorial. I tend to set mine between 20-24 frames per second, depending on my
mood.
Now that we have a blank movie we should label the layer in
which we will be working. Granted, our project
is not terribly complex, but it is always a good idea to label and organize all
of your work in Flash. It makes for less headaches (and consequently less spent on
aspirin). For this example, I will name
my layer by double clicking over the layer’s description and entering the
ever-creative description of “ShapeTw.”
Insert
a blank key-frame in frame one of our ShapeTw layer
(INSERT>Blank Key-Frame). Once all of
our set-up is complete we can begin drawing on the stage; I’ve decided I want
to help evolution along a bit and create a shape tween to morph a pathetic-looking camel into a cool-looking penguin… bright yellow,
of course!
Using the pencil tool I proceed to create my fantastic work
of art. I can fine-tune any of the lines
by using the subselection tool, and once I am happy
with the drawing I can fill the outline in using the paint bucket tool. It is considered good practice to always
convert objects on the stage to symbols, but this is a time when you need to
put that habit to the side. Shape
tweening will not work between symbols.
And while I’m on the subject of good habits, remember to
save your work often! Nothing would ruin
our day more than having a sudden power failure or system freeze and losing all
of the hard work we’ve invested in drawing our lovely camel.
Now we need to draw our penguin so that Mr. Camel has
something into which he can evolve. Select any frame later in ShapeTw’s timeline
and convert it into a blank keyframe (INSERT>Blank Keyframe). I
chose frame 20; we draw our penguin within this new keyframe. Afterwards, save your work… we wouldn’t want
to lose Mr. Penguin, either!
Return to the first frame within ShapeTw and select it. Access the keyframe’s properties (for Flash MX use
WINDOW>Properties and for Flash 5 use WINDOW>Panels>Frame) and select
shape from the Tween drop-down box. The frames within the timeline between our
camel and penguin will display a tween arrow and tint
green (if the tinted frames option has been turned off a green tween arrow will appear between the frames). Save your movie and give it a test run
(CONTROL>Play).
 |
As you can see our shape tween didn’t come out exactly the way we expected it. Simple changes like transforming a circle to a square are easy, but when
it comes to more complex shapes such as our camel and penguin the transition
seems to take a quick detour by first morphing into a map of
.
 |
At this point, we have four options: 1) Pay Minnesota a
royalty fee for every time it makes an appearance in our movie, 2) Animate the tween by hand frame by frame, 3) Just give up and forget we
even started this stupid project, or 4) Use what Flash calls Shape Hints.
Shape Hints are sets of small markers that we can fix to
various points on our camel and corresponding points on our penguin. Flash then takes these points into
consideration as it generates the tween and matches
them up to one another resulting in a more controlled transition.
Go to frame 1 of ShapeTw and
select (in Flash MX) MODIFY>Shape>Add Shape Hint or (in Flash 5)
MODIFY>Transform>Add Shape Hint. A
small, red, circle labeled with the letter A appears in the center of the
screen—this is the Shape Hint!
Make sure that the Snap to Objects option is active
(VIEW>Snap to Objects) and move the Shape Hint onto a line of our
camel. Now go to the frame containing
our penguin where you will see another red circle labeled with the letter
A. Remember “insert tab A into slot
B?” Well, this is it… only it’s going to
be “match point A to point A.” Move the
Shape Hint into it’s desired corresponding position
along the line of our penguin.
 |
Once matched up, the Shape Hints will turn green. If we were to return back to our camel screen
we would see that those Shape Hints have turned yellow. If we were to move a Shape Hint off of it’s line, it would turn red.
To remove a shape hint completely we could either select and
drag the Shape Hint off of the stage area or we could use the context-sensitive
menu item Remove Hint (right click for PCs, control+click for Mac). To clear all of the hints
select (in Flash MX) MODIFY>Shape>Remove All Hints, (in Flash 5)
MODIFY>Transform>Remove All Hints, or the context-sensitive menu item
Remove All Hints.
I’ve found that sometimes fewer Shape Hints are more
productive. Don’t try to create a
600-dot connect-the-dots game with them; there’s only 26 letters in the
alphabet and so you’re only going to have a maximum of 26 Shape Hints. And there comes a point where excessive shape
hinting actually causes undesired consequences (although some of these quirks
can create pretty interesting effects that would be to difficult to draw in any
other manner). Just drag the playhead across the timeline to see how each Shape Hint
matching affects your tween and adjust accordingly before
adding the next hint.
 |
Once all the shape hints are in place, save your movie and give it another test
run. You’ll find that the transition is
much smoother and you’ll be paying less royalty fees to
!
Taken from: http://www.flashkit.com/tutorials/Animation/Shape_Tw-Timothy_-866/index.php