Learning Adobe Flash CS4 Professional: Preset and custom eases

Easing refers to the gradual acceleration or deceleration during an animaton, which helps your tweens appear more realistic or natural. You might also use easing to apply a special kind of movement that makes animation tasks, such as “random” movement or a ball bouncing, quicker and easier. For example, you can apply eases to add a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change using a gentle ease curve. You can even add an ease to create a random appearance to one of your properties, such as x and y for random jittery movement, or alpha to create a random flicker.

Adding preset and custom eases to motion tweens

Flash provides two methods by which you can apply easing to a motion tween: You can specify an easing value for each motion tween you create using the Ease slider in the Motion Property inspector, or you can use the Motion Editor to apply either a preset or custom ease to one or more properties.

If you were a Flash user prior to CS4, eases are a bit different now; but it’s to your general advantage. To read a comparison between Flash CS4 and earlier versions, refer to Motion migration guide for Flash CS4 Professional. To learn how to create eases in Flash CS4, keep reading.

Using the Motion Property inspector

To apply easing to a motion tween using the Motion Property inspector:

  1. Create a new file and call it motionease.fla.
  2. Create a graphic with any of the drawing tools, select all of the graphics and then right/Control-click and choose Create Motion Tween. (Click OK to convert the drawing into a symbol). One second of frames are added to the timeline, but if necessary, drag the end of the tween span so it’s at least 24 frames long.
  3. Move the playhead to the last frame of the tween span, and then move the instance to another location on the Stage.
  4. With the tween span still selected, drag the Ease hot text (blue text next to “Ease”) in the Motion Property inspector (Window > Properties) or type in a value to adjust the rate of change between tweened frames:
    • To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the hot text to enter or type a negative value between –1 and –100.
    • To begin the motion tween rapidly and decelerate the tween towards the end of the animation, drag the hot text to enter or type a positive value between 1 and 100.
  5. Select Control > Test Movie to test the animation. Notice how the tween dots update on the Stage in the authoring environment after you apply the ease.

Using the Motion Editor

To apply an ease preset to a motion tween using the Motion Editor:

  1. Select the instance you applied easing to in the previous exercise, or open bounce-ease.fla.
  2. Select the tween span in the Timeline and option the Motion Editor.
  3. Scroll to the Eases category, click the Add button, and then select Bounce In from the menu. A Bounce In ease preset is added to the tweened instance, and is now available in all of the Ease menus for each property. You can change the default setting (number of bounces) using the hot text in the row. The changes you make are reflected in the dashed, non-editable graph to the right.
  4. Scroll to the Y property row in the Basic Motion category, and then choose Bounce In from the pop-up menu.

    You just applied the Bounce In ease to the Y property, and doing so automatically updates the instance on the Stage tweens (check this out yourself by scrubbing the playhead). You’ll also notice that two more things happen in the Y row: the hot text becomes read-only, and a dashed graph curve appears in the property’s graph. The hot text changes because the motion model takes control over how your instance animates when eased, and the hot text represents the eased (non-editable) value. The dashed curve represents the tweened value. This will update if you drag any of the property keyframes on the solid (editable) curve.

  5. Scroll down to the Ease section, and change the number of bounces to 5.

Notice that the graph for the Bounce Ease updates, as does the graph for the Y property row. Scrub the animation again to see the modified animation. You can find the finished version of this file in this learning guide’s source files, called bounce-ease-finished.fla.