Wednesday, July 18, 2007

Actionscript: Tween vs Tweener

The other day I asked my mate ThatBlokeMike which Tween class was he using, the answer: Rob Penner's one, included by default when you install Flash.
I talked to him about the goodness of Tweener & how it helped me to speed up my developing process, but still couldn't convince him...
That's why I've decided to have a look at both options and see why I prefer using Tweener rather than Tween.

When I first started "Tweening with Actionscript", I was checking every time a great tutorial on Kirupa about it: Using the Tween Class.

It was good at the beginning, in fact I used it for several months and was happy about it, but still had to go back to Kirupa to check the options; the reason: the code needed to do a simple tween is a bit too long...

For instance, if we want to blur a Movieclip on an OnMouseDown event, if using the Tween class, we will need to import the the Tween class, the Filter class, play a bit and after writing a long code and spent some good minutes doing it, we will get what we want. But, if using Tweener, with a couple of lines of code we will get the same effect!
Click anywhere on the flash movie:

Let's see it the code:
import caurina.transitions.Tweener;

function blurIt():Void {
Tweener.addTween(my_mc, {_blur_blurX:15, time:1});
Tweener.addTween(my_mc, {_blur_blurX:0, time:1, delay:1});
this.onMouseDown = blurIt;

That's it!
easy, isn't it? now, your homework, do the same using the "traditional" Tween & Filter Classes...

More good things about Tweener:
- is open source
- the best bit, you can add more properties to the same tween, ie:

Tweener.addTween(my_mc, {_x:15, _y:25, _alpha:85, time:1});

& even a change of event in the same line:

Tweener.addTween(my_mc, {_x:15, time:1, onComplete:doSomething});

- has loads of parameters, special properties and many more transitions, so for sure you will fine one that suits you ;)

of course, it has some "back downs" but is up to you if you consider them "too bad", anyway, after using Tweener for some months now, I've found just two of them:
- It doesn't (yet) have anything similar to the "yoyo();" method found in the original Tween Class.
- It adds to your final swf 5 or 6kb more than if you were using the Tween Class only.
for me, that's not a big deal, so my advice:

Download Tweener, try it out, if you like it, keep on using it, if not, don't use it and all of us happy :)



Nate Chatellier said...

Thanks for the post Ernesto, great thoughts.

Keith Guerin said...

y Ernesto, your post came up first on a google search fro me. I am trying to figure out the benefits that Tweener in AS3 provides over the built in Tween class, and really I haven't figured it out yet. Could you show how you WOULD program the xblur if you sued the Tween class?

Ernesto said...

Hey Nate, thank you, you're doing a great job ;)

Keith, I'm still using AS2 as in the office they think is still to early to use AS3 (broader audience...). So, in AS2 I would use:

import flash.filters.BlurFilter;
import mx.transitions.Tween;
import mx.transitions.easing.*;

function blurIt():Void {
var blurT:Tween = new Tween(my_mc, "blur", Strong.easeInOut, 0, 15, 1, true);
blurT.onMotionChanged = function() {
my_mc.filters = [new BlurFilter(my_mc.blur, null, 1)];
blurT.onMotionFinished = unBlurIt;
function unBlurIt():Void {
var unBlurT:Tween = new Tween(my_mc, "blur", Strong.easeInOut, 15, 0, 1, true);
unBlurT.onMotionChanged = function() {
my_mc.filters = [new BlurFilter(my_mc.blur, null, 1)];
this.onMouseDown = blurIt;

as you can see, there are many more lines of code...
I think if you check Nate or Zeh blogs you will get a better idea about the Tweener advantages in AS3


Huy said...

I ran into the exact same problem to your example, and it took less than a minute for you to convince me to adapt Tweener into my project now Ernesto. Cheers mate.


TandemAdam said...

Fan boy! :)

It's not the most unbiased post I have ever seen, but Tweener is really good.

Personally I believe in just doing it properly the first time, and not being a lazy programmer. It is always best to use intrinsic classes when you can, because of file size, but also for performance.

Of course if you have many complicated tweens then it might just be better to go for a 3rd party tweening package instead.