Ok, first you need to create a variable for the image you wish to fade in. Let's organise it so it is clear which is which.
var theCurrentImage:DisplayObject;
var theNextImage:DisplayObject;
Load in the first image (now theCurrentImage
) in the same way as before.
Now here's how you could load in the next image in the array:
function loadNextImage():void {
currPainting++;
// you should also make sure currPainting is not out of bounds here
loadImage();
}
function loadImage():void {
imageLoader = new Loader();
imageLoader.addEventListener(Event.COMPLETE, onImageLoaded);
// other listeners go here too
imageLoader.load(new URLRequest(imageArray[currPainting]));
}
function onImageLoaded(e:Event):void {
theNextImage = imageLoader; // stores the next image ready to be faded in
theNextImage.alpha = 0;
addChild(theNextImage); // now ready to be cross-faded in
crossFade();
}
function crossFade():void {
TweenLite.to(theCurrentImage, 1, {alpha:0});
TweenLite.to(theNextImage, 1, {alpha:1});
// remove theCurrentImage (now invisible) from the stage
removeChild(theCurrentImage);
// theNextImage is now the displayed image so...
theCurrentImage = theNextImage;
theNextImage = null;
// ready to load the next image by calling loadNextImage()
}