Home / Articles / Adobe Flash / Animating Shapes with Shape Tweens in Adobe Flash Professional CC (2014 release)

Animating Shapes with Shape Tweens in Adobe Flash Professional CC (2014 release)

Article Description

You’ll start the lesson by viewing the animated logo that you’ll create as you learn about shape tweens and masks in Flash, in this chapter from Adobe Flash Professional CC Classroom in a Book (2014 release).
Creating a Shape Tween

Creating a Shape Tween

A shape tween requires at least two keyframes on the same layer. The beginning keyframe contains a shape drawn with Flash’s drawing tools or imported from Illustrator. The ending keyframe also contains a shape. A shape tween interpolates the smooth changes between the beginning keyframe and the end keyframe.

Establish keyframes containing different shapes

In the following steps, you’ll animate the flame that will sit on top of the company name.

  1. Select frame 40 for all three layers.
  2. Choose Insert > Timeline > Frame (F5).
  3. Flash inserts additional frames to all three layers up to frame 40.

  4. Lock the text layer and the glow layer. This prevents you from accidentally selecting or moving the graphics in those layers.
  5. Right-click/Ctrl-click on frame 40 in the flame layer and select Insert Keyframe, or choose Insert > Timeline > Keyframe (F6).
  6. Flash inserts a new keyframe at frame 40, and copies the contents of the previous keyframe into the second keyframe.

    You now have two keyframes on the Timeline in the flame layer: a beginning keyframe at frame 1, and an end keyframe at frame 40.

  7. Move the red playhead to frame 40.
  8. Next, you’ll change the shape of the flame in the end keyframe.

  9. Choose the Selection tool.
  10. Click off the shape to deselect it. Click and drag the contours of the flame to make the flame skinnier.

The beginning keyframe and the end keyframe now contain different shapes— a fat flame in the beginning keyframe, and a skinny flame in the end keyframe.

Apply the shape tween

Next, you’ll apply a shape tween between the keyframes to create the smooth transitions.

  1. Click on any frame between the beginning keyframe and the end keyframe in the flame layer.
  2. Right-click/Ctrl-click and select Create Shape Tween. Or, from the top menu choose Insert > Shape Tween.
  3. Flash applies a shape tween between the two keyframes, which is indicated by a black forward-pointing arrow.

  4. Watch your animation by choosing Control > Play, or by clicking the Play button at the bottom of the Timeline.

Flash creates a smooth animation between the keyframes in the flame layer, morphing the shape of the first flame into the shape of the second flame.

4. Changing the Pace | Next Section Previous Section