...

View Full Version : Resolved Flex Slideshow Choppy when going to second slide



xheartonfire43x
11-02-2009, 06:23 PM
I am building a photo slideshow for a clients website that runs a photo and quote to go along with the photo.
So before I put up the code I will give you the breakdown of how it works.

First the photo fades in
The the photo fades out while text fades in to the right of the photo.
Then the text fades out while the next photo fades in
and so on...

The problem is that it does the first slide (photo then text) just fine. After that when it is supposed to fade out the text it starts jumping. It never makes it to the second slide.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="images.send()"
width="1005" height="356" backgroundColor="#634B2B"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Style>
@font-face{
font-family: Myriad;
src: url("assets/MyriadWebPro.ttf");
}
.featuredText{
font-family: Myriad;
font-size: 16px;
color: #FFFFFF;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.events.EffectEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
private var imageList:XMLListCollection;
private var theTimer:Timer;
private var currentImageIndex:int = 0;
/*private function httpFaultHandler(event:FaultEvent):void{
Alert.show("There was a problem","Error");
}*/
private function httpResultHandler(event:ResultEvent):void{
var xList:XMLList = new XMLList(event.result as XML);
imageList = new XMLListCollection(xList.children());
fadeImage(event);
}


/* Function to fade image */
private function fadeImage(event:Event):void{
ftFadeOut.play();
fiFadeIn.play();
featuredImage.source = imageList[currentImageIndex].child("image").toString();
}
/* Function to fade text */
private function fadeText(event:Event):void{
fiFadeOut.play();
ftFadeIn.play();
featuredText.text = imageList[currentImageIndex].child("text").toString();
/* //Tells loop to move to the next slide
currentImageIndex++;
if(currentImageIndex == imageList.length) currentImageIndex = 0;*/
}

/* Function to run a timer */
private function startTimer(event:Function,time:Number):void{
theTimer = new Timer(time);
theTimer.addEventListener(TimerEvent.TIMER, event);
theTimer.start();
}
]]>
</mx:Script>
<mx:HTTPService id="images" url="images.xml"
result="httpResultHandler(event)"
resultFormat="e4x" />
<!-- Image Fades -->
<mx:Fade id="fiFadeOut" alphaFrom="1" alphaTo="0" duration="1000" target="{featuredImage}" />
<mx:Fade id="fiFadeIn" alphaFrom="0" alphaTo="1" duration="1000" target="{featuredImage}" effectEnd="startTimer(fadeText,2000)"/>
<!-- Text Fades -->
<mx:Fade id="ftFadeOut" alphaFrom="1" alphaTo="0" duration="1000" target="{featuredText}" />
<mx:Fade id="ftFadeIn" alphaFrom="0" alphaTo="1" duration="1000" target="{featuredText}" effectEnd="startTimer(fadeImage,3000)" />
<mx:HBox x="0" y="0" width="100%">
<mx:Image id="featuredImage" scaleContent="true" width="805" height="356"/>
<mx:VRule height="100%" strokeColor="#FFFFFF"/>
<mx:Text id="featuredText" styleName="featuredText" width="200" height="356" textAlign="center"/>

</mx:HBox>
</mx:Application>


images.xml


<?xml version="1.0" ?>
<slides>
<slide>
<image>assets/1.jpg</image>
<text>Some Zombies</text>
</slide>
<slide>
<image>assets/2.jpg</image>
<text>Some More Zombies</text>
</slide>
<slide>
<image>assets/3.jpg</image>
<text>Even More Zombies</text>
</slide>
</slides>

xheartonfire43x
11-02-2009, 08:35 PM
I figured it out. All I had to do was reset the timer if it had already run.



/* Function to run a timer */
private function startTimer(runThis:Function,time:Number):void{
if(theTimer != null)theTimer.reset();
theTimer = new Timer(time);
theTimer.addEventListener(TimerEvent.TIMER, runThis);
theTimer.start();
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum