Mastering Tweening: Part One

This is a basic, yet extremely detailed tutorial about the tween tool ( ). I'll be using ImageReady 7, but it's the same for CS. Also, this tut isn't all that long text-wise; the pics just take up a lot of space.

Here's a picture of a 100x100 avatar with a dot:

Boring, right? That won't make a good avatar, will it? Let's animate it using the tween tool.

Duplicate the frame with , then move the dot somewhere. Press the tween button and set it to 10 frames. You'll get something similar to this:

You may be thinking, "What about curves? If tweening can only makes straight lines, then how do I make curves?" Well, check this out:

From the original pic, move the dot down and right a little, like so:

And tween it to 1 frame. Repeat with your current last layer. Then, duplicate and move it up and right a bit, and tween again. Then, duplicate and up and right again, and tween. Now, to make it loop properly, duplicate the first frame, move it to the end past your last frame, and tween to around 5 frames. Then, delete the duplicated first frame (now your last one). (If you don't, then the last frame and first one will be the same, and it'll just look like it's pausing or messing up or something...) Press play, and I hope it looks somewhat like this:

But wait! Animating doesn't just involve moving, now does it? What about making things appear and disappear? Well, this is one of the easier things. Let's do some basic disappearing.

Take the original frame and duplicate it. Now, hide the layer with the dot on it, and tween it to 5 frames. Then take your new last frame and unhide the layer, tween it to 5 frames, and press play:

Apply what you know so far to make some really cool things. Here's something I threw together in a minute or two using this tutorial:

Now, let's start tweening with two dots. Duplicate your first dot layer and move it opposite your first dot, like so:

Now, duplicate the frame, then move them both into the center, and tween it to 5 frames. Then, duplicate the frame and move the dots to their original position, but at the bottom:

Tween it to 5 frames like the last one, then duplicate the one where they're in the center, and tween to 5 frames. Then, duplicate the original and tween to five frames to get this:

However, they don't have to go at the same speed. To make them go at different speeds, take the original with two and duplicate the frame. Then, move one about halfway to where you want it to go; the other all the way. Then, tween it to *10 frames, (*just for the example), then duplicate the last frame, move the one that went halfway to where you made the other go, and tween to 10 again. You should get something similar to this:

As you can see, tweening with two objects isn't that hard. More about different speeds:

Back to using one object. Here's how to make things change speed during tween animation. Get your original dot, (hide the other dot layer), and duplicate the frame. Now move it halfway to where you want to go:

And tween it to 10 frames, then duplicate, move it halfway between the new dot position and where you want it to go, tween to 3 frames. Then duplicate, move to where you want it to go and tween to 2 frames. You should get something similar to this:

Check out part two for more tweenage.