Animation Learning Guide for Flash: Preset and custom eases

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 (see Figure 50).

This content requires Flash

Download the free Flash Player now!

Figure 50. This SWF file shows the following eases: regular easing (aka Simple Slow) applied using the Motion Property inspector applied to the topmost instance, the Sine Wave preset ease applied to the middle instance, and a custom ease applied to the bottom instance. The vertical line that animates from left to right has no easing applied.

If you were a Flash user previous 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 (see Figure 51). Scroll down to the Ease section, and change the number of bounces to 5.

   

   Figure 52. Apply Bounce In to the Y property.

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.

When you added an ease to the animation in the previous exercise, you saw a list of preset eases in the Add menu. Except for the Custom ease, all of these eases are preset and not editable apart from their overall value. For example, you can set how "springy" you want the Spring ease to be, how many times you want an instance to bounce, or how fast you want an instance to ease out by choosing a value between 1 and 100.

After you apply any ease to a graphable property, any hot text in the Value category becomes dimmed. The reason this happens is the hot text displays the actual eased value of the tweened animation, and eases are not editable. The hot text (tweened values) are being controlled by the easing equation, so there are limitations to what that value can be. Instead, you need to edit the solid curve in the graph using the control points or other Bezier editing tools. Alternatively, you can disable the ease and use the hot text controls, then re-enable the ease and see the outcome of your changes.

Page 2 of 6

Previous Page

Next Page