Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While you can apply preset easing patterns in the Motion Editor, if you really want perfect control over the easing in your animations, the best thing to do is to create the easing patterns yourself. In this movie, we'll look at how to add custom easing to an animation through the Motion Editor. So I'm going to select my olive animation, hop on over to the Motion Editor. In the Motion Editor, I'll expand my view and scroll down and I'm going to add a Custom ease.
Now I'll click on the Custom ease to expand it and then I'm going to expand my frame viewing area to cover the whole span of frames for my animation, just make the Motion Editor a little bit bigger and now I'm ready to create. The default easing curve is a straight line, so it goes from 0 to 100. You can actually click on any one of those points and I get Bezier curves that I can modify. What I want to do for this animation is pretty similar to the bounce effect that's already built into Flash but I want to create a bounce effect that happens a little bit more quickly and the olive doesn't bounce as high.
So I want a really short brief bounce for an olive, since an olive doesn't bounce in the same way that a ball would bounce. So what I'm going to need to do is add anchor points to my easing. So I'll go to Frame 60 and then I'm going to click the Add or Remove keyframe button in my Custom ease. So I'll put an easing keyframe there. Now I'll click and drag this all the way up to 100. Remember that you can hold the Shift key to make sure that you keep that on the same frame.
I can move my Bezier handles however I want. If I have an S curve then the animation will start off kind of slowly. It will hit the ground slowly and that will create more of a realistic animation. So I'm going to leave it like that and then I'm going to add the bounce. So I'm going to move in one of the handles. Remember that you can hold the Option or Alt key to just move one handle at a time, so I'll create a little bit of a bounce. Notice that the lowest point in my bounce is about 85. You can control this to be however you'd like, but this is what I want for my animation and I'll add another keyframe at about Frame 150.
Click and drag that in, adjust the Bezier curve, and then I'll add one more bounce. So I'll go to Frame 190, add one more keyframe for the easing, keep it at the bottom, adjust the Bezier curves one handle at a time, a little bit lower than the first one, and then I'm going to use the handles for the end of the animation to make them straight, so that the olive stops moving after the second bounce. Once this is set up, I'm going to apply the easing to the Y property.
So I'll scroll up, find the Y property in the Basic motion section, click the Easing dropdown, apply the Custom ease, you can see the green curves for my animation and then I'll test this in the Flash Player. So watch the olive fall down. I'm looking at the animation, seeing it goes slow at end and the bounces as slow as they are, don't really look right. So let's make some adjustments to our custom easing. Scroll down and then I'm going to click the first keyframe in my easing, where the animation is at 100%.
I'm going to adjust the Bezier handle and then I'm going to move the keyframe over a little bit so the animation will happen over a shorter span. I'll also adjust the bouncing. Let's see how that looks in the Flash Player. The olive falls, bounces, and stops. Now if you really want to perfect this animation, you can work on it more and fine-tune it as much as you like. Just know that when you want to apply custom easing, you can come over, do it in the Motion Editor, and then you can control how your easing works by adding keyframes and adjusting the Bezier curves.
Get unlimited access to all courses for just $25/month.Become a member