Animation [Shape Tween]

by **Wingedge** Mon Jul 21, 2008 8:33 pm

Shape tweens allows us to change the shape of objects. This is similar to morphing where one object changes to another. In this session we shall make a simple shape tween in which a circle changes to a square.

One of the main differences between a shape tween and a motion tween is that shape tweens do not work with symbols or groups. If you want to apply shape tweens to groups or symbols, you have to first ungroup or break them apart.

Step 1
Open a new file. Change the name of the layer to something more descriptive. Highlight the first frame in the layer by clicking on it. Draw a circle using the oval tool Flash Oval tool. Align the circle to the center of the page. (Do not convert the circle to a symbol).
Now, right-click on frame 30 and from the menu select Insert Blank Keyframe. With the rectangle tool Flash Rectangle tool, draw a square and align it to the center of the page.

Step 2
Right-click on the first frame and choose Properties. Click on the Tweening tab and select Shape from the Tweening drop down menu. Click OK.

Step 3
You must have noticed that Shape tweens have a light green color instead of light purple for motion tween. Your layer should resemble the one below.
Shape tween
Play the movie to see the shape tween in action.

There are times when you might want to use a shape tween on a symbol. Since shape tweens will not work on groups or symbols you would first have to ungroup or break the object. To break or ungroup an object repeartedly click on Modify - Ungroup or Modify - Break Apart till these options are 'grayed' out.
Shape tweens between text and an object stored as a symbol

Start a new Flash file. Draw a circle and convert it into a symbol. Name this symbol circle and make sure that Behavior is set to Graphic.
Delete this symbol from the stage (with the symbol selected press the backspace key on the keyboard).
Using the text tool Flash text tool insert some text onto the stage. Convert this into a symbol named text with Behavior set to Graphic.
Delete this symbol from the stage.

Now, hightlight the first frame of the layer and drag the circle symbol on it. Place it near the top-left corner of the movie. Click Modify - Break Apart.
With frame 30 hightlighted, right-click and insert a blank keyframe. Drag an instance of the text symbol on the stage and place it near the top-right corner of the stage. Click Modify - Break Apart; however, the Break Apart option does not 'gray out' on the first time. So repeat this process. Click Modify to confirm that the Break Apart and Ungroup options are both grayed out.
Right-click on the first frame and select Properties from the menu. In the Frame Properties window, click on the Tweening tab and select Shape from the Tween drop down menu.