I’ve tried out various animation/tweening packages and one of the features I really liked with one or two was the ability to put in a delay before the tween. Many times I’ll list out several tweens, one after another, but I’d like to stagger them. Not sure how other people handle it but I like when its built into whatever tweening package I’m using.

Recently I switched to using Macromedia’s Tween class since the one I was using at the time seemed to be unstable. I converted all the tweens over to mx.transitions.Tween and everything has been working much better ever since.

My only complaint? There’s no delay parameter to pass with a new tween. My solution? I played around with extending the class and ended up with TweenDelay. The only new param is “delay” which will cause the tween to wait before executing. I thought about wrapping the Tween class in my own class, but then I’d have to expose all the API’s to the Tween class so I went this route.

Here are two examples, one using Tween, the other using TweenDelay:

Tween:

 

TweenDelay:

 

You can use TweenDelay the same way you use Tween. There’s just a new param to pass in. Set it to zero if you don’t want a delay.

Actionscript
new TweenDelay(obj, prop, func, begin, finish, duration, delay, useSeconds);

new TweenDelay(box3_mc, "_x", Regular.easeOut, box3_mc._x, 320, 2, .5, true);

The above line would move box3_mc along the x-axis to 320. It would take 2 seconds, but wouldn’t start for half a second.

There’s a good intro to using Macromedia’s tweening classes here:
http://www.macromedia.com/devnet/mx/flash/articles/tweening.html

You can download TweenDelay here.

There’s a sample fla included. Please feel free to give me any feedback, especially bugs. This was my first time extending a Macromedia class.

11 Responses to “mx.transitions.Tween extended”

  1. pete Says:

    why dont you release this as an MXP ?

  2. Tim Says:

    What advantages does it have as an MXP really? I prefer to just distribute the source code for any classes I happen to release.

  3. flashape Says:

    from the title of your post I thought you were talking about the TweenExtended class here: http://www.sqcircle.com/downloads/

  4. Tim Says:

    Sorry for the confusion. I first wrote this post back in the summer before I was aware of that class.

  5. Stéphane Poison Says:

    Finally I find the solution with the extended Tween to load entire interface using only AS, extended tweens are awesome !
    Thanks.

  6. Danro Says:

    Hey Tim, I like the TweenDelay class… what if I would like to stop the delay in progress, would I need to do a clearInterval(tweenObj.delay) ?

    You could probably overwrite the Tween.stop method do clear the interval and then run super.stop();

    What do you think?

  7. Tim Says:

    Good point. I’ll update and post an new version.

  8. Adam Says:

    I’m trying to get this to work on _alpha. In particular I’d like to delay an alpha from 0 to 100. but I can’t get it to work, anyone have any ideas?

    Thanks in advance.

  9. Tim Says:

    I just tried the above example using _alpha instead and it worked fine.

  10. yuki Says:

    I used for scaling. It works! Thanks!

  11. Visual Flow Designs » Blog Archive » Hold on a Second Says:

    [...] the start of a tween. A while back I took my own shot at this based off of another class that I found and came up with: import mx.transitions.Tween; class com.vfd.animation.tweens.DelayedTween extends [...]

Leave a Reply