Ultra-compact crossfades with TweenLite
I love TweenLite, Jack Doyle’s lightweight tweening engine. Its a bit of a cheat, but we’ve all got to have our little tricks and time-saving moves when deadlines are looming and your fingertips are melting.
I’ve just been coding up a short script to crossfade video stills as you flick through using a navigator. I won’t go into the full code, but let’s suppose you have an array of display classes that hold images, and you are just looping through them. If you have a function called say 'showImage' with one parameter 'state' which is set to true or false – depending on whether you want to show or hide the image – then with TweenLite, you can do this:
public function showImage(state:Boolean) : void
{
TweenLite.to(this, state?0.5:1, {alpha:Number(state), visible:state});
}
And that’s it. What that means is that if you call 'showImage(true)' on one of your objects, it will have its 'visible' property set to true, and fade to full visibility in 0.5 seconds. If you call 'showImage(false)' on one of your objects, it will fade to alpha zero in 1 second (causing a nice overlap), then have its 'visible' property set to false on completion. Nice one, Jack.
If you haven’t that many objects, and don’t want to have to load up your server with a stack of calls to reload images, this is a cool little routine. If you want source code, just comment… I’ll see what I can do.
Edit: following a comment by @Justin Flash I’ve found there is an even quicker way…
public function showImage(state:Boolean) : void
{
TweenLite.to(this, state?0.5:1, {autoAlpha:Number(state)});
}
This assumes the “autoAlpha plugin” is activated in your TweenLite constructor.

June 1st, 2009 at 6:51 pm
Check out the autoAlpha property.
TweenLite.to(mc, 2, {autoAlpha:0});
TweenLite.to(mc, 2, {autoAlpha:100});
June 1st, 2009 at 10:01 pm
@Justin Flash – well, there you go. Sweet as can be – and I didn’t even know that existed. Should the alpha not be 0-1 (rather than 0 – 100) ?