|
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.
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.
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! ]
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
Creating and Applying a Custom Ease - Page
3
