Home / Articles / Adobe Flash / Animating Symbols in Adobe Flash Professional CC (2014 release)

Animating Symbols in Adobe Flash Professional CC (2014 release)

Chapter Description

In this excerpt from Adobe Flash Professional CC Classroom in a Book (2014 release), learn how to use Flash Professional to change almost any aspect of an object—position, color, transparency, size, rotation, and more—over time. Motion tweening is the basic technique of creating animation with symbol instances.

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 from the Properties inspector. 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 190, 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 frames 75 to 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/Ctrl-click on frame 101 and choose Split Motion.

    Flash cuts the motion tween 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/Ctrl-click, and choose Split Motion.

    Flash cuts the motion tween into two separate tween spans.

  4. In the Right_car layer, select frame 107, right-click/Ctrl-click, and choose Split Motion.

    Flash cuts the motion tween into two separate tween spans. The motion tweens of all three cars are split.

Setting eases of a motion tween

You’ll apply an ease-in to the motion tweens of the approaching cars to give them a sense of weight and 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 inspector, enter 100 for the Ease value.

    04fig76.jpg

    Flash applies an ease-out effect 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 inspector, enter 100 for the Ease value.

    Flash applies an ease-out effect 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 inspector, enter 100 for the Ease value.

    Flash applies an ease-out effect to the motion tween.

  7. Enable the Loop Playback option at the bottom of the Timeline, and move the front and rear markers to bracket frames 60 to 115.

  8. Click Play (Return/Enter).

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

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