flash as3 Fadein fadeout xml slideshow - actionscript-3

Question

I am new to as3.0 and want to complete my project.
I am using the below code for my xml slideshow but I want the pictures to fade into each other it should never fade to complete white. Hope any expert can help me.
import gs.*;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import fl.transitions.easing.*;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//hides the description box until the image is loaded
//hides the image until it is loaded
theImage.alpha=0;
loadingBar.visible = false;
//variables to hold the final coordinates of the image tween
var finalX:Number;
var finalY:Number;
//variable to hold the number of images in the XML
var listLength:Number;
//keeps track of what image should be displayed
var currPainting:Number=0;
//arrays to hold the contents of the XML, using this to allow
//for the random order of the images
var imageArray:Array = new Array();
//Loader event for the XML
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);
var xml:XML;
loader.load(new URLRequest("galleries/xml/maingallery.xml"));
function onLoaded(e:Event):void {
//load XML
xml=new XML(e.target.data);
var il:XMLList=xml.images;
listLength=il.length();
populateArray();
}
function populateArray():void {
//takes the properties defined in the XML and stores them
//into arrays
var i:Number;
for (i = 0; i < listLength; i++) {
imageArray[i]=xml.images[i].pic;
}
beginImage();
}
function beginImage():void {
//grabs a random number between 0 and the number
//of images in the array
//load description
var imageLoader = new Loader();
//catches errors if the loader cannot find the URL path
imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, catchFunction);
//actually loads the URL defined in the image array
imageLoader.load(new URLRequest(imageArray[currPainting]));
//adds a listener for while the image is loading
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgLoading);
//adds a listener for what to do when the image is done loading
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
function catchFunction(e:IOErrorEvent) {
trace("Bad URL: " + imageArray[currPainting] + " does not exist");
//take out the bad URL from the array
imageArray.splice(currPainting,1);
//check to see if there are images left,
//else restart the slideshow
if (imageArray.length==0) {
populateArray();
} else {
beginImage();
}
}
function imgLoading(event:ProgressEvent):void{
//show the loading bar, and update the width
//based on how much is loaded
loadingBar.visible = true;
loadingBar.bar.scale = (event.bytesLoaded/event.bytesTotal)*100;
loadingBar.x = stage.stageWidth/2;
loadingBar.y = stage.stageHeight - 400;
}
var widthRatio:Number;
var heightRatio:Number;
function imgLoaded(event:Event):void {
loadingBar.visible = false;
//add the image and get the dimensions to center the image
theImage.addChild(imageLoader);
if (imageLoader.width > stage.stageWidth){
widthRatio=imageLoader.width/stage.stageWidth;
trace(widthRatio)
trace(imageLoader.width);
}
if (imageLoader.height > stage.stageHeight - 207){
heightRatio=imageLoader.height/(stage.stageHeight - 207) ;
trace(heightRatio)
trace(imageLoader.height)
}
if (widthRatio > heightRatio){
imageLoader.width = stage.stageWidth;
imageLoader.height = imageLoader.height/widthRatio;
} else {
imageLoader.height = stage.stageHeight - 207;
imageLoader.width = imageLoader.width/heightRatio;
}
imageLoader.x = (imageLoader.stage.stageWidth / 2) - (imageLoader.width / 2);
imageLoader.y = 0
//take the contents of the loaded image and cast it as bitmap data
//to allow for bitmap smoothing
var image:Bitmap = imageLoader.content as Bitmap;
image.smoothing=true;
//start tween function
easeIn();
}
}
function easeIn():void {
TweenLite.to(theImage, 5, {onComplete:hideStuff});
TweenLite.to(theImage, 1, {alpha:1, overwrite:0});
}
function hideStuff():void {
TweenLite.to(theImage, 1, {alpha:0, onComplete:nextImage});
}
function nextImage():void {
//take out the image that was just displayed
imageArray.splice(currPainting,1);
//remove the picture
theImage.removeChildAt(0);
//start over
if (imageArray.length==0) {
populateArray();
} else {
beginImage();
}
}

Answer 1

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()
}