I want to create an image slideshow. When the user clicks the next button, I want the current image to fade out and the next image to fade in. I’m using Loader to load images, using .load(new URLRequest(“imagename.jpg”). When the first image loads and next button is pressed, the image fades out just fine. The problem is when the second image loads. the image loads, but doesn’t fade in, it just appears without the tween. Here is my code:
import flash.display.MovieClip;
import flash.events.MouseEvent;
import com.greensock.*;
import com.greensock.easing.*;
var picLoader:Loader = new Loader();
var images:Array = new Array();
var currentIndex:int = 0;
var picsXML:XML;
var xmlLoader:URLLoader = new URLLoader();
var thePic:MovieClip = new MovieClip();
addChild(thePic);
thePic.addChild(picLoader);
xmlLoader.addEventListener(Event.COMPLETE,loadXML);
rightArrow.addEventListener(MouseEvent.CLICK,nextPic);
xmlLoader.load(new URLRequest("pics.xml"));
function loadXML(evt:Event):void
{
picsXML = new XML(evt.target.data);
xmlLoader.removeEventListener(Event.COMPLETE, loadXML);
for(var i:int=0;i<picsXML.image.length();i++)
{
images.push(picsXML.image*.filename);
}
picLoader.load(new URLRequest(images[currentIndex]));
}
function loadComplete(evt:Event):void
{
picLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadComplete);
//This tween never works
new TweenLite(picLoader,1,{alpha:100, ease:Back.easeOut});
}
function nextPic(evt:MouseEvent):void
{
picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
if(currentIndex == images.length-1)
{
return;
}
currentIndex++;
//This tween fades out correctly the first time, but doesn't work after the first time
new TweenLite(picLoader,1,{alpha:0, onComplete:fadeDone, ease:Back.easeOut});
}
function fadeDone():void
{
picLoader.load(new URLRequest(images[currentIndex]));
}