Workshop Mission Services Portfolio Content Contact
  bookmark me  
Home > Content

(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

(1) (2) (3) (4)

 

1.818.509.2649