Motion Tweening and Easing
       by kirupa  |  7 October 2005

Motion tweening seems pretty easy, and for the most part, it really is the easiest way to animate a couple of objects as you may have found out from the previous pages. When I was starting out with Flash a long time ago, I often ran into problems creating anything beyond a simple motion tween.

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:

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:

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.