• About
• AIR Applications
  • ImageSizer
  • Screentweetr
• Blog
• Contact

Psyked *

it’s easy once you know how.

Stop using mx.transitions.Tween;

Posted by James - 12/07/08 at 05:07:16 pm

If you’re still using Flash’s inbuilt Tween classes for you scripted animations, I suggest you stop – and start making things easier for yourself by using Tweener instead. Tweener is a class that replaces Tween, works for Actionscript 2 and Actionscript 3, offers a simpler interface for creating tweens, and has a larger range of easing options to work with.

What’s wrong with Tween?

The Tween class is ok – up to a point. It does what it’s supposed to, but once you start trying to integrate it with serious full-on Actionscripting you’ll notice a few snags. If you’re dynamically creating and removing objects, and then want to dynamically modify the tweens, your tweens will likely go crazy. Start a new Tween and there’s very little way you can stop it – even by removing its subject. Stacking Tweens doesn’t go down well either – if you create one to move an object left to right, and then mid-animation another to move it back to the left, things go ok until the point that the first animation should finish – whereupon your object will flick back to the finishing position of the first, and then resume the second animation.

Moreso than that however, is the hassle needed to create an animation with Tween;

import mx.transitions.Tween;
import mx.transitions.easing.*;
var xPosT:Tween = new Tween(myMovieClip, "_x", Bounce.easeOut, 0,
Stage.width, 3, true);
xPosT.onMotionFinished = function() {
// movement finished
};

Why is Tweener better?

First up, there’s no problems with mixing and matching, no misplaced motion crazyness.  You can apply and reapply tweens to your hearts content, and they all work.

Secondly, the interface is simpler – you can setup a tween with less lines of code, and you don’t have to worry about managing objects to execute functions once your tween has run its course. And a single line of code can handle all of the attributes you want changing for a single object – no separate Tween objects for each attribute, just a single Tweener line for all the attributes (on the same object, under the same time and easing style).

import caurina.transitions.Tweener;

Tweener.addTween(myMovieClip, {_x:Stage.width, time:1, transition:"linear",
 onComplete:onCompleteHandler});

function onCompleteHander():Void {
// movement finished
};

Thirdly, you don’t have to worry about things like start variables – just the end variables.  Which makes far more sense.  In most situations I find I’m only adding the current position of an object as the start variable to Tween.  In Tweener, that’s taken as the automatic variable – after all, if you want to set a different position for the object before the tween starts, you just do that on the line above.

Lastly, there’s a invaluable delay attribute.  It’s a built-in timer for your animations – how useful is that!  Want an animation to start after 10 seconds? Easy – just add ‘delay:10′ to your Tweener line.

Resources

• Download Tweener from its Google Code location

3 Comments »

1. 

   Take a look at TweenLite. I recently switched over to it from Tweener. Great performance and a very simple interface. And the author even provides an extended version – TweenMax – for people who want more.

   Comment by Matthias — 15 July 2008 #

2. 

   I did hear about TweenLite the other day from http://www.thetechlabs.com/3d/building-a-3d-album-with-five3d-and-tweenlite/ – I shall have to check it out!

   Comment by James — 16 July 2008 #

3. 

   You forgot to mention that even though they make it seem like you can do it in the documentation, you can’t just start a Tween() and set it loose. It may get garbage collected and stop in the middle! I was having so many problems with this until I saw this post about Tweens stopping randomly.

   You’d think if they were trying to make this easy to use, Flash developers would have built in a safeguard for that. But, of course, this is Adobe and they rarely actually implement anything that would work in the real world. Hence someone had to write Tweener or TweenLite, basically to replace functionality that Adobe screwed up yet again.

   Comment by Tyler — 18 May 2009 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: This post is over 2 years old. You may want to check later in this blog to see if there is new information relevant to your comment.

Notify me of followup comments via e-mail.