Creating and Applying a Custom Ease - Page 3
       by kirupa  |  16 November 2008

In the previous page, you learned how to create an ease. In this page, let's look at how to actually apply the ease you created.

Applying an Ease
When you apply an ease, you apply it to an individual property that makes up your tween. In your Motion Editor, if you look at the graphs, you will see that the properties for X and Alpha are the ones that are being modified:

[ the X and Alpha properties are what are being modified in our tween ]

In each of those entries representing a property, a combo box exists with the text that says No Ease:

[ each of your properties has a combobox that allows you specify an ease ]

Let's look at our X property first, so click on the No Ease combobox in your X property entry. A small list of items will display. From this list, select the entry representing your Custom ease:

[ select the custom ease that you want to use ]

Once you have selected your Custom ease, notice what happens to the graph representing the X property. You see both the original curve as well as a dotted composite curve displayed in green.

This composite curve is made up of your original curve and the easing curve, and this provides you with the final view of how your property changes at each point in time:

[ the green curve shows how your value changes with the ease applied ]

If you preview your animation by pressing Ctrl + Enter, notice that your Flash CS4 box does what you specified as part of the ease. It accelerates in from the left, slows down, and then accelerates out.

As an aside, you can also see this acceleration and deceleration by looking in your design surface itself where the frames that make up your motion are displayed. Notice that the action seems bunched together towards the center and more sparsely laid out at the beginning and end to indicate what your motion editor graph showed you earlier:

[ the design surface provides another way of visualizing the easing applied ]

Great - so you now have your custom ease effect applied to your X property. There is one thing missing though. Your transparency (Alpha) doesn't seem to fit with the custom ease already applied to the X property. Time to change that!

 Let's go ahead an apply our ease to the Alpha property as well. Go back to your Motion Editor and add the Custom ease to your Alpha property just like you did earlier for the X property. Your Alpha property's graph will now look as follows:

[ your composite graph showing how this property changes with easing applied ]

Notice that your composite curve looks a little more complicated than what it did for your X property case. Tweaking your Custom ease, even after it has been applied to the X and Alpha properties, will allow you to smooth out any rough edges such as what you see above.

As for me, the above rough edge actually looks fine when played back, so I am not going to tweak my ease any more.

Conclusion
As you can see, creating a custom ease and applying it are fairly straightforward once you get a hang of working with the motion editor. The new animation model in CS4 allows you to apply an ease directly to each individual property as opposed to the tween as a whole, and this gives you the ability to create more sophisticated animations that you couldn't easily do before.

This article only gives you a brief overview of how to create your own custom ease. You can play with the existing eases to see how some of them were done. Not all of them are quite as simple as the ease you created as part of this tutorial, and you can even add keyframes and tweak your ease further:

[ you can even add keyframes to your easing graph! ]

1 | 2 | 3