What's a fast, efficient way of looping 4 images being faded one after another?

Question

I'm trying to figure out an easy way to fade 4 (or any number) images and loop it so the last image fades in with the first image. I threw something together which is pretty horrible, and doesn't even fade the last image into the first. The code is included below for you to laugh at.

Any idea how I could improve this?

function beginTween():void
{
TweenMax.to(bg01, 2, { alpha:1 });
TweenMax.to(bg01, 2, { alpha:0, delay:20 });

TweenMax.to(bg02, 2, { alpha:1, delay:20 });
TweenMax.to(bg02, 2, { alpha:0, delay:25 });

TweenMax.to(bg03, 2, { alpha:1, delay:25 });
TweenMax.to(bg03, 2, { alpha:0, delay:30 });

TweenMax.to(bg04, 2, { alpha:1, delay:30 });
TweenMax.to(bg04, 2, { alpha:0, delay:35 });

TweenMax.to(bg05, 2, { alpha:1, delay:35 });
TweenMax.to(bg05, 0.5, { alpha:0, delay:40, onComplete:beginTween });
}

beginTween();  

Answer 1

You can do it with a loop like this.

function beginTween():void {

    var bgs:Array = [bg01, bg02, bg03, bg04];
    var i:int = 0;

    for each(var bg:Sprite in bgs) {
        TweenMax.to(bg, 2, {alpha: 1, delay: i == 0 ? 0 : 15 + 5 * i});
        TweenMax.to(bg, i == 4 ? 0.5 : 2, {alpha: 0, delay: 20 + 5 * i, onComplete: i == 4 ? beginTween : null});
        i++;
    }
}

But I actually prefer your method. It's cleaner and easier to understand. Sometimes a little duplication is ok.

Answer 2

This is not tested, but is definitely the right idea.

var count:int;
var currentImage:Bitmap;
var images:Array = [];
images.push(img);
images.push(img);
images.push(img);
//etc...

function transitionImages():void {
    TweenMax.to(currentImage, 2, { alpha:0 });
    currentImage = images[++count % images.length];
    TweenMax.to(currentImage, 2, { alpha:1, onComplete:transitionImages });
}