Shape Tween

How to change the physical shape of an object in the Flash stage.

Shape tweening is about making an object on the Flash stage change its physical shape. For example, we can make a circle become a rectangle.

To perform a shape tween, we have to make use of “Empty Keyframes”, as this allows us to create a gap in the timeline, which will allow us to create other shapes or objects.

For this chapter, we’ll do a simple example, let’s start:

1- At the top left of the stage, draw 3 rectangles with the “Rectangle” tool.

In the timeline, you can see that we are using frame 1, layer 1.

2- Click on frame 4, then press the F6 key, to create keyframes.

3- Then click on frame 17 and press the F7 key to create an empty keyframe.

Look at the timeline, and you’ll see that the playhead is on a frame that contains nothing; It is exactly in that empty frame where we will create the image in which the previously drawn rectangles will be transformed.

4- Click on the “Text Tool” from the tools panel and in the lower right part of the stage, write the word “WEB”, then click on the “Arrow Tool”, with the text selected, do the following combination keys: CTRL + B, twice.

The CTRL + B key combination will separate the text so Flash will interpret each letter as an individual image, otherwise Flash will interpret the word “WEB” as a single image and shape tweening will not work.

5- Now go to frame 30 and press F6 to lengthen the duration of the objects on the timeline.

6- Go back to frame 4, click on it, and go to the “Properties” panel that is normally located at the bottom of the Flash environment, (if you can’t see it, go to the main menu, click Window>Properties ); In the aforementioned panel there is an option called “Interpolation” (Tween), you can display the combo of options and choose the “Shape” option.

You can see that in the timeline of layer 1, the color green appears along with an arrow that should extend from frame 4 to frame 17; that’s exactly where the shape interpolation takes place; as the following image shows:

Now you can test the movie (CTRL + Enter)