Flash CS3
Shape Tweens

With a shape tween, you draw a shape at one specific time and change that shape, or draw another one, at a later point in time. Flash works out what the shape should look like in between the two shapes you have.

1. Start by launching Adobe Flash CS3 and creating a new Flash document.

2. Select the rectangle drawing tool and draw a rectangle roughly like you see in the screenshot. Don't worry about trying to match the size, colour or position exactly. This is just for practice.

CS3 Screenshot

You might have noticed that the empty frame 1 on layer 1 of the timeline is now greyed out. This is what happens when a frame on a layer has some content. When it has no content, the timeline shows an unshaded frame.

3. Click with the right mouse button on frame 24 of the timeline. Choose to add a Blank Keyframe. We add a key frame because there is a change in what we see on the stage at this point.

(If you have not changed the frame rate from its 12Fps, then this animation will take 2 seconds exactly.)

4. Click and hold the left mouse button on the rectangle tool. A list of other shapes pops up. Choose the oval and draw an oval on frame 24 of layer 1 as you see in the screen shot.

CS3 Screenshot

Press CTRL & Enter to test the animation. So far nothing much happens. You see the square for a while and a quick flicker of the oval if you look carefully.

To add the shape tween, click on frame 1, the frame where the change is going to start.

Look at the bottom of the screen in the Properties Window. You should see a dropdown box labelled Tween. Select Shape tween from the list.

Your screen should look something like this,

CS3 Screenshot

Look carefully at the screenshot. The tween is represented in the timeline with a green arrow. If your screen shows a dotted arrow, then the tween has not been completed correctly. If this happens, review the instructions and have another go.