Animation Tip: Flash Shape Hints

Want to breathe some life in to your website? You need to get animated!

In a previous lesson, I showed you how to do simple morph effects using Flash's shape tween feature. But what if you want to do a morph that's not so simple? What if, for instance, you wanted to change the name of an entire website? Sometimes Flash needs a little help with shape tweens. That's where shape hints come in.

Shape Tweens: A Quick Recap

The shape tween feature of Macromedia Flash provides an easy way to morph one object into another. I covered shape tweens in a previous lesson, but here's a quick recap.

In frame 1 of your animation, draw a simple shape. Then add a keyframe further on in your timeline. Draw a different shape there. Now go back to the first keyframe and double-click it. In the dialog box that comes up, go to the Tweening tab and select "shape" from the options. (If that went by too fast, all the details can be found here.)

However, if you try to do a simple shape tween between more complex graphics, such as a webpage logo and personal logo, you often get a jumbled mess in the middle.

Flash tries as hard as it can to figure out the best way to blend one logo into the next, but the program often gets confused when faced with complex shapes. Luckily, you can help it out by adding shape hints.

Shape Hints to the Rescue!

To add a shape hint, start at the first frame of your animation and use the menu command Modify | Transform | Add Shape Hint. Place the shape hint on a part of the web logo that you want to match to part of the personal logo. Then go to the end of the animation and move the corresponding shape hint to the matching part of the personal logo.

Keep adding shape hints until the shape tween behaves just the way you want it. A brief warning: shape hints can act in pretty strange ways sometimes. You'll probably have to spend a little time experimenting with different configurations before your shape tween does just what it should.