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 the ease in, go to the midpoint frame and set the tween to ease out 100.

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.

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.







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
1 comment:
This blog is a great resource!!Thanks,can't wait to see the next one
Post a Comment