4 Replies Latest reply on Jul 8, 2009 2:53 AM by generalbatzorig

    Preload Images For Random Slideshow


      I am using a random slideshow on the homepage of my website. It worded perfect when I was testing it locally, but now that I've uploaded it to an external server which is a bit slower, and there is a delay between loading images. Here's the work in progress site:


      I know it has to do with the way the actionscript is written, and the order in which functions are carried out. I just cant seem to get it to function the way I would like it to.

      I would like it to immediately load the first image and display it, then while that first image is displayed I would like it to load the second image. Right now it waits until the first image finishes displaying to load the next image.

      Trying to get this site up this weekend, any ideas/help would be greatly appreciated.  Thanks.


        • 1. Re: Preload Images For Random Slideshow
          Ned Murphy Adobe Community Professional & MVP

          I can't access the file you uploaded, but here's what you might try...


          Keep the loading functionality isolated from the displaying functionality except for the first image... load the first as soon as it's ready, which should kick off the display cycling.


          Have a variable that keeps a count of the number of images that have loaded, and another that keeps track of which is being displayed--the intention being that these variables will be compared in order to see if the next to display has been loaded.


          Use a fixed timing scheme to control when images are normally switched, but include a check to see if the next image to be displayed is loaded or not, and if it isn't, use a brief time delay to call the function again to keep checking until that next file is indicated as being loaded.

          • 2. Re: Preload Images For Random Slideshow
            erik@postmillennium.com Level 1

            not sure why you couldn't access that file.. this is the actoinscript I'm using:



            content = " " ;
            loadVariables("index.php?" + (Math.random() * 1000000), this);
            var oldVar = 0;                              
            var newVar = 0;                          
            var si = 0;


            //: GET XML
            var my_xml = new XML();                                                          
            my_xml.ignoreWhite = true;                                                           
            my_xml.onLoad = function (success) {                                 
                if (success) {                                                                               
                    // now that the xml has loaded successfully
                    // lets setup our final variables
                    library = this.firstChild.childNodes;                                   
                    maxVal = library.length;


                    // now that we've retrieve our xml ...
                    delete my_xml;                                                                      


                } else {                                                                                              
                    desc_txt.text = 'Error: XML Not Loaded';                       


            //: LOAD THE NEXT IAMGE
            function getImage() {
                newVar = Math.floor(Math.random() * maxVal);                                                                           
                if (newVar == oldVar) {                                                                                                                              
                } else {                                                                                                                                                              
                    oldVar = newVar;                                                                                                                                       
                    container_mc.loadMovie (library[newVar].firstChild.firstChild.nodeValue);                 
                    container_mc._alpha = 0;                                                                                                                      
                    this.onEnterFrame = function () {                                                                                                    
                        if (container_mc._width > 0) {                                                                                                         
                            container_mc._x = Stage.width / 2 - container_mc._width / 2;                                  
                            container_mc._y = Stage.height / 2 - container_mc._height / 2;                              
                            container_mc.onEnterFrame = fadeIn;                                                                                    
                            delete this.onEnterFrame;                                                                                                               


            function fadeIn () {
                if (this._alpha <= 100) {                          
                    this._alpha += 20;                                   
                } else {                                                           
                    this._alpha = 100;                                  
                    delete this.onEnterFrame;                  
                    si = setInterval(fadeOut, 5000);       


            function fadeOut () {
                container_mc.onEnterFrame = function() {     
                    if (this._alpha >= 0) {                                              
                        this._alpha -= 20;                                                     
                    } else {                                                                        
                        this._alpha = 0;                                                     
                        delete this.onEnterFrame;                                 

            • 3. Re: Preload Images For Random Slideshow
              Ned Murphy Adobe Community Professional & MVP

              My inability to open the attachment may be a case of you using a Mac to zip the file.  In any case, my suggestion stands.  Do all of your loading separate from the displaying. You will want to use the MovieClipLoader class rather than the loadMovie method so that you can determine when a loading is complete.


              For the randomizing, you should just shuffle the library array and read from it in sequence rather than what you do now... unless you don't mind the same image appearing every other one on occasion.


              Rather than continually loading for every display event, load the images into containers and control their display thereafter.  This way you are only loading each image once, and not everytime it is deemed to be displayed.

              • 4. Re: Preload Images For Random Slideshow

                Hello Ned Murphy,

                I have a question. When making random image slideshows, most people are using XML file inserted into Flash and the images are stored outside of the Flash file. I wonder if that make the loading time longer? For example, if I want to make a slideshow in the index page using the images that will be displayed inside gallery, I am storing that same image within the Flash Library and also outside the file for the XML. Doesn't that make the Movie as a whole a little bigger than necessary?

                I don't know may be there is a way to use only one image for both random slideshow and the gallery. Hope my question makes sense.