• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Creating Animation > Creating a Shape Tween

Creating a Shape Tween

Shape tweening is useful for morphing shapes between end points. Flash can shape-tween only shapes, not groups, symbols, or editable text. If you want to tween a group, symbol, or editable text, you must first turn it into a shape by breaking it up completely (choose Modify > Break Apart until everything has been turned into a shape).

You can shape-tween multiple shapes in a layer, but for the sake of organization, putting each shape in its own layer usually is easier.

You should still have neptune17.fla open as you begin this exercise.

Choose Insert > New Symbol. When the Symbol Properties dialog box opens, name the new symbol Animated Text: Reservations, set the Behavior to Movie Clip, and click OK.

You're going to make an animated movie clip for use in a button. When you choose Insert > New Symbol, Flash creates a new empty symbol and takes you into symbol-editing mode. Flash adds the symbol to the movie's library automatically.

Select the text tool in the toolbox, and create a text box on the stage. In the Character panel, set the font to 18-point Arial in cyan (#33FFFF). Type Reservations in the text box.

Leave the other settings in the Character panel at their defaults. Font tracking should be set to 0, kerning should be on, and the character position should be Normal.

Use the Align panel to center the text box horizontally and vertically on the stage.

Make sure that the To Stage button is selected when you click the Align Horizontal Center and Align Vertical Center buttons in the Align panel. If it's not, the text box won't move.

Choose Modify > Break Apart.

The text box should still be selected. If it's not, use the arrow tool to select it before choosing Modify > Break Apart.

When you break text apart, you turn it into its component shapes, which is what you need to do to create a shape tween. You cannot shape-tween symbols, editable text, groups, or anything else that has a solid bounding box. You can shape-tween only shapes.

Select frame 5, and choose Insert > Blank Keyframe. With the oval tool, draw an oval with no stroke and a cyan fill.

Now you need to position this oval in the correct place on the stage.

Select the oval. In the Info panel, set the width to 130 and the height to 20. Center the oval horizontally and vertically on the stage.

This oval is the shape into which your text is going to morph.


Use the Align panel to position the oval. This method is easier than trying to specify a location in the Info panel.

Select frame 1. In the Frame panel, choose Shape from the Tweening pop-up menu.

You now have a shape tween between frames 1 and 5 of the movie clip. When you set the tweening to Shape, the affected frames are highlighted green to indicate that a shape tween occurs there. If you drag the playhead back and forth between frames 1 and 5, you should see that Flash created several intermediate shapes between the Reservations text in frame 1 and the oval in frame 5.

Now you have to make the oval turn back into text.

Select frame 1, and choose Edit > Copy Frames. Then select frame 10, and choose Edit > Paste Frames. Select frame 5, and set the tweening to Shape in the Frame panel.

The shape tween is complete. The animation starts with some text in frame 1, tweens the text into an oval by frame 5, and then tweens back to the text by frame 10.

Save your movie as neptune18.fla in the MyWork folder.

You're done making your shape-tween. Now you're going to take the movie clip that contains the shape tween and add it to a button.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint