Join Todd Perkins for an in-depth discussion in this video Creating custom easing in the Motion Editor, part of Flash CS4 Professional Tools for Character Animation.
- View Offline
In this movie, we will look at applying custom easing to an animation using the Motion Editor. If you are following along go ahead and open up Custom_Easing.fla from the Chapter 01 folder. You can also just create an animation of something moving downward. Right now, I have Bounce easing applied to the Y property of my animations. What I am going to do is put in on No Ease, so that now the animation just moves downward. I am going to zoom out a little bit to see it little better. So I am going to use the keyboard shortcut Command+2 on the Mac, Ctrl+2 on the PC and that's the keyboard shortcut for View > Magnification > Show Frames. So that just makes the Stage go into our viewable area. Okay, so now let's scroll down, I will remove my Bounce easing by clicking the minus sign in the Eases section and I will choose Bounce. So now I no longer have my Bounce easing, I am going to add custom easing by clicking the plus button in the Eases section and I will choose Custom.
Now the great thing about custom easing is that it has anchor points that you can adjust the handles on and you can add more anchor points so you have a lot of control over easing here. So I am going to expand the Custom Easing section by clicking in the blank space for that easing. So now my custom area is expanded and right now it's just a straight line going from 0% on frame one to 100% on frame 18. What I am going to do here is use my custom easing to make the monster jump up and down and I will apply Ease In when the monster moves down, so it will speed up as it moves down and I will apply Ease Out on the way up when the monster moves back up.
So again I am not going to control that using keyframes for the Y property, I am going to control that all using my custom easing. So the first thing I will do is I am going to select the ending keyframe in my custom easing and I will click and drag it all the way down. So I have it at 0 the whole way, now I am clicking and dragging in the Bezier handle so I have a straight line. And if it's not probably straight it doesn't really matter because we are going to be modifying it a lot in just a minute here. Now what I am going to do is add in a keyframe at frame nine. So I am going to put my cursor at frame nine, I am going to hold the Command key on the Mac or Ctrl on the PC until I see a pen with a plus icon by it. Then I will click there to add a keyframe and now I would want to do is make this keyframe be at a 100% so the monster will be all the way down at frame nine. So with that keyframe selected, I am going to click and drag the slider on the left side of the Motion Editor, all the way to a 100%.
You could also just click and drag the keyframe up but you have to drag it for a little bit longer period of time if you do that. So I prefer to drag the slider. So now you see how this bell curve and if I scrub the playhead I am not going to see the animation applied because I need to apply the easing in a property value. So I will do that right now and then we will fine-tune our easing. So for the Y property, I will change the easing to Custom and now you can see the animation curve applied. So instead of going from the top of the screen to the bottom of the screen at the end, we have our easing curve applied so it goes to the bottom of the screen halfway through and then back up to the top of the screen at the end of the animation. So let's test the movie and see this in action.
So now the monster is bouncing up and down. It looks pretty good, it looks like some easing is applied but what I want to do is have a more cartoonist effect by exaggerating the animation. So I am going to scroll down to my Easing area. I will click to expand to my custom easing and I am going to adjust my curve here. So notice that it is a straight line from frame one to frame nine here, so I am going to exaggerate that by clicking and dragging up the handle and notice that the animation moves slower up; the curve gets a lot steeper around frame five, see that. I told you the same thing at the end of the animation, to have the monster slow down towards the end. So I will select that last keyframe and then click and drag that handle to the left.
So the animation will go like this where the monster moves slowly as he is going down then really quickly until he hits the ground and then bounces back up really quickly and then slows down as he approaches the top. So let's test the movie now and see this animation curves in action. Command+Return on the Mac, Ctrl+Enter on the PC. And there is a lot more realistic with jump. So using custom easing in the Motion Editor, you can create customize curves to apply the any property in your animations.
- Encapsulating and nesting animations
- Randomizing movement with graphic symbols
- Converting animations to ActionScript or previous Flash versions
- Creating an iris effect
- Saving, adjusting, and applying motion presets
- Adding body movement to walk cycles