Animation Learning Guide for Flash: Preset and custom eases

In Adobe Flash Professional CS5 easing refers to the gradual acceleration or deceleration during an animation, 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.

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).

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

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).

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

Eases in the Motion Editor

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.

If you used Flash Professional in earlier versions, you may have eased some motion tweens in and out. You may have even used ActionScript to apply some easing equations to your instances. Flash Professional makes applying easing equations to your eases very easy, visually, and with the added bonus of enabling you to apply those equations to a single property. This section shows you some interesting effects you can achieve in seconds using ease presets. You can apply these techniques to your work and achieve a huge range of effects.

To use ease to animate position:

1. Open the FLA file called ease-position.fla from this learning guide's sample files. Note the very simple animation on the Stage, scrubbing the Timeline as necessary.
2. Select the tween span on the Timeline and open the Motion Editor.
3. Scroll to the Eases section and click the Add button and choose Sine from the list of ease presets.
4. Change the Sine Wave ease's value hot text to 4.
5. Scroll to the Y property under Basic Motion and choose Sine from the Ease column menu. Notice how the graph updates with a dashed curve that represents the actual tweened values (see Figure 53).
6. Return to the Stage and view the motion path on the Stage, then choose Control > Test Movie to preview the animation.

To use easing to animate a color effect property:

1. Open the FLA file called ease-color.fla from this learning guide's sample files. Note the animation on the Stage, scrubbing the Timeline as necessary.
2. Select the tween span on the Timeline and open the Motion Editor.
3. Go to the Color Effects category and choose Alpha from the Add menu.
4. Move the playhead to the last frame and add a keyframe. Change the value of the hot text to 80.
5. Move the playhead back to frame 1 and adjust the value of the hot text to 40. The ease that you will apply will now only tween between 40% and 80%.
6. Scroll to the Eases section and click the Add button, and then choose Random from the list of ease presets.
7. Change the hot text value to 20.
8. Scroll to the Alpha property and choose Random from the Ease column menu. Notice how the graph updates with a dashed curve that represents the actual tweened values between 40 and 80%.
9. Return to the Stage and view the motion path on the Stage, then choose Control > Test Movie to preview the animation (see Figure 54).

Custom easing lets you create your own ease using a graph in the Motion Editor, and then you can apply the custom ease to any property of your tweened instance (see Figure 55).

The Custom ease graph represents the degree of motion over time. Frames are represented by the horizontal axis, and the tween's percentage of change is represented by the vertical axis. The first value is in the animation is at 0%, and the last keyframe can be set between 0 and 100%. The rate of change of the tweened instance is shown by the slope of the graph's curve. If you create a horizontal line (no slope) on the graph, the velocity is zero; if you create a vertical line on the graph, there is an instantaneous rate of change.

To add a custom ease to a tweened instance:

1. Create a motion tween, or use the sample file called motion-tween.fla.
2. Select the tween span in the Timeline and open the Motion Editor.
3. Scroll to the Eases category, click the Add button, and then select Custom from the menu.

   This adds a custom ease to the tweened instance (see Figure 55), which you can then opt to apply to properties of that tween. The default for a custom ease is a constant velocity, so you need to edit it to see any effect.

You can then edit the custom ease using the standard bezier editing controls found in other property graphs in the Motion Editor. For information on using these controls, see "Modifying keyframes (control points) in graphs."

To apply the custom ease to a property, you select the custom ease's name from the Ease menu in the property to which you want to apply it. The property graph updates with a dashed curve that displays the actual tweened values after the ease is applied, as it does for the preset eases you applied in "Adding preset and custom eases to motion tweens."

There is an additional, and very useful, feature unique to custom ease graphs, as shown in the following exercise:

1. Open the sample file called custom-ease.fla from this learning guide's source files.
2. Select the tween span in the Timeline and open the Motion Editor. A tween with a custom ease has been applied already.
3. Scroll down to the Eases section and find the Custom ease. Click the ease to expand the row size.
4. Move the playhead to frame 40, which is where the keyframe is located on the X and Y properties.
5. Click the Add Keyframe button to add a keyframe at that location.
6. Drag the keyframe up and down at that location to see how it snaps to a percentage on the graph. This is where the keyframe value of the ease matches the keyframe on the X and Y properties.
7. Choose Custom from the menu in the Ease column for both X and Y properties. Notice how the ease hits the keyframe at both of the spatial properties.
8. Drag the handles that extend from this keyframe, or the first and last ones, to modify the ease curve. The ease still hits the keyframes in the X and Y graphs (see Figure 56).

9. Return to the Custom ease graph in the Eases section. Drag the keyframe at frame 40 up or down, while watching what happens in the X and Y property graphs and on the Stage (see Figure 57).

10. Drag the keyframe until it snaps again. Now the animation hits the spatial properties again. Test the animation to see how it looks.

Using this feature helps you create a custom curve that you can use to ease between keyframes. For more information on easing between keyframes, read the section "Using eases with your tweens" in the motion migration guide for Flash.

Understandably, you might want to reuse your custom eases on other tween instances, or even in other documents. There are two different ways you can reuse your custom ease.

The simplest way is to right-click the custom ease graph (outside of the graph's curve) and choose Copy Curve. Then on the second instance, add a new custom ease, and right-click in the custom ease graph and choose Paste Curve. You can paste the graph to any other non-spatial property graph.

The second way is to save the custom ease in a motion preset. This has a couple of advantages: you can easily use it in any of your documents, or you can generously give it to other Flash users. However, this does have its limitations, because any other properties in the tween are also saved, such as the tween's length. Generally, you will want to create a custom ease you intend to reuse in a tweened instance that does not have any animated properties and then apply it to instances you want to use it with initially. That said, it will apply throughout the animation as well, so you may need to resize the tween span after you apply the preset.

Read other sections of the Animation Learning Guide to learn more about working with motion tweens:

• Exploring motion tweens
• Manipulating motion tweens
• Using motion paths in animations
• Using the Motion Editor
• Animating with motion presets