Mastering Tweening Part One - The Basics

This is a basic, yet extremely detailed, tutorial about the tween tool ( ). I'll be using ImageReady 7, but its 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 general pic of a 100x100 ava with a dot.

Boring right? That wont make a good ava, will it? lets animate it using the tween tool.

Duplicate the frame, 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 the tween 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 u don't, then the last frame and first one are the same, and it'll just look like its 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. lets start with just some basic disappearing.

Take the original, and duplicate the frame. 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 u know so far to make some really cool things. Here's something i threw together in a minute or two using this tutorial:

Now lets 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 are 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 u want it to go, the other all the way. then tween it to *10 frames, (*this is just for the example too), and then duplicate the last frame and move the one that went halfway to where u made the other go and tween to 10 again. u should get something similar to this:

As u can see, tweening for 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 u want to go:

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