Animation Tip: Flash Shape Tweens

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

Today, we'll look at an easy way to create morph-style animation for your website using the Shape Tween feature in Macromedia Flash.

Basic Concepts

First off, for those of you not in the know, I'll define some of the terms Macromedia uses in Flash. The first, and most basic is tween. Tween is a shortened, and thus cooler, form of the word between. Flash lets you set the beginning and end of your action, and then it automatically fills in all the motion between. Thus tweened animation.

The other basic concept you'll need to understand for this exercise is the idea of keyframes. A frame is one picture in the series of pictures that make up an animation or movie. A frame can take any length of time-- standard video runs at 30 frames a second, film runs at 24, and Web animation usually runs at around 15. Keyframes are the frames where you set the beginning and end of your animation. In the space between your keyframes, Flash will change the scene to seamlessly transform it.

Simple Shape Tweening

Creating a shape tween is pretty simple. Here's what you do:

Draw a square using the square tool. You can play with the fill options at the bottom of the toolbar to fill it with any color you want. I chose a red gradient. There's just something about red cubes that really works for me.

Once you have your square, go to frame 10 in your timeline and add a keyframe there by using the menu command Insert Keyframe. This will make your morph take a bit less than a second when played back on the Web. In frame 10, delete the square and draw a circle using the circle tool.

Now go back to frame 1 and double click the keyframe mark (the little black dot). This will bring up the Frame Properties box. Click on the Tweening tab, and select Shape from the Tweening options. A green arrow should appear between the keyframes to show the shape tween.

That's it. You're done. Hit play to see your shape tween in all its glory!