Easing Tweens

This tutorial will cover two ways to make Flash's motion tweens feel more natural. If you've worked in Flash you've probably figured out the first technique. The second is a slight alteration that I figured out myself and haven't seen anywhere else.

Also, before I go any further, if you have Flash 8 or above, you might not need these tricks since Flash allows you greater control of your tweens. But if you're like me and hate, hate, hate Flash 8, then keep reading.

For simplicity's sake, I'll show these techniques by tweening a circle. So I'm moving the circle from left to right over the course of 61 frames.



And here's what that looks like.





It's a little robotic. Instead of accelerating at the beginning and decelerating at the end, the circle moves at a constant speed the whole time. That's not how things work in the real world.

To fix that, let me first explain why I made the end keyframe at frame 61 instead of a more natural number like 60. This is because, in order to make the tween feel more natural, the first step is to put a midpoint keyframe that is equal distance from the beginning and end keyframes. If your first frame is an odd number, then in order to create an equidistant midpoint, your last frame must also be an odd number (and if your first frame is an even number, then your last frame also needs to be even). In my case, the the midpoint is at frame 31. If you're interested, to mathematically find your midpoint, just add the frame numbers of the beginning and end of your tween and divide by two.

After setting your midpoint, go to the first frame, and adjust the tween to ease in 100. Let me also point out that it is hugely important to keyframe your midpoint BEFORE doing any of the easing. If you were to put the ease in 100 on the first frame and then set the midpoint keyframe, the circle wouldn't be in the right spot at that frame and the tween would look very jerky.


After setting the ease in, go to the midpoint frame and set the tween to ease out 100.

Let's check it out.





That's more natural. But let's see if we can do it one better. The problem with this technique is that the speed of your tween is constantly changing. It's speeding up all the way to the midpoint and slowing down from the midpoint to the end frame. This can be very distracting for really long tweens like slow camera pans.

Here's how you get a tween to speed up, maintain that speed and then slow down. Using the same circle set up, I've cleared all my keyframes and removed all the easing. Then I created a new layer above my tween.


I'm basically using this new layer as a ruler to measure distances on my timeline.

So the first measurement to make is when you want your tween to reach it's full speed. Here again it's important to pick a frame number that will allow you to make an equidistant midpoint keyframe. I'm picking frame 15. So the first thing to do is put a blank keyframe on the new layer at frame 15.

Next, determine where the midpoint is between those two blank keyframes. For me it's frame 8.

Now select those keyframes, hold down alt, and drag them to the end of your timeline. Now you have the same measurements at the end of your timeline as you made for the beginning.

Next, on the tween layer, put keyframes at the two midpoints you measured out.

Then drag those keyframes to the two measured end points.

Now ease in 100 for the first section

And ease out 100 for the last section.

Let's see what that looks like





For a small movement like the one above, this technique might be a bit overkill, but for really long camera pans, like the second shot in this video, they're much more useful. Also, you'll probably have to play with the length of your easing in and out and find a timing and distance that feels natural. If I was to redo this one, I'd probably make the easing last 21 frames.

And now to compare the three tweens.

Nothing



1st technique



2nd technique