Help with Flex preloading and transitions please

Question

I downloaded and installed Flex Builder 3, and I think I have
my slideshow project about 75% finished. It's the last 25% that I
can't figure out, regarding preloading and transitions. Can someone
take a look at the code below and see if you can help me? I tried
to write the code in such a way that you can debug it from any
computer as it's calling an PHP/XML file and images that are on a
server.
Here's what's finished...
1. PHP file looks at image files on server and builds XML
file.
2. Flex app calls PHP file and traverses the XML in the
response.
3. Flex app figures out how many "slides" there and displays
the slides one at a time, each slide with 3 images, with a 5 second
delay between "slides."
Here's what's not finished...
1. I would like a fade-out to white at the end of each slide,
and a fade-in from white at the beginning of each slide.
2. I need each slide to stay put intil the next slide is
pre-loaded. That is, during the 5 seconds that a slide is
displayed, the next 3 images need to be preloaded, and then the
slide should not progress to the next until slide is completely
loaded.
3. The very first slide should not appear until it is
completely loaded, and when it does appear, it should fade in from
white.
How do I do this?!? Please help! Here's the code...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" width="472" height="195"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]"
creationComplete="StartFunction();" >
<mx:Fade id="fadeOut" duration="2000" alphaFrom="1.0"
alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0"
alphaTo="1.0"/>
<mx:Image id="PhotoA" x="0" y="0" width="154"
height="195" />
<mx:Image id="PhotoC" x="318" y="0" width="154"
height="195" />
<mx:Image id="PhotoB" x="159" y="0" width="154"
height="195" />
<mx:Script>
<![CDATA[
private function StartFunction():void {
var oXML:XML = new XML();
var sXmlUrl:String = "
http://www.smis.org/templates/smis/slideshowxml.php";
var oUrlReq:URLRequest = new URLRequest(sXmlUrl);
var oUrlLoader:URLLoader = new URLLoader(oUrlReq);
oUrlLoader.addEventListener("complete", xmlLoaded);
function xmlLoaded(event:Event):void {
oXML = XML(oUrlLoader.data);
var iSlide:int = 0;
function ChangeImages():void {
PhotoA.load("
http://www.smis.org/" +
oXML.slide[iSlide].photo[0]["@filepath"]);
PhotoB.load("
http://www.smis.org/" +
oXML.slide[iSlide].photo[1]["@filepath"]);
PhotoC.load("
http://www.smis.org/" +
oXML.slide[iSlide].photo[2]["@filepath"]);
iSlide++;
if (iSlide >= oXML.children().length())
iSlide = 0;
PhotoA.load("
http://www.smis.org/" +
oXML.slide[iSlide].photo[0]["@filepath"]);
PhotoB.load("
http://www.smis.org/" +
oXML.slide[iSlide].photo[1]["@filepath"]);
PhotoC.load("
http://www.smis.org/" +
oXML.slide[iSlide].photo[2]["@filepath"]);
iSlide++;
if (iSlide >= oXML.children().length())
iSlide = 0;
setInterval(ChangeImages,5000);
]]>
</mx:Script>
</mx:Application>

Answer 1

What you've done is beyond my capabilities, as of now. But, I
ran into the same problem with the fading in and out of the photos.
Here's my solution.
I defined my fade with only the id and the duration
parameters. No 'from' and 'to'.
Then I used the 'showEffect' and 'hideEffect' parameters.
showEffect="{bannerFade}" hideEffect="{bannerFade}"
Works like a charm for my project.
I hope this helps.
Randy