AS3 XML Slideshow Woes
- by Chris
Hello All,
I am hoping someone out there can possibly shed some light on a couple issues I am having with an image slideshow
I have been working on a simple slideshow for a project and everything was going great/as expected up until I created a function to hide the previous images before displaying the next. On the first pass through everything seems to run fine; once the slideshow starts over, the images don't show up, yet when it goes to load the following image, it plays the tween from the hide previous function which shows the image briefly before fading out. So essentially the display is blank, then the timer calls in the next slide and its a brief flash of an image fading out, and then blank again.
Another issue I am having is the text that I am loading in from the XML does not seem to want to tween in or out as they are supposed to.
Here is the code:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
var filePath:String = "photo1.xml";
var iArray:Array = new Array();
var titleArray:Array = new Array();
var dateArray:Array = new Array();
var catArray:Array = new Array();
var descArray:Array = new Array();
var rotationSpeed:Number;
var totalImages:Number;
var dataList:XMLList;
var imagesLoaded:Number = 0;
var currImage:Number = 0;
var rotationTimer:Timer;
var oldTween:Tween;
var imageContainer:Sprite = new Sprite();
var imageHolder:Sprite = new Sprite();
var titleContainer:Sprite = new Sprite();
var dateContainer:Sprite = new Sprite();
var catContainer:Sprite = new Sprite();
var descContainer:Sprite = new Sprite();
var theMask:Sprite = new Sprite();
theMask.graphics.beginFill(0x000000);
theMask.graphics.drawRect(114, 25, 323, 332);
addChild(theMask);
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest(filePath));
function onComplete (evt:Event):void{
var pigData:XML = new XML(evt.target.data);
pigData.ignoreWhitespace;
dataList = pigData.pic;
totalImages = dataList.length();
rotationSpeed = pigData.@speed * 1000;
stage.scaleMode = StageScaleMode.NO_SCALE;
loadImages();
rotationTimer = new Timer(rotationSpeed);
rotationTimer.addEventListener(TimerEvent.TIMER, rotateImage);
rotationTimer.start();
}
function loadImages() {
for (var i:Number = 0; i < totalImages; i++) {
var imageURL:String = dataList[i].big;
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest(imageURL));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
iArray.push(imageLoader);
var titleField:TextField = new TextField();
var dateField:TextField = new TextField();
var catField:TextField = new TextField();
var descField:TextField = new TextField();
titleField.text = dataList[i].title;
titleField.autoSize = TextFieldAutoSize.LEFT;
titleArray.push(titleField);
dateField.text = dataList[i].date;
dateField.autoSize = TextFieldAutoSize.LEFT;
dateArray.push(dateField);
catField.text = dataList[i].category;
catField.autoSize = TextFieldAutoSize.LEFT;
catArray.push(catField);
descField.text = dataList[i].description;
descField.autoSize = TextFieldAutoSize.LEFT;
descArray.push(descField);
}
}
function imageLoaded(evt:Event):void {
imagesLoaded++;
if (imagesLoaded == totalImages) {
showImage();
}
}
function showImage():void {
addChild(imageContainer);
imageContainer.addChild(imageHolder);
imageContainer.addChild(titleContainer);
imageContainer.addChild(dateContainer);
imageContainer.addChild(catContainer);
imageContainer.addChild(descContainer);
changeImage();
}
function changeImage():void {
var currentImage:Loader = Loader(iArray[currImage]);
imageHolder.addChild(currentImage);
currentImage.x = (stage.stageWidth - currentImage.width)/2;
currentImage.y = (imageHolder.height - currentImage.height)/2;
imageHolder.mask = theMask;
new Tween(imageHolder, "alpha", Regular.easeOut, 0, 1, 1, true);
var titleField:TextField = TextField(titleArray[currImage]);
titleContainer.addChild(titleField);
titleField.x = 107;
titleField.y = 365;
var titleTween:Tween = new Tween(titleField, "alpha", Regular.easeOut, 0, 1, 1, true);
var dateField:TextField = TextField(dateArray[currImage]);
dateContainer.addChild(dateField);
dateField.x = 107;
dateField.y = 375;
var dateTween:Tween = new Tween(dateField, "alpha", Regular.easeOut, 0, 1, 1, true);
var catField:TextField = TextField(catArray[currImage]);
catContainer.addChild(catField);
catField.x = 107;
catField.y = 385;
var catTween:Tween = new Tween(catField, "alpha", Regular.easeOut, 0, 1, 1, true);
var descField:TextField = TextField(descArray[currImage]);
descContainer.addChild(descField);
descField.x = 107;
descField.y = 395;
var descTween:Tween = new Tween(descField, "alpha", Regular.easeOut, 0, 1, 1, true);
}
function rotateImage(evt:TimerEvent) {
hidePrev();
currImage++;
if (currImage == totalImages) {
currImage = 0;
}
changeImage();
}
function hidePrev():void{
var oldImage:Loader = Loader(imageHolder.getChildAt(0));
oldTween = new Tween(oldImage,"alpha", Regular.easeOut, 1, 0, 1, true);
oldTween.addEventListener(TweenEvent.MOTION_FINISH, onFadeOut)
var oldTitle:TextField = TextField(titleContainer.getChildAt(0));
var oldTitleTween:Tween = new Tween(oldTitle,"alpha", Regular.easeOut, 1, 0, 1, true);
var oldDate:TextField = TextField(dateContainer.getChildAt(0));
var oldDateTween:Tween = new Tween(oldDate,"alpha",Regular.easeOut,1,0,1,true);
var oldCat:TextField = TextField(catContainer.getChildAt(0));
var oldCatTween:Tween = new Tween(oldCat,"alpha",Regular.easeOut,1,0,1,true);
var oldDesc:TextField = TextField(descContainer.getChildAt(0));
var oldDescTween:Tween = new Tween(oldDesc,"alpha",Regular.easeOut,1,0,1,true);
}
function onFadeOut(evt:TweenEvent):void{
imageHolder.removeChildAt(0);
titleContainer.removeChildAt(0);
dateContainer.removeChildAt(0);
catContainer.removeChildAt(0);
descContainer.removeChildAt(0);
}
I'm no flash whiz, bet can generally figure most issues out by either analyzing the code, or digging around online; however, this has me stumped.
Any help would really be appreciated, and I thank you all in advance.
