Loading external images then fading between them using ActionScript 3.0...?

Question

Hi,

I'm using the Loader class in AS3.0 to load external images. I need to load a random image each time and I'm using a timer to load a new image after 5 seconds or so. When I load the first image, I call...

myMovieClip.addChild(loader);

After the first time I call...

if (myMovieClip.numChildren > 0) {
  myMovieClip.addChildAt(loader, 1);
}

So, this should add the newly loaded image behind the first one...that seems to be working...

The next step I want to do is to fade between these two clips, so the one in front fades out over a couple of seconds and is then finally removed when it is invisible. After another few seconds I load the next one and repeat the process.

At present, I start a timer and when it fires I do this...

if (Loader(myMovieClip.getChildAt(0)).content.alpha <= 0)
{
  // Check if the alpha value is 0...if so, remove the image and stop the timer
  myMovieClip.removeChildAt(0);
  timer.stop();
}
else
{
  // Increase transparency
  Loader(myMovieClip.getChildAt(0)).content.alpha -= 0.1;
}

The problem is that my fading routine does not work. One image loads, and the next one appears straight away when it is finished loading.

My code feels like a bit of a hack...is there a nicer way that actually works...?

Answer 1

Try using the AS3 Tween class: http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/fl/transitions/Tween.html

By using this, whenever you load in another image simply make a tween to fade out the existing image and another tween to fade in the new image.

Here's an example using the Tween class: http://www.zedia.net/actionscript-3-tweens-tutorial/

Answer 2

A few pointers.

Before adding an image, make sure its alpha equals 0, otherwise your image will show instantly.

Fox is right, you can use a class to handle the fading or your images, namely the tweening of the image's alpha property. I personally prefer to use TweenMax or TweenLite (greensock.com), but there are many different classes out there that can handle this very well.

You can use the onComplete event of your tweening class to remove an image when it's not visible anymore.

You have to make sure that the next image is loaded before starting your fading routine, so I'd suggest calling the next image as soon as the previous one has loaded and having a Boolean to check against before starting the fading routine.