There have been quite a number of improvements to how you create and modify animations in Flash CS4. One of the big areas was in the area of easing. Instead of having easing be applied to a tween as a whole, you now the ability to apply easing to each property individually instead.
Out of the box, you have a fairly large set of easing types to pick from and use for your animation. Despite the variety of eases offered, you will often find the need to create your own easing variant. In this tutorial, I will briefly describe how you would go about doing just that.The following is an example of a custom easing effect applied to an animation of the Flash CS4 box sliding in from the left:
[ an easing effect is used to accelerate and decelerate the box ]
In the above animation, notice that your box fades in very quickly, slows down momentarily, and then quickly slides out.Let's Get Started
Before we get into the topic of easing, you need an animation that you can apply easing to. To save you some time, I am going to provide you with an animation that you can use.
The following source file contains just a simple animation with no easing effects applied:
|
Adding a Custom Easing Entry
What we are going to do first is add a custom easing entry that you can modify to create your own easing effect. First, select your tween by clicking it on the timeline:
[ clicking anywhere on your tween will select the entire range of frames ]
Once you have selected your tween, click on the Motion Editor tab that you see right next to the Timeline tab. Your Motion Editor is this advanced view of your animated and common properties that you can tweak and modify as you want:
[ the motion editor is a new way of diving into the details of your animation ]
To aid with taking screenshots for this article, I have docked my entire Timeline to the left-hand side of my screen, so don't worry if your timeline and graph look proportionally different than what I am showing in my screenshots.Anyway, towards the bottom of your Motion Editor, you will notice the Eases category. From this category click on the plus button found towards the right-hand side of the category header:
[ click on the + button in the Eases category ]
Once you click on the plus button, a large drop-down containing various ease effects will appear. The effect we want is called Custom, so select that from the this list:
[ select the Custom effect from this list of Eases ]
After you select the Custom ease, your menu will close and a Custom ease entry will be added to your list of ease effects you see in your Eases category:
[ an entry for your Custom ease has been added ]
From this list, click on your Custom entry. Once you have clicked on your Custom entry, you will know it is selected because it will look larger than the other entries.
[ select your Custom entry by clicking on it with your mouse ]
From this view, you will be able to create a custom easing effect that you can then apply to your animation.If you are having difficulties viewing your entire graph in the motion editor, feel free to adjust your motion editor's properties by modifying the numbers found towards the bottom:
[ the three numbers at the bottom of your motion editor alter how your graph looks ]
The first number indicates how big your graph will be for any non-selected property, the second number indicates how big your graph is for a selected property, and the third number indicates how many frames to display in your graph view without requiring scrolling.So far, we've played a bit with the motion editor and added a custom easing entry. In the next part, we'll actually go ahead and create our ease as well as apply it to our animation.
In the previous part, you set everything up for creating your ease. In this, page, let's actually create our ease and use it.
Creating an Ease
Now that you have new custom ease entry, let's actually create your easing effect. If you look at your graph right now, it is basically a straight, steady line starting at 0 and ending at 100:
[ your graph shows a perfectly linear line ]
This line indicates that no easing is currently in effect. While that sounds odd, it is actually correct if you think about what this line represents. In this line, the change is perfectly linear, where for each frame, you increment by the same amount. To look at it mathematically, the line's slope is constant.To alter the line, simply click anywhere on your line and begin to drag. Very easily, you will be able to deform your perfectly straight line into a curve:
[ click and drag around on your curve to alter the line ]
The type of curve that we want is one where you are accelerating quickly, slowing down, and then accelerating again. The curve representation of that will look as follows:
[ the above curve represents a deceleration and an acceleration ]
The easiest way to do this would be by dragging the blue lines and making them nearly vertical. The blue line for the left-hand side will be directed up, and the blue line for the right-hand side will be directed down:
[ use the easing handles to fine-tune your easing curve to look like the above image ]
Great, you have just created a custom ease. Creating an ease is only a part of what you need to do. If you run your animation, you will see that it runs at its earlier slow pace. What you need to also do is apply this ease to your animation, and we'll do that on the next part.In the previous part, 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! ]
No comments:
Post a Comment