SEARCH

The applications and designs at Plexipixel aren't all just graphically cool, they have serious math behind them.

Even though when we were in middle school we swore a solemn oath that we would never use math when we grew up... we ended up breaking that oath. Our transition effects engine provides custom sinusoidal easing which is very subtle even at longer durations. We wanted to add more dramatic easing functionality. When we were researching we came across some easing equations by Robert Penner, which he provides as open source under the BSD Liscence on his site (http://robertpenner.com/easing).

c = change (displacement value),

t = elapsed time since the beginning of the effect,

b = the beginning value of the property being tweened,

and d = the duration of the effect.

ease in = c * Math.pow(2, 10 * (t/d - 1)) + b;

ease out = c * (-Math.pow(2, -10 * t/d) + 1) + b;

The value they return is a coordinate on the stage where the movie clip should move to. We needed something that would return the amount of change for each interval, instead of a value to move to. This was easily accomplished and can be done like this:

var prev:Number = 0;

var startTime:Number = getTimer();

var change:Number = 500;

var dur:Number = 1200;

function easeOut(t:Number, c:Number, d:Number):Number {

return c * (-Math.pow(2, -10 * t/d) + 1);

}

var iv:Number = setInterval(function():Void {

var elapsed:Number = getTimer() - startTime;

if(elapsed >= dur) {

clearInterval(iv);

mc._x += change - prev;

return;

}

var amt:Number = easeOut(elapsed, change, dur);

mc._x += amt - prev;

prev = amt;

}, 30);