Shape Tweening

The previous lesson showed you how to do motion tweening. This lesson will show you how to use shape tweening. Shape tweening involves changing the shape of a graphic or changing one graphic into another (morphing).

Changing One Graphic into Another

 1. Run Flash 4.0 from the Start menu by choosing Macromedia Flash 4 and then Flash 4 to obtain a blank stage for the first frame. If you are already in Flash use the New icon from the Tool Bar to create a new project.

2. Click on Modify, then Movie from the pull-down menu to obtain the Movie Properties dialog box. Set the size of the movie to a Width of 200 and a Height of 200. Set the Background color to a Dark Blue. Click OK to continue.

3. Click the Rectangle tool. Set the Fill Color to a Radial Rainbow Gradient Fill. Draw the rectangle in the middle of your Stage. Select this graphic using the Edit, Select All command and use the Modify, Align command to center it on the Stage. Make sure you check Align to Page as well as centering horizontally and vertically.

4. Click on Frame 20 and use the Insert, Blank Keyframe command.

5. Use the Ellipse tool and draw an ellipse. Use the same procedures as above to center it on the Stage.

6. Right-click over Frame 1 and select Properties. From the Tweening tab, select Shape. Accept the defaults on this screen. You might want to choose Angular later on to see the differences between Distributive and Angular. Click OK to continue.

Notice that this time, the Timeline shows an arrow between the two Keyframes and the frames are green, indicating a shape tweening. Recall that motion tweening was indicated with blue frames and the arrow.

7. Click the Play button on the Controller to view this animation.

8. Save this file as lesson10a.fla.

9. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson10a.

10. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.

Changing from One Graphic to Another

1. Run Flash 4.0 from the Start menu by choosing Macromedia Flash 4 and then Flash 4 to obtain a blank stage for the first frame. If you are already in Flash use the New icon from the Tool Bar to create a new project.

2. Click on Modify, then Movie from the pull-down menu to obtain the Movie Properties dialog box. Set the size of the movie to a Width of 200 and a Height of 200. Set the Background color to a Light Purple. Click OK to continue.

3. Open the Graphics Library and drag the Mouse to Frame 1. Make the Mouse slightly smaller.

4. Click on Frame 20 and use the Insert, Blank Keyframe command.

5. Drag the Elephant to this frame. Resize this symbol to make it fit the Stage. Use the Modify, Break Apart command three times to complete break apart this symbol.

6. Return to Frame 1 and do the same using the Modify, Break Apart command until you have completely broken apart the Mouse symbol (four times).

 7. Right-click over Frame 1 and select Properties. From the Tweening tab, select Shape. Accept the defaults on this screen. You might want to choose Angular later on to see the differences between Distributive and Angular. Click OK to continue.

 8. Click the Play button on the Controller to view this animation.

9. Save this file as lesson10b.fla.

10. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson10b.

11. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.

Changing From a Graphic to Text

1. Run Flash 4.0 from the Start menu by choosing Macromedia Flash 4 and then Flash 4 to obtain a blank stage for the first frame. If you are already in Flash use the New icon from the Tool Bar to create a new project.

2. Click on Modify, then Movie from the pull-down menu to obtain the Movie Properties dialog box. Set the size of the movie to a Width of 300 and a Height of 200. Set the Background color to a Dark Blue. Click OK to continue.

3. Use the Ellipse tool and draw an ellipse using a Rainbow Radial Gradient Fill Color. Center the ellipse on the Stage using the procedures you used above.

4. Click on Frame 20 and use F7 to create a Blank Keyframe.

5. Use the Text tool to create a text box (use Arial, Bold, 20) and type FLASH 4. Use the Scale tool to make it fit a good portion of the Stage. Center the text on the Stage as you did the ellipse.

6. Use the Modify, Break Apart command to break apart the text.

7. Click the Paint Bucket tool, select a Rainbow Gradient Fill Color and click over the text.

8. Right-click over Frame 1, select Properties, then Tweening. Choose the Shape Tweening option.

9. Click the Play button on the Controller to view this animation.

10. Save this file as lesson10c.fla.

11. Use the File, Export command to obtain the Export Movie dialog box. Locate a directory where you are storing your files and give this movie a name, ie lessson10c.

12. Accept the defaults from the Export Flash Player dialog box. Click OK to conclude the Export process.

The finished Movie should look similar to the one below.