In some scenarios, using actionscript to control motion is advantageous to the traditional keyframe-based animation in Flash. But unless you’re a mathematical whizz-kid, simulating basic physics like gravity, recoil, and elasticity can be a wee bit tricky. The Flash Tween Class can help you out there.

Let’s use a simple example to start with: say we want to move a movieclip, “ball_mc”, horizontally from one point to another on the screen. The code below demonstrates two possible approaches to this problem:

Solution 1

var destx:Number = 450;
ball_mc.onEnterFrame = function(){
   if(Math.round(this._x) != destx){
      this._x += (destx-this._x)*0.2
   }else{
      this._x = destx
      delete this.onEnterFrame
   }
};

Solution 2

import mx.transitions.Tween;
import mx.transitions.easing.*;
var _tween1:Tween = new Tween(ball_mc, “_x”, Regular.easeOut, 150, 450, 2, true);

Although both solutions achieve a similar result, Solution 2 is preferable because its prettier and it involves less typing, which is a good thing. What you see in Solution 2 is the Tween Class and it is a really simple way to animate motion over a given period of time.

Let’s look a bit more closely at the parameters for the Tween Class:

new Tween(ball_mc, “_x”, Regular.easeOut, 150, 450, 2, true);

ball_mc is the instance name of the movieclip you want to animate.
“_x” is the property you intend to animate. This can be _x, _y, _width, _height, _xscale, _yscale, _rotation, or _alpha
Regular.easeOut is the style of animation or “easing” type. More on this below.
150 is the start value
450 is the end value
2 is the duration of the tween
true tells us that the duration is in seconds (false would mean duration is the number of frames)

Finally, a bit on the types of easing available to you:

Strong.easeIn / Strong.easeOut / Strong.easeInOut
“Strong” tweens are very similar to “Regular” tweens but slightly more abrupt. They give the appearance of moving faster during the middle of the tween.

Back.easeIn / Back.easeOut / Back.easeInOut
“Back” tweens look like they over-shoot the mark, then return back to correct position. Useful for a falling panels, or making something look like it’s taking a run-up.

Elastic.easeIn / Elastic.easeOut / Elastic.easeInOut
“Elastic” tweens look like they’re attached to a piece of elastic – think bungee jumping and you’ve got it! The easeInOut tween produces a particularly bizarre effect.

Regular.easeIn / Regular.easeOut / Regular.easeInOut
“Regular” tweens produce gentle, evenly paced tweens. Best for smooth wavy effects.

Bounce.easeIn / Bounce.easeOut / Bounce.easeInOut
“Bounce” tweens look like they bounce several times before coming to rest. Obviously a good choice if you need to animate a bouncing ball.

None.easeNone
No tween – just animates from start to end with no easing.

That’s all there is to it! Happy tweening, and good luck!

Tutorial by Ben Stevens