tween animation

[treatkor]

an animation example using the greensock TweenLite class. AS2 version.
http://treatkor.googlepages.com/circleface10.html

[prg9]

Required classes for treatkor's example can be found here - TweenLite AS2 Download (http://blog.greensock.com/tweenliteas2/)

Additional information can be found in this post:
TweenLite + TweenFilterLite (2K) Tween Engines (AS2, AS3) (http://www.kirupa.com/forum/showthread.php?t=277424)

Nice one treatkor. Thanks for sharing.

[treatkor]

this time an airplane:

http://treatkor.googlepages.com/circleface13.html


import gs.TweenLite;
Stage.scaleMode = "noScale";
var easestyle = mx.transitions.easing.Regular.easeOut;
var sWide:Number = Stage.width/2;

function randRange(min, max) {
return Math.random()*(max-min)+min;
}

function tiltface() {
var s:Number = randRange(3, 0.5);
var r:Number = randRange(25, -25);
var r2 = -r;
var d:Number = 0;
//randRange(1,0.5);
sidetoside(s, r, d);
TweenLite.to(whole_mc.wheel_mc, s, {_rotation:r, delay:d, ease:easestyle});
TweenLite.to(whole_mc.head_mc.face_mc, s, {_rotation:r, delay:d, ease:easestyle, onComplete:tiltface});
TweenLite.to(whole_mc.head_mc, s+1, {_rotation:r*1.5, delay:d, ease:easestyle});
TweenLite.to(whole_mc.vehicleP_mc, s, {_rotation:r2, delay:d, ease:easestyle});
}

function scaler() {
var d:Number = randRange(4, 0);
var s = 4;
var ss = randRange(40, 60);
TweenLite.to(whole_mc, s, {_xscale:ss, _yscale:ss, ease:easestyle, delay:d, overwrite:false, onComplete:scaler});
}

function sidetoside(s, r, d) {
var xx = r*5+sWide;
TweenLite.to(whole_mc, s, {_x:xx, delay:0, ease:easestyle, overwrite:false});
}

function init() {
scaler();
tiltface();
}
init();


thanks prg9, for posting the info and links to the classes.

[treatkor]

well, a reply in this thread (http://www.kirupa.com/forum/showthread.php?t=277424) got me curious so i did a comparison.

first of all i want to say i think that both classes are excellent.
i don't know if what i've made is a good way to compare the two. perhaps there is a better way to do a tween class stress test than this. i just took the airplane clip i made and attached it 100 times on the stage.

using Twease in this one:
http://treatkor.googlepages.com/circlefaceairplanexxxTWEASE.html

and TweenLite in this one:
http://treatkor.googlepages.com/circlefaceairplanexxxTWEENLITE.html

in each airplane clip, is this code (with the commented lines swapped in each example):

import com.visualcondition.twease.*;
//import gs.TweenLite;

var easestyle:Function = mx.transitions.easing.Regular.easeOut;
var easestyle2:Function = mx.transitions.easing.Elastic.easeOut;
var easestyle3:Function = mx.transitions.easing.Strong.easeInOut;

var sWide:Number = Stage.width/2;

function randRange(min, max) {
return Math.random()*(max-min)+min;
}

function motion(){
var v:Number = randRange(25, -25);
var v2:Number = -v;
var s:Number = randRange(3, 0.5);
var d:Number = 0;
var ss:Number = Math.abs(v*2)+20;
var xx:Number = v*5+sWide;

Twease.tween({target:whole_mc.wheel_mc, time:s, _rotation:v, delay:d, ease:easestyle});
//TweenLite.to(whole_mc.wheel_mc, s, {_rotation:v, delay:d, ease:easestyle});


Twease.tween({target:whole_mc.head_mc.face_mc, time:s, _rotation:v, delay:d, ease:easestyle, func:motion});
//TweenLite.to(whole_mc.head_mc.face_mc, s, {_rotation:v, delay:d, ease:easestyle, onComplete:motion});

Twease.tween({target:whole_mc.head_mc, time:s+1, _rotation:v*1.5, delay:d, ease:easestyle});
//TweenLite.to(whole_mc.head_mc, s+1, {_rotation:v*1.5, delay:d, ease:easestyle});

Twease.tween({target:whole_mc.vehicleP_mc, time:s, _rotation:v2, delay:d, ease:easestyle});
//TweenLite.to(whole_mc.vehicleP_mc, s, {_rotation:v2, delay:d, ease:easestyle});


Twease.tween({target:whole_mc, time:s, _xscale:ss, _yscale:ss, delay:d, ease:easestyle3});
//TweenLite.to(whole_mc, s, {_xscale:ss, _yscale:ss, delay:d, ease:easestyle3});

Twease.tween({target:whole_mc, time:s, _x:xx, delay:d, ease:easestyle});
//TweenLite.to(whole_mc, s, {_x:xx, delay:d, ease:easestyle, overwrite:false});

}

function init() {
motion();
}
init();


so that's 100 clips with 6 tweens repeatedly called in each.

and on my computer Twease is faster/smoother than TweenLite. at least in this particular example anyway.

andrewfitz, as the author of the Twease class, do you think this a good enough way to compare performance?



edit: more information-my testing computer is a 2 Ghz Core 2 Duo, both of these sample pages play fairly smoothly for me, the Twease example plays very smoothly, while TweenLite is just a tiny bit choppy.

i viewed this on my old computer (a 400Mhz PowerPC G4) and it choked on both versions with 100 airplanes. i reduced the number of airplanes to 20 and viewed again, Twease was again faster and smoother.

just sharing the results of an experiment. :)

attached is the .fla

[treatkor]

TweenLite has been updated. the swf in the previous example was published with TweenLite version 4.95 so i've re-published the example with TweenLite 5.02

http://treatkor.googlepages.com/circlefaceairplanexxxTWEENLITE5.02.html

really nice speed improvement! and some new features have been added to TweenLite.

and here's another example: http://treatkor.googlepages.com/tween_video.html (uses TweenLiteFilter)

[andrewfitz]

Looks like he must have noticed our little discussion ;) Great to see developers improve off of one another, it's a great performance increase.

[andrewfitz]

BTW,you don't happen to have the previous < 5 version of tweenlite do you? I want to dif that one and the new one to see the changes. I'm all curious now :P

[minthu]

TweenLite has been updated. the swf in the previous example was published with TweenLite version 4.95 so i've re-published the with TweenLite 5.02

This is obviously faster! The performance is no obvious different between TweenLite 5.02 and Twease in this clip. :pope:

[marfastic]

In case anybody needs to make a custom tween for TweenLite (or any of the other derivatives TweenFilterLite, TweenFilterMax), I created a custom app that allows you to do just that http://marfastic.blogspot.com/2008/08/create-custom-tweens-for-tweenlite.html . I would really like to make it a Flash Panel if anybody has any hints on how to do that I would appreciate the help.