Morphing
Shapes in Flash
Home > Build
> Software > Flash
by Don Herion
(1)
(2) (3) (4)
Morphing with a Smile
Of course, morphing
circles into squares can get boring. You can morph more complex shapes or multiple
shapes including text, fills, line thickness, opacity, and more. Here is a more
involved 'morph' project involves animating a smiley face. I will also provide
a few tips on tools like 'onion skinning' and ' shape hints.' After this tutorial
you will see some of the possibilities using Flash 'morphing.'
1)
First create your smiley face, giving each element its own layer. Use your 'guidelines'
and 'snap to' commands to align the various elements. This is my 'Smiley' before
he sees his groovy haircut. When he does his eyes will bolt, his mouth with register
horror, his color will change, and his hair will stand on end and turn gray.
 |  |
| 'Smiley' before he sees his new haircut |
Every part of 'Smiley' is on its own layer. |
2)
The first thing I want to animate will be the head shape and color. I insert a
'Keyframe' (F6) at frame 15. Because this shape is not going to change drastically
I used simple 'scale tweening.' I squeezed the head horizontally and lengthened
it vertically. This will be my calm before the storm. I then selected Frame 1
and selected 'shape' tweening in the 'Frame Palette.' Now for the 'horror' expression.
I decided to convey this by scaling up the shape about 15 percent. I set a 'Keyframe'
(F6) for frame 25. At frame 25 I enlarged the shape using the Modify - Transform
- Scale and Rotate - command. I then changed his 'bright yellow' complexion to
a 'pale, drab yellow.' Now select 'Keyframe' 15 and apply a 'shape' tween from
the 'Frame Palette.' Your basic head animation is done.
 |
| Here is the head layer |
3) The
next morph will be the mouth. I wanted to begin making an 'oh' shape and then
quickly change it to a horrific expression when he sees his new hairstyle in a
mirror. Now it might be possible to reshape the mouth using the toolset but morphing
is far more efficient. Using the same technique I did in the first tutorial I
inserted a 'Blank Keyframe' (F7) at Frame 15. To properly line up your shapes
click the 'onion skinning' feature and shift the left 'start onion skin' marker
to frame 1. Now all tweened frames 1 - 14 are barely visible. Now you will be
able to position the new mouth precisely.
 |  |
| Click 'onion skin' under the timeline |
Shift the 'start onion skin' to Frame 1 |
 |
| Use onion skinning to align elements |
4)
Create a simple circle over the mouth shape. Fill black. Now select Frame 1 and
bring up the 'Frame palette.' Apply 'shape' tweening. Since I want the mouth to
go 'oh' casually I set my 'ease' slider to 70. Positive values decelerate an animation
tween to the next keyframe while negative values do the reverse, accelerating
it. A '0' setting distributes the tweening effect evenly. Play with the slider
to create you effect you want.
 |
| The 'ease' slider can |
