Using Different Ease Functions in ActionScript

In previous post I used a formulation for motion tweening based on the update rules in machine learning methods. In this method, you have a target value x₀ (target position for tween). At each time step, you update the variable x by a percentage of the distance between the target and current. Like the following formation:

x = x + α(x₀ - x)

This is also equivalent to

x = (1-α)x + αx₀

This can be used for easing out, not easing in. In this post I'll demonstrate a simple method for easing in&out simultaneously.

Suppose that the current positin of the movie clip is at x0, and the final (target) position is at x1. We need to find a function which takes x0, x1, t (current time), and tf (total time) as parameters and returns the expected position at time t.

f(x0, x1, t, tf)

We can use sine function for this purpose. The below figure is the sine function between -π/2 and π/2.

If we scale the percentage of time between -π/2 and π/2, the sine function returns us the percentage of the position at that time. However we need to scale also the return value from the sine function. The final formulation is like the following

x = f(x0, x1, t, tf) = (x1-x0) sin((t/tf - 0.5)*π)+1)/2

In ActionScript 2.0, you can use the following code where box_mc is the movieclip instance you want to move with ease.

var t = 0;
var tf = 40;
var x0 = 0;
var x1 = 500;

onEnterFrame = function ()
{
if (t<tf)
{
box_mc._x = (x1-x0) * (Math.sin((t/tf - 0.5)*Math.PI)+1)/2;
t++;
}
}

You can download the source code. Checkout the following example. (Google Sites fixes the problem with flash files it should work now)



Also check out TweenLite which is also used in Gaia Flash Framework. You will have lots of tweening types like these ones, and you will be able to use them with just a single line of code. It has also very small fingerprint.

Keep flashing...

Easy Ease with ActionScript 2.0

Motion tweening is at the core of Adobe Flash animations. Even you can create tweenings on the stage using the design tools, you can achieve same animations using the action script. This way you can control your animation with the parameters you defined in the code. Once you get used to animating with ActionScript, it will open you a new world of parametric animation.

Simplest code for ease out is as follows:

this.onEnterFrame = function() {
box_mc._x += (400-box_mc._x) * 0.2;
}

where box_mc is the movieclip we are animating, 400 is the destination _x value and 0.2 is ease factor. Interpretation of this: the movieclip (box_mc) moves 20% of its remaning way at each frame iteration. Suppose that the moviclip is at x-position 0 at the first frame. At the second frame it will be at position 80. At the third frame it will be at position 80 + (400-80)*0.2 = 144. Just put 144 instead of 80 you will get next x position. 144 + (400-144)*0.2 = 195.2. This continues until x position of the movieclip is very close to 400 and the change is almost zero (but not zero).

Following figure illustrates the effect of changing the ease factor. The x-axis is time and y-axis is the remaining distance from the destination point. Higher ease factor values, more time needed to reach the destination.

To see the animation, checkout the following:

You may not see the following flash animation becase .swf file is hosted on google and an update on google sites breaks flash file playback, so check it later after they fixed the problem.

Download Source