2 Replies Latest reply on Jun 24, 2008 6:30 AM by Randy64

    Help with Flex preloading and transitions please

    KitTenapult
      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>