Motion Tweening

Animation in Flash revolves around the timeline. In your timeline, you can specify a starting point and an ending point for a particular event. I use the word point as opposed to time, for the concept of time in Flash is different than in the real world. In the real world, you measure the time it takes to do something in seconds or minutes or hours. In Flash, the primary measure of time revolves around frames, and the seconds/minutes of an animation are dependent on your frame rate.
So, where does motion tweening fit into all this? When you create a simple animation in Flash, you always specify a starting frame and an ending frame. For example, you could specify a ball to be at the left end of your stage at Frame 1:

[ your ball on the left side of the stage ]

You then create a keyframe, for example, on Frame 20 and move the same ball to the right end of your stage:

[ your ball on the right side of the stage ]

If you preview your animation, you will see your ball start at the left end of your stage and suddenly, when you reach Frame 20, appear at the right. There is no smooth transition between the beginning and starting positions of the ball. Here is where motion tweening comes in.
Motion tweening creates a transition between your ball at Frame 1 and Frame 20. Flash automatically calculates where your ball's position would be between Frames 2 and 19, so that when you preview your animation, your ball gradually moves from its initial left position to its right position. All you do is specify the beginning and end frames. Flash takes care of the rest!
In this tutorial, I will try to explain tweening by helping you create a simple tween with a few twists. The following animation is an example of what one of your animations could look like from following this tutorial:

[ a quick motion tween animation ]

Let's get started:

1. First, download and open the FLA I have created. Don't worry, it only contains the bare minimum of items so that you don't have to spend time focusing on nonessential things:

Download Partial Source

2. After you have opened the FLA, you should see a blue circle in the middle of your screen...and nothing else. Right click on Frame 25 in your timeline and select Insert Keyframe:

[ insert keyframe on Frame 25]

3. You should see a keyframe on Frame 25. Now, insert a keyframe on Frame 50 also. Your timeline should have a keyframe on Frame 1, Frame 25, and Frame 50.
4. Let's modify our circle's size. Go back to Frame 25 on your timeline, right click on your circle, and select Free Transform. The scale and skew boxes should appear around your circle. Click on any of the boxes on the corners and drag outward:

[ scale your circle larger ]

5. If you were to preview your animation by pressing Ctrl + Enter, you will see that your circle starts off small, suddenly becomes bigger, and then returns to its small size again. Let's make this better.
6. Select all of the frames in your timeline from Frame 1 to Frame 50. Right click on any of the selected frame(s) and select the option for Create Motion Tween.
7. Notice that when you preview your animation, the circle smoothly animates from being small to large and back again.

Hopefully the above example helps you to visualize what I was explaining in the first part of this tutorial. It simply creates a fluid transition between different states of the object that your trying to animate.
In the next page, I will show you how to improve your tween by adding some tweening effects, explain some cases where tweening will not work as expected, and more!

I'll talk about easing and how to apply it to the animation you created earlier.
Easing
In the example you created in the previous page, the circle grew in size and shrunk in size at a linear rate. For the most part, in real life, very few things increase and suddenly decrease linearly. As an example, when you apply the brakes on a moving vehicle, you do not slow down at a steady rate. You initially slow down quickly before slowing down gradually as time progresses.
The natural way of gradually slowing down or speeding up is known as easing in geek terminology. In Flash, easing refers to the rate at which you move between keyframes during a tween. The speed at which you move through Frames in Flash is specified by your frame rate. In our example, the frame rate is set to 25 frames per second.
With easing applied, it will feel as though your frame rate is adjusted lower or higher than the limit you provided, for your object may accelerate or decelerate its transition from one state to another depending on which type of easing you chose.

Easing & Feel

I emphasize the word feel in the above paragraph because Flash does not really accelerate or decelerate your movie's frame rate. Doing so would cause jerky movement as opposed to the smooth movement you would expect with an ease. I 'felt' that it would be the best word to use to describe the situation :)

Speaking of types of easing, let's get into the two types of easing you will use:

• Ease In
  When you gradually speed up into an animation sequence.
• Ease Out
  When you gradually slow down before reaching the end of your animation sequence.

Let's go back to our animation. As you can tell, we animated the circle to grow and then shrink back to its original size. Let's add some easing to our circle animation by easing it into its expanded size and easing back out to its normal size:

1. Select any frame between the two keyframes on Frame 1 and Frame 25. In your Properties panel, find the Ease text-field and enter -100:

[ enter a value of -100 in the Ease text-field ]

2. A negative number in the Ease text-field indicates an Ease In. Let's add an Ease Out. select any frame between your keyframes on Frame 25 and Frame 50. From the same Ease text-field, enter a value of 100.
3. When you preview your animation by pressing Ctrl + Enter, notice that your circle now has a slight bounce when it grows and shrinks. That's easing!

Did you notice that I did not have you select all of the frames between any two keyframes to apply the effect? I simply requested you to click on any frame between the first two or last two keyframes. Any changes you make to your tween are always applied between two keyframes.
Selecting frames, for example, between 10 and 15 and adjusting the ease will not adjust the ease for those 5 frames. It will apply them to all the frames between the two keyframes at Frame 1 and Frame 25.

Custom Ease In / Out*

In Flash 8, you have more control over your easing beyond simply entering a value in the Ease text field. If you press the Edit button, found to the right of the Ease text field, you have greater control over your Ease as well as which property (position, rotation, scale, color, filters) of your animation will be affected by your custom ease.

Addressing this topic requires a tutorial of its own, so I will hold off on explaining the intricacies of the custom easing feature until a later tutorial.

* Thanks to TheCanadian for reminding me.

---

You are almost done. I will explain some common tips, tricks, and problems to avoid when using tweens.

The following is a list of tips based on mistakes I made when using tweens, and hopefully by confessing my mistakes, you would be less inclined to make them yourself:

• Do Not Tween Multiple Objects in the Same Layer
  When you create a motion tween, you can have multiple objects on the same layer. The multiple objects, though, will be grouped into one big object, so you will not be able to animate each object individually.
  
  In order to tween each object individually, you will need to place your other objects into their own layers.
   
• Changing Object Symbol Type in a Tween
  You can change the type of your object from a Graphic, Movie Clip, or Symbol at any keyframe in your tween, but you must take into account the registration point. Your animation will work fine as long as you keep the registration point of each of your objects the same.
  
  If the registration point of your tweened objects vary in the same tween sequence, Flash animates them erratically if you make any modifications to the object's position, scale, and rotation.
   
• Do Not Replace Tweened Objects
  The object you start your motion tween with must be the same object that you end your motion tween with. While you have full freedom to modify your object throughout your tween, you cannot delete the object and place another object in its place. The motion tween simply will not work.
  
  You can morph your object into another object, but you cannot accomplish that with a motion tween. You will need to use a shape tween.
   
• Inserting Keyframes in the Middle of a Tween
  When you create a motion tween between two or more keyframes, you are not forbidden from inserting more keyframes into the middle of your tween. Since you insert a keyframe in the middle of a tween, whatever state your object is in at that point of the tween, that is the state your object will be in the keyframe.
  
  For example, in our example, inserting a keyframe at Frame 12 would result in an object that is larger than itself on the first keyframe but smaller than it would be on Frame 25. When you playback the animation, the extra keyframe will not cause any variation in how your animation looks had it been played back without that extra keyframe.
   
• Reversing a Tween (by .soulty)
  To reverse a tween, copy the tween's frames to a location on your timeline where you want the reverse to take place. Select all of the frames you just pasted, right click, and select Reverse frames from the menu that appears.

There are more tips that can be found in the following thread:  http://www.kirupa.com/forum/showthread.php?t=195103
I have provided the source file for the animation you have been working on. You can download it by clicking on the Download FLA button below: