15 August 2011
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).
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 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:
To apply an ease preset to a motion tween using the Motion Editor:
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.
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.
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:
To use easing to animate a color effect property:
Figure 54. This SWF file uses easing to animate the alpha value between 40% and 80% repeatedly. No keyframing necessary!
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:
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:
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.