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 Looping Animation

Creating a Looping Animation

Your flame should flicker back and forth continuously for as long as the logo is onscreen. You can create a seamless loop by making the first and last keyframe identical, and by putting the animation inside a movie clip symbol. As you recall from the previous lesson, a movie clip timeline loops continuously, independently of the main Timeline.

Duplicating keyframes

Make the first keyframe identical to the last keyframe by duplicating its contents.

  1. Right-click/Ctrl-click the first keyframe on the flame layer and select Copy Frames. Or, from the top menu, choose Edit > Timeline > Copy Frames.
  2. Flash copies the contents of the first keyframe to your clipboard.

  3. Right-click/Ctrl-click the last keyframe on the flame layer and select Paste Frames. Or, from the top menu, choose Edit > Timeline > Paste Frames.
  4. Flash pastes the contents of the first keyframe into the last keyframe. The first and last keyframes now contain identical flame shapes.

    Previewing the loop

    Use the Loop playback at the bottom of the Timeline to preview your animation.

  5. Click the Loop Playback button at the bottom of the Timeline, or choose Control > Loop Playback.
  6. When the Loop Playback option is depressed, the playhead will go back to frame 1 and continue to play when it reaches the end of the Timeline.

  7. Extend the Markers to include all the frames on your Timeline (frames 1 through 40), or click on the Modify Markers button and select Marker Range All.
  8. The Markers determine the range of frames that loop during playback.

  9. Click the Play button, or choose Control > Play.

The flame animation plays and loops continuously. Click the Pause button or the Enter/Return key to stop the animation.

Inserting the animation into a Movie Clip

When your animation plays in a movie clip symbol, the animation loops automatically.

  1. Select all the frames on the flame layer, and right-click/Ctrl-click and select Cut Frames. Or, choose Edit > Timeline > Cut Frames.
  2. Flash cuts the keyframes and shape tweens from the Timeline.

  3. Choose Insert > New Symbol (Command/Ctrl+F8).
  4. The Create New Symbol dialog box appears.

  5. Enter flame as the name of the symbol, and choose Movie Clip as the Type. Click OK.
  6. Flash creates a new movie clip symbol, and puts you in symbol-editing mode for your new symbol.

  7. Right-click/Ctrl-click the first frame on your movie clip timeline and select Paste Frames. Or, choose Edit > Timeline > Paste Frames.
  8. The flame animation from the main Timeline is pasted into your movie clip symbol’s timeline.

  9. Click on the Scene 1 button on the Edit Bar at the top of the Stage, or choose Edit > Edit Document (Command/Ctrl+E).
  10. You exit symbol-editing mode and return to the main Timeline.

  11. Select the flame layer, which is currently empty. Drag your newly created flame movie clip symbol from the Library panel to the Stage.
  12. An instance of the flame movie clip symbol appears on the Stage.

  13. Choose Control > Test (Command+Return/ Ctrl +Enter).

Flash exports the SWF in a new window, where you can preview the animation. The flame flickers continuously in a seamless loop.