Home / Articles / Animating Symbols

Animating Symbols

Frame-by-Frame Animation

Frame-by-frame animation is a technique that creates the illusion of movement by making incremental changes between every keyframe. Frame-by-frame animation in Animate is similar to traditional hand-drawn cel animation where each drawing is on a separate sheet of paper, and it’s just as tedious.

Frame-by-frame animations increase your file size rapidly because Animate has to store the contents for each keyframe. Use frame-by-frame animation sparingly.

In the next section, you’ll insert a frame-by-frame animation inside the carLeft movie clip symbol to make it move up and down in a jittery fashion. When the movie clip loops, the car will rumble slightly to simulate the idle of the motor.

Inserting a new keyframe

The frame-by-frame animations inside the carMiddle and carRight movie clip symbols have already been done. You’ll finish the animation for the carLeft symbol.

  1. In the Library panel, double-click the carRight movie clip symbol to examine its completed frame-by-frame animation.

    Inside the carRight movie clip, three keyframes establish three different positions for the car and its headlights. The keyframes are spaced unevenly to provide the unpredictable up and down motion.

    04fig90.jpg
  2. In the Library panel, double-click the carLeft move clip symbol.

    You enter symbol-editing mode for the carLeft symbol.

  3. Select frame 2 in both the lights layer and the smallRumble layer.

    04fig92.jpg
  4. Right-click and choose Insert Keyframe (F6).

    Animate inserts a keyframe in frame 2 of the lights layer and the smallRumble layer. The contents of the previous keyframes are copied into the new keyframes.

    04fig93.jpg

Changing the graphics

In the new keyframe, change the appearance of the contents to create the animation.

  1. In frame 2, select all three graphics (the car and its two headlights) on the Stage (Edit > Select All, or Ctrl+A/Command+A) and move them down the Stage by 1 pixel. You can use the Properties panel to decrease the Y-position value by 1 pixel or press the Down Arrow key to nudge the graphics by 1 pixel.

    The car and its headlights move down slightly.

  2. Next, repeat the process of inserting keyframes and changing the graphics. For a random motion like an idling car, at least three keyframes are ideal.

  3. Select frame 4 in both the lights layer and the smallRumble layer.

  4. Right-click and choose Insert Keyframe (F6).

    Keyframes are inserted into frame 4 of the lights and smallRumble layers. The contents of the previous keyframes are copied into the new keyframes.

    04fig94.jpg
  5. Select all three graphics on the Stage (Edit > Select All, or Ctrl+A/Command+A) and move them up the Stage by 2 pixels. You can use the Properties panel or press the Up Arrow key twice to nudge the graphics by 2 pixels.

    The car and its headlights move up slightly.

  6. Test the idling motion by enabling the Loop Playback option at the bottom of the Timeline and click Play (Enter/Return).

15. Animating 3D Motion | Next Section Previous Section

There are currently no related articles. Please check back later.