Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • DownloadDownload
  • PrintPrint

Easing

Easing refers to the way in which a motion tween proceeds. In the most basic sense, it can be thought of 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 momentum, and then stop suddenly. Or, the object can start off quickly, and then gradually come to a halt.

Easing is best visualized in the Motion Editor. The graphs that connect one keyframe to another are usually straight lines, which indicate that the change from one value to the next value proceeds linearly. However, if you want a more gradual change from the starting position (known as an ease-in), the line would be curved near the beginning keyframe, indicating a slower start. A gradual slowdown (known as an ease-out) would be represented by a curve near the ending keyframe.

Setting eases of a motion tween

You can create an ease by customizing the curvature of the property graph in the Motion Editor.

1.
In the Motion Editor, right-click/Ctrl-click the second keyframe in the Alpha property and choose Smooth point.

Control handles appear from the keyframe, which you can move to change the curvature of the line.

2.
Click and drag the control handle to create a smooth curve approaching the 100% Alpha value.

The transition from 0% to 100% Alpha slows down as it approaches 100% (ease-out).

3.
Right-click/Ctrl-click the first keyframe in the Alpha property and choose Smooth point.

Control handles appear from the keyframe, which you can move to change the curvature of the line.

4.
Click and drag the control handle to create a smooth curve as the line begins from 0%.

The transition from 0% to 100% Alpha begins gradually from 0% in addition to slowing down. The total effect of the S-shaped curve is both an ease-in and an ease-out effect.

Note

You can also apply ease-in and ease-out effects from the Properties inspector. In the Timeline (not the Motion Editor), select the motion tween. In the Properties inspector, enter a value for the ease between –100 (ease-in) to 100 (ease-out).

Note

Eases applied via the Properties inspector will be applied globally to all the properties throughout the entire motion tween. With the Motion Editor, you have precise control over individual properties and eases between keyframes.

Using preset eases

Easing can be very powerful and can be used to create many specialized motions. For example, a bouncing motion can be created with just two positional keyframes and an ease that moves the object back and forth between the two positions.

For the next example, you’ll return to the motion picture project and add a preset ease to the motion of the car. You’ll make the car shudder up and down to mimic the motion of an idling car. The motion tween will be created inside the movie clip symbol of the car.

1.
Continue with your Flash project in progress, 04_workingcopy.fla.

2.
In the Library panel, double-click the movie clip symbol called carLeft.

Flash takes you to symbol-editing mode for the movie clip symbol. Two layers are inside this symbol: the top layer called lights and the bottom layer called smallRumble.

3.
Lock the top lights layer.

4.
Right-click/Ctrl-click on the car and choose Create Motion Tween.

Flash converts the current layer to a Tween layer so you can begin to animate the instance.

5.
Move the red playhead to the end of the Timeline.

6.
Choose the Selection tool.

7.
Move the car down about 5 pixels.

Flash creates a smooth animation of the car moving down slightly.

8.
Click on the motion tween in the Timeline and open the Motion Editor.

9.
Click the Plus icon on the Eases category and choose Random.

The Random preset ease appears.

10.
Select the Random ease.

The Random ease jumps from one value to the next in random intervals. This is shown graphically as a series of abrupt stair steps.

11.
Change the Random value to 15.

The frequency of random jumps increases based on the Random value.

12.
Select the Basic motion category.

13.
In the Ease pull-down menu next to the Basic motion category, choose Random.

Flash applies the Random ease to the positional changes of the motion tween. Instead of a smooth change in the y-position, Flash makes the car jerk up and down randomly, simulating a rumbling, idling car. Since the animation is nested in a movie clip, choose Control > Test Movie > in Flash Professional to preview the motion.

Classic Tween Model

In previous versions of Flash Professional (CS3 and earlier), motion tweens were created by first establishing keyframes in the Timeline, then changing one or more of the properties of the instance, and then applying a motion tween between the two keyframes. If you are more comfortable working with this older way of animating, you can do so by relying on the Classic Tween option. Select the first keyframe containing your instance, and then choose Insert > Classic Tween. Flash applies a classic motion tween to your Timeline. The Motion Editor, however, is not available for classic tweens.