6 Replies Latest reply on May 1, 2006 12:00 PM by Peter Lorent

    Flash XML Slideshow - Load next image after set amount of time

    Robert_(IT-FX)
      I'm creating flash xml slideshow and have managed to get the images to load from the XML file. What I want to do now is have a timer that loads the next image after x amount of seconds. Any help would be great.

      Code sample


      stop();

      // Create XML Object
      slideshow_xml = new XML();

      // Start slideshow once XML file is loaded
      slideshow_xml.onLoad = startSlideShow;

      //Load XML file
      slideshow_xml.load("slideshow.xml");

      //Ignore Whitespace in XML Document
      slideshow_xml.ignoreWhite = true;

      //Create Function for Slideshow - Shows first slide and initalises variables
      function startSlideShow(success) {
      if (success == true) {
      rootNode = slideshow_xml.firstChild;
      totalSlides = rootNode.childNodes.length;
      firstSlideNode = rootNode.firstChild;
      currentSlideNode = firstSlideNode;
      currentIndex = 1;
      updateSlide(firstSlideNode);
      }
      }

      function updateSlide(newSlideNode) {
      imagePath = newSlideNode.attributes.jpgURL;
      slideText = newSlideNode.firstChild.nodeValue;
      loadMovie(imagePath, loadTarget);
      }
        • 1. Re: Flash XML Slideshow - Load next image after set amount of time
          Robert_(IT-FX) Level 1
          I've added the following code to the bottom of the code I posted previously

          slideTimer = setInterval(updateSlide, 5000);

          It loads the first image as indicated by the xml file but it doesn't load the second image saying it is undefined however it looks ok when I rechecked it. Can someone tell me if I am parsing the paramaters to the setInterval function correctly?
          • 2. Re: Flash XML Slideshow - Load next image after set amount of time
            Peter Lorent Level 2
            You're not passing anything to the updateSlide function. Pass a parameter:
            slideTimer = setInterval(updateSlide, 5000, secondSlide);
            where secondSlide should be the correct node in the xml.
            • 3. Re: Flash XML Slideshow - Load next image after set amount of time
              Robert_(IT-FX) Level 1
              Ok I've added the following code



              function nextSlideImage() {
              nextSlideNode = currentSlideNode.nextSibling;
              if (nextSlideNode == null) {
              break;
              } else {
              currentIndex++;
              updateSlide(nextSlideNode);
              currentSlideNode = nextSlideNode;
              }
              }



              It's working now however where I have the break in the above function, how do I get the process to repeat. I can copy the code from the startSlideShow function but surely there is a way to call the function again. Any help is really appreciated.
              • 4. Re: Flash XML Slideshow - Load next image after set amount of time
                Peter Lorent Level 2
                Maybe something like

                function nextSlideImage() {
                nextSlideNode = currentSlideNode.nextSibling;
                if (nextSlideNode == null) {
                rootNode = slideshow_xml.firstChild;
                totalSlides = rootNode.childNodes.length;
                firstSlideNode = rootNode.firstChild;
                currentSlideNode = firstSlideNode;
                currentIndex = 1;
                updateSlide(firstSlideNode);
                } else {
                currentIndex++;
                updateSlide(nextSlideNode);
                currentSlideNode = nextSlideNode;
                }
                }
                • 5. Re: Flash XML Slideshow - Load next image after set amount of time
                  Robert_(IT-FX) Level 1
                  Ok I've managed to get most of this working including the alpha fade in. I haven't been able to get the images to fade out (fadeImageOut function) so if someone can tell me what I'm doing wrong. Also should I have some sort of preloader function for when each image loads? and if so any pointers, then it should be done except that I might need to add some text for each image in the XML file.




                  stop();

                  var container:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());

                  var loader1:MovieClip = this.createEmptyMovieClip("loader1", this.getNextHighestDepth());

                  var loader2:MovieClip = this.createEmptyMovieClip("loader2", this.getNextHighestDepth());

                  container._x = 0;
                  container._y = 0;

                  function fadeImageIn() {
                  var fadeTween = new mx.transitions.Tween(loader1, "_alpha", mx.transitions.easing.Regular.easeIn, 0, 100, 1.5, true);
                  loadmovie(imagePath, loader1);
                  }

                  function fadeImageOut(loader1) {
                  var fadeTween = new mx.transitions.Tween(loader1, "_alpha", mx.transitions.easing.Regular.easeOut, 100, 0, 1.5, true);
                  unloadMovie(loader1);
                  }

                  // Create XML Object
                  slideshow_xml = new XML();

                  // Find out what this does
                  slideshow_xml.onLoad = startSlideShow;

                  //Load XML file
                  slideshow_xml.load("slideshow.xml");

                  //Ignore Whitespace in XML Document
                  slideshow_xml.ignoreWhite = true;

                  //Create Function for Slideshow - Shows first slide and initalises variables
                  function startSlideShow(success) {
                  if (success == true) {
                  rootNode = slideshow_xml.firstChild;
                  totalSlides = rootNode.childNodes.length;
                  firstSlideNode = rootNode.firstChild;
                  currentSlideNode = firstSlideNode;
                  currentIndex = 1;
                  updateSlide(firstSlideNode);
                  }
                  }

                  function updateSlide(newSlideNode) {
                  imagePath = newSlideNode.attributes.jpgURL;
                  slideText = newSlideNode.firstChild.nodeValue;
                  //loadMovie(imagePath, loader1);
                  fadeImageIn();
                  }

                  function nextSlideImage() {
                  nextSlideNode = currentSlideNode.nextSibling;
                  if (nextSlideNode == null) {
                  rootNode = slideshow_xml.firstChild;
                  totalSlides = rootNode.childNodes.length;
                  firstSlideNode = rootNode.firstChild;
                  currentSlideNode = firstSlideNode;
                  currentIndex = 1;
                  updateSlide(firstSlideNode);
                  } else {
                  currentIndex++;
                  updateSlide(nextSlideNode);
                  currentSlideNode = nextSlideNode;
                  }
                  }


                  slideTimer = setInterval(nextSlideImage, 5000);
                  • 6. Re: Flash XML Slideshow - Load next image after set amount of time
                    Peter Lorent Level 2
                    >>Ok I've managed to get most of this working including the alpha fade in.
                    function fadeImageIn() {
                    var fadeTween = new mx.transitions.Tween(loader1, "_alpha", mx.transitions.easing.Regular.easeIn, 0, 100, 1.5, true);
                    loadmovie(imagePath, loader1);
                    }
                    Either the last line contains a typo (it's loadMovie with capital M) or you call a function that you don't show here. If it's a typo then maybe this works when testing locally but it won't work online. You need to load the jpg first and when it's completely loaded you can perform the tween. Hit F1 and search for loadMovie() for examples how to use the function (use the MovieClip.loadMovie() instead of the global function). And if you are targeting the Flash Player 7, I would use the MovieClipLoader Class.

                    >>I haven't been able to get the images to fade out (fadeImageOut function)
                    I don't see any call to the function so that's probably what is wrong.
                    function fadeImageOut(loader1) {
                    var fadeTween = new mx.transitions.Tween(loader1, "_alpha", mx.transitions.easing.Regular.easeOut, 100, 0, 1.5, true);
                    unloadMovie(loader1);
                    }
                    This won't work. The code will be executed right away. If you first want to fade out you will have to use unloadMovie() in a function you define for the onMotionFinished handler of the tween:
                    function fadeImageOut(loader1) {
                    var fadeTween = new mx.transitions.Tween(loader1, "_alpha", mx.transitions.easing.Regular.easeOut, 100, 0, 1.5, true);
                    fadeTween.onMotionFinished=function(){
                    unloadMovie(loader1);
                    }
                    }
                    But, when you remove the loader1 then how are you going to load new content?

                    The script still needs some work. On kirupa.com (and other sites) you will find good tutorials on this topic. I would look into them before you proceed.