Home / Articles / Animating Symbols

Animating Symbols

Easing

Easing refers to the way in which a motion tween proceeds. You can think of easing as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, then build up speed, and then stop suddenly. Or, the object can start off quickly and then gradually slow to a halt. Your keyframes indicate the beginning and end points of the motion, but the easing determines how your object gets from one keyframe to the next.

A simple way to apply easing to a motion tween is to use the Properties panel. Easing values range from –100 to 100. A negative value creates a more gradual change from the starting position (known as an ease-in). A positive value creates a gradual slowdown (known as an ease-out).

A more advanced way of applying easing is to use the new Motion Editor, which you’ll learn about in the next lesson.

Splitting a motion tween

Easing affects the entire span of a motion tween. If you want the easing to affect only frames between keyframes of a longer motion tween, you should split the motion tween. For example, return to the 04_workingcopy.fla file of the cinematic animation. The motion tween of the car in the Left_car layer begins at frame 75 and ends at frame 191, at the very end of the Timeline. However, the actual movement of the car starts at frame 75 and ends at frame 100. You’ll split the motion tween so you can apply an ease to the tween just from frame 75 to frame 100.

  1. In the Left_car layer, select frame 101, which is the frame just after the second keyframe where the car ends its movement.

  2. Right-click frame 101 and choose Split Motion.

    The motion tween is cut into two separate tween spans. The end of the first tween is identical to the beginning of the second tween.

  3. In the Middle_car layer, select frame 94, right-click, and choose Split Motion to cut the motion tween into two separate tween spans.

  4. In the Right_car layer, select frame 107, right-click, and choose Split Motion to cut the motion tween into two spans.

    The motion tweens of all three cars have now been split.

Applying eases to motion tweens

You’ll apply an ease-in to the motion tweens of the approaching cars to give them a sense of weight and and to make them decelerate as real cars would.

  1. In the Middle_car layer, select any frame between the first and second keyframes of the first motion tween (frame 70 to frame 93).

  2. In the Properties panel, Ease section, enter 100 for the Ease value.

    04fig86.jpg

    This applies an ease-out to the motion tween.

  3. In the Left_car layer, select any frame between the first and second keyframes of the first motion tween (frame 75 to frame 100).

  4. In the Properties panel, enter 100 for the Ease value to apply an ease-out to the motion tween.

  5. In the Right_car layer, select any frame between the first and second keyframes of the first motion tween (frame 78 to frame 106).

  6. In the Properties panel, enter 100 for the Ease value to apply an ease-out to the motion tween.

  7. Select Loop at the bottom of the Timeline and move the start and end markers in the Timeline header to frames 60 and 115, respectively.

  8. Click Play (Enter/Return).

    Animate plays the Timeline in a loop between frames 60 and 115 so you can examine the ease-out motion of the three cars.

14. Frame-by-Frame Animation | Next Section Previous Section

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