How do I avoid sloppy shape tweens? Here’s how David Witt explains it in his Flash Basics course:
When Flash was first introduced, shapetweening was one of its most unique features. While motion tweens are used exclusively on movie clips, shape tweens are exclusively used on shapes. Used properly, shape tweens can create visually interesting nonlinear animation effects. Unfortunately, they are often unpredictable and difficult to work with.
Here’s what David considers a sloppy shape tween which he describes as “fractured and unclean”:
Another problem with my example of shape tweening here is that the animation does not loop smoothly. With short forms of animation like this, it is always better to have a smooth loop than a hard cut. Furthermore the font has serifs (those little points on the ends). shape tweens work best with very simple shapes so a font like Arial Black would be a better choice than Times New Roman.
This version eliminates the shattered shapes, loops the animation, and uses a simpler font.
How does he achieve this transformation? Here’s his explanation:
The oval is a solid shape until the tween begins. At that point I have a new Keyframe wherein the oval has been cut into four pieces, one for each of the letters.
Two holes have been cut in the first piece to allow for the "B" and one hole has been cut in the last piece for the "e." The middle two pieces do not need holes because the letterforms they become do not have enclosed areas.
The lesson here? Trying to morph between objects that will require going from one shape to several, or from a solid object to an object with holes cut in it, will shatter shape tweens.