Robert Penner Easing Equations

[Obelisk]

Ok, again I amn sure this is an easy question. But looking at the function below, how would I apply it to an MC to move its position.

// simple linear tweening - no easing
// t: current time, b: beginning value, c: change in value, d: duration
Math.linearTween = function (t, b, c, d) {
return c*t/d + b;
};


I need a sample movie file.

Thanks in advanced for the help!

[Obelisk]

Anyone have any ideas, suggestions or tutorials?

[lostinbeta]

If you are new to easing I recommend you check out the basic easing equations. There are 2 tutorials on this site that use them and they are usually all you need for easing.

Robert Penners equations although fun to mess with and are very good, they are very advanced as well.

The way to get the linear tween equation to work is to put these actions on your movie clip...

onClipEvent (load) {
var start = this._x;
var end = this._x+_root.endNum;
var duration = _root.dNum;
var t = _root.tNum;
}
onClipEvent (enterFrame) {
t++;
if (t<=duration) {
this._x = Math.linearTween(t, start, end, duration);
}
}


And put these actions on a frame..

dNum = 20;
tNum = 0;
endNum = 100;
Math.linearTween = function(t, b, c, d) {
return c*t/d+b;
};

[kode]

For easier usage, you could easily turn the whole thing into a method. ;)

MovieClip.prototype.linearTween = function(endx, endy, duration) {
var x = (endx-this._x)/duration, y = (endy-this._y)/duration, t = 0;
this.onEnterFrame = function() {
if (t++<duration) {
this._x += x;
this._y += y;
} else {
delete this.onEnterFrame;
}
};
};
Then if you want to move the instance myMovieClip to x:100, y:80, during 24 frames...

myMovieClip.linearTween(100, 80, 24);
...Got it? =)

[Obelisk]

dang you guys are good.... Again thanks for answering my questions.

If you are curious I am currently working on a remoting app in Flash. Needed to easing for my menu. Once it is live, I will definately post a link here.

Again thanks for the help kax and lostInBeta

[kode]

You're welcome. ;)

[lostinbeta]

kax: Thanks for that. I was thinking about doing that but considering I had to go soon I didn't have time to go about figuring out and testing it. You rock ;) :A+:

[kode]

No need to thank me. =)

And...

Originally posted by lostinbeta
... You rock ;) :A+:
I already knew that... :P JK ;)

[lostinbeta]

hehe. Modest too ;) :P

[kode]

Yup... I knew that too. :sigh: :P

Will you ever tell me something that I didn't know already? ;)

[lostinbeta]

I don't know if I can tell you something you didn't know already. It would be easy for you to lie and say you already knew ;) (this is the 8th time this wink smiley has been used in this thread, I love that smiley)

[kode]

Hmmm... that's a good point. :P ;) (I love that smiley too!!)

I guess you have no choice but to trust me... :P

[lostinbeta]

LOL... I love the tongue smiley too :P ;)

Wow... we definitely overuse those two smilies :!:

[kode]

...Who cares!? :P
If the smiley is cool, then use it!! ;) :P


I also like these: :-\ =) :smirk: :sleep: :beam:

[lostinbeta]

LOL ME TOO!!!!

::sensing we are way way way off subject now::

Alright I think we should stop thread hijacking :-\ ;) :P :beam:

[APDesign]

Well, i did a search for penner easing equations, found this, and found out that there is an error in the code, you forgot to pass the t variable kode. heh. so here it is corrected.


MovieClip.prototype.linearTween = function(t, endx, endy, duration) {
var x = (endx-this._x)/duration, y = (endy-this._y)/duration, t;
this.onEnterFrame = function() {
if (t++<duration) {
this._x += x;
this._y += y;
} else {
delete this.onEnterFrame;
}
};
};

and to call


myMovieClip.linearTween(0,200, 200, 24);

I should note that I'm at school and am using a trial version of mx2004, so maybe in MX you don't have to pass t for it to work... but meh, incase anyone was having a problem.