Tween Class vs Tween Lite
March 18th, 2010The Problem
So you’re getting further into Actionscript for your interactive projects and you dip your toe into the pool of programmatic animations. It seems like a good idea. All of your transitions can be managed from a few lines of code in one central place. You happily travel down the road of the Tween Class. You do a few tests, it’s easy to use, the results look great, and set off to implement it into your larger project.
You soon find out that the tween class chokes. It chokes hard and fails at unusual times in spectacular fashion. What do you do? You’ve spent all of this time setting up the Tween Class, and you love the idea of centralized transition control. Don’t worry there’s a great alternative, Tween lite.
Comparison
Here are some examples of the Tween Class and Tween Lite in a typical scenario. There are three buttons that when clicked will transition in 4 “products” of a similar color.
Tween Class Results
Inconsistent. With only a few shapes some of the transition pop in an out. At times the transitions will “stick” before they complete their animations. Even at this very basic level the Tween Class is Shaky at best.
Tween Lite Results
Not bad. Everything is where I expect it to be. Although I’m still a little gun shy from the Tween Class, this appears to be doing everything I need it to. Not to mention installing Tween Lite in place of the Tween Class was really easy.
Turn It Up
Okay now it was time to take Tween Lite to task a bit. To simulate a larger project I increased the number of “products” to 200 per each button click. Although the transition selected may not be appropriate for that amount of products it worked like a champ. Meanwhile the Tween Class couldn’t get more than a few products to animate.
Don’t take my work for it see it for yourself.
How Easy is it Really?
It’s super easy. Just download the Tween Lite framework, import it, and start using it.
Code Comparison
-
-
// Tween Class
-
-
import fl.transitions.easing.*
-
import fl.transitions.Tween;
-
import fl.transitions.TweenEvent
-
-
var trans:Tween = new Tween(mc,‘x’,Bounce.easeOut,0,300,1,true)
-
-
// Tween Lite
-
import com.greensock.*;
-
import com.greensock.easing.*;
-
-
var myTween:TweenLite = new TweenLite(mc, 1, {x:100});
-
TweenLite.to(mc, 1, {x:300,ease:Bounce.easeOut});
-
-
Very comparable. My favorite thing is you can add an event listener right in the decoration.
-
-
-
import com.greensock.*;
-
import com.greensock.easing.*;
-
-
var myTween:TweenLite = new TweenLite(mc, 1, {x:100});
-
TweenLite.to(mc, 1, {x:finish,ease:Bounce.easeOut,onComplete:onTransFinish});
-
-
-
function onTransFinish():void{
-
trace("done")
-
}
-
Now that’s really easy to use. There are sorts of other great features. Make sure to read the documentation. Greensock did a great job on putting it together.
So if are looking to up your game with programmed transitions or animation, I would check out Tween Lite. It may save you a big head ache in the long run.
Source Files
Just in case you want to poke around and create your own benchmarks I’ve provided my source code for this basic interface.
tweening-benchmark
I’m quite excited to announce that I’ll be doing a session at 
