PDA

View Full Version : Help with Slideshow


nul0t
02-17-2009, 04:14 AM
I'm new to Flex but I have experience in ActionScript. After reading a few tutorials I created a slideshow. I used some of the code from the tutorials I read (please excuse any messiness). The photos for this slideshow are pulled in from an XML file, right now it's local but eventually it will be externally hosted.

I used a pre-loader script to pull the images from the XML and place them in an array which I use to reference. At first the slideshow seems to work fine but once it repeats the photos no longer load. I tired several changes but I am puzzled why it only works once. I appreciate any help.

Slideshow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="768" width="1024" creationComplete="loadXML('photos.xml')" backgroundColor="#000000">
<mx:Style>
Label {
color: #ffffff;
font-family: "Verdana";
font-weight: bold;
font-size: 12px;
}

.header {
font-size: 16px;
}

.rightAlign {
text-align: right;
}

</mx:Style>


<mx:Script>
<![CDATA[
import flash.trace.Trace;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.text.TextField;
import flash.net.URLRequest;
import mx.effects.easing.*;

private var photoCounter:Number = 0;
private var photoXML:XML = new XML();
private var totalPhotos:int;
private var lastPhoto:int = 1;


/**
*Image Loader Script
*@author Joshua Granick
*/

private var images:Array;
private var imagesLoaded:uint;


private function begin ():void {

for each (var image:Bitmap in images) {
//trace(image);
}

}


private function createImageHandler (imageIndex:uint):Function {

var loadHandler:Function = function (event:Event):void {

var image:Bitmap = event.target.content as Bitmap;
image.smoothing = true;
images[imageIndex] = image;

imagesLoaded ++;

if (imagesLoaded == images.length) {

begin ();

}

}

return loadHandler;

}


private function loadImage (path:String, imageIndex:uint):void {

var loadHandler:Function = createImageHandler (imageIndex);

var imageLoader:Loader = new Loader ();
imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadHandler);
imageLoader.load (new URLRequest (path));

}


private function loadXML (path:String):void {

var xmlLoader:URLLoader = new URLLoader ();
xmlLoader.addEventListener (Event.COMPLETE, loadXML_onXMLLoaded);
xmlLoader.load (new URLRequest (path));

}


private function parseXML (xml:XML):void {

var imageData:XMLList = xml.photo;
totalPhotos = imageData.length();

images = new Array (imageData.length ());
imagesLoaded = 0;

for (var i:uint = 0; i < imageData.length (); i++) {
loadImage (xml.photo[i].url, i);
if (i == imageData.length()-1) {
finishedXMLLoad();
}
}

}

// Event Handlers

private function loadXML_onXMLLoaded (event:Event):void {
parseXML (new XML (event.target.data));
}

public var myTimer:Timer = new Timer(5000, 0);

private function finishedXMLLoad():void {
myTimer.addEventListener("timer", beginSlideshow);
myTimer.start();
}

/**
* Start Slideshow
**/

public var currPhoto:int = 0;

private function beginSlideshow(event:TimerEvent):void {
if(currPhoto > totalPhotos -1) {
currPhoto = 0;
}
imgHolder1.setStyle("hideEffect", fade);
imgHolder2.setStyle("hideEffect", fade);

if (lastPhoto == 1) {
imgHolder1.visible = false;
imgHolder2.visible = true;

var photoURL:Object = images[currPhoto];

imgHolder2.source = photoURL;
txtTitle.text = "PhotoCounter = " + currPhoto;
lastPhoto = 2;

} else {
imgHolder2.visible = false;
imgHolder1.visible = true;

var photoURL2:Object = images[currPhoto];

imgHolder1.source = photoURL2;
txtTitle.text = "PhotoCounter = " + currPhoto;
lastPhoto = 1;
}
currPhoto++;
}
]]>
</mx:Script>

<mx:Fade id="fade" duration="2000" />
<mx:Rotate id="rotate"
angleFrom="-180"
angleTo="0"
easingFunction="Elastic.easeInOut"
duration="2000" />

<mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" duration="4000" />

<mx:Label x="10" y="10" text="Flex Slideshow" id="lblTitle" styleName="header"/>
<mx:Canvas x="10" y="40" width="238" height="352" themeColor="#FFFFFF" borderColor="#FFFFFF" borderStyle="none" backgroundColor="#FFFFFF">
<mx:Image x="2" y="2" styleName="img1" id="imgHolder1" width="234" height="350" showEffect="{fadeIn}" />
<mx:Image x="2" y="2" styleName="img2" id="imgHolder2" width="234" height="350" showEffect="{fadeIn}" />
</mx:Canvas>
<mx:Label x="10" y="400" width="234" id="txtTitle" styleName="rightAlign"/>

</mx:Application>

photos.xml


<?xml version="1.0" standalone="yes"?>
<PhotoGallery>
<photo>
<url>photos/eiffel.jpg</url>
<title>Eiffel Tower</title>
</photo>
<photo>
<url>photos/goldengate.jpg</url>
<title>Golden Gate Bridge</title>
</photo>
<photo>
<url>photos/pisa.jpg</url>
<title>Leaning Tower of Pisa</title>
</photo>
<photo>
<url>photos/taj.jpg</url>
<title>Taj Mahal</title>
</photo>
<photo>
<url>photos/towerbridge.jpg</url>
<title>Tower Bridge</title>
</photo>
</PhotoGallery>