4 Replies Latest reply on Aug 24, 2010 4:59 AM by nshull

    adding crossfade transitions to image gallery?

    nshull

      Hi everyone!  I have an XML image gallery that works great, but I'm not satisfied with how the images transition.  I'd like the old image to fade out while the new one is fading in whenever the viewer hits the previous or next button, so that way there's no blank background space between the transitions while the new image is being loaded.  Below is my code.  Any help or suggestions would be much appreciated!

       

      ________________________________________

       

      function loadXML(loaded) {
          if (loaded) {
              xmlNode = this.firstChild;
              image = [];
              description = [];
              //
              //define link variable
              //
              link = [];
              //
              total = xmlNode.childNodes.length;
              for (i=0; i<total; i++) {
                  image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
                  description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
                  //
                  //adding links
                  //
                  link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
                  //
              }
              firstImage();
          } else {
              content = "file not loaded!";
          }
      }
      xmlData = new XML();
      xmlData.ignoreWhite = true;
      xmlData.onLoad = loadXML;
      xmlData.load("image_and_link.xml");
      /////////////////////////////////////
      listen = new Object();
      listen.onKeyDown = function() {
          if (Key.getCode() == Key.LEFT) {
              prevImage();
          } else if (Key.getCode() == Key.RIGHT) {
              nextImage();
          }
      };
      /////////////////////////////////////
      p = 0;
      this.onEnterFrame = function() {
          filesize = picture.getBytesTotal();
          loaded = picture.getBytesLoaded();
          preloader._visible = false;
          if (loaded != filesize) {
              preloader.preload_bar._xscale = 100*loaded/filesize;
          } else {
              preloader._visible = false;
              if (picture._alpha<100) {
                  picture._alpha += 10;
              }
          }
          //
          //getURL statement
          //
          picture.onRelease = function() {
              getURL(link[p], "_blank");
          };
         
          //
      };
      function nextImage() {
          p<total-1 ? p++ : p=0;
          picture._alpha = 0;
          picture.loadMovie(image[p], 1);
      }
      function prevImage() {
          p>0 ? p-- : p=total-1;
          picture._alpha = 0;
          picture.loadMovie(image[p], 1);
      }
      function firstImage() {
          p = Math.floor(Math.random()*total);
              picture._alpha = 0;
          picture.loadMovie(image[p], 1);
          }
      previous_btn.onRelease = function() {
          slide = 0;
          prevImage();
      };
      next_btn.onRelease = function() {
          slide = 0;
          nextImage();
      };

       

      ________________________________________

        • 1. Re: adding crossfade transitions to image gallery?
          Ned Murphy Adobe Community Professional & MVP

          Just a couple of thoughts... you only need to transition/fade one image, either one (managing the depths for whichever you choose).  If you are using the same movieclip as the vehicle for loading the images, you cannot have the two of them present at the same time... only one can occupy that space at a time.  So you need to have a separate movieclip to hold each image that you load. You can use createEmptyMovieClip as a means of creating the different holding clips for loading the images in.

          1 person found this helpful
          • 2. Re: adding crossfade transitions to image gallery?
            nshull Level 1

            Thanks so much for the prompt response!  Yes, it appears I'm using the same movieclip for everything.  I understand what you're trying to say, but as an ActionScript newbie, I'm not quite sure how to implement createEmptyMovieClip.  Can you possibly elaborate further?

            • 3. Re: adding crossfade transitions to image gallery?
              Ned Murphy Adobe Community Professional & MVP

              As a newbie, one of the most important things you should learn is how to make use of the Flash Help documentation to find information on how things are used.  The documentation is full of examples that can help you learn as well.

               

              Google is also an excellent resource for finding learning materials.  While it is sometimes less liklely that you'll find tutorials for individual functions, if you search Google using "AS2 createEmptyMovieClip tutorial" as search terms you may find a few links that provide helpful info.

              1 person found this helpful
              • 4. Re: adding crossfade transitions to image gallery?
                nshull Level 1

                Okay, so the good news is I was able to figure out the createEmptyMovieClip thing - thanks for the suggestion!  The bad news is that once I implemented it, the images no longer cycle through, but the links and everything else work fine.  I think this is because I replaced the "firstImage();" line at the top with "id = setInterval(preloadPic, 100);". The firstImage lines are necessary though so that the first image generated by the gallery is random every time someone visits the page. However, I don't know how to make those 2 lines coexist.

                 

                The other issue is that the images no longer continously cycle at the beginning and end (meaning that if you hit the next button on image 7, it goes to image 1 and if you hit the previous button on image 1, it goes to image 7). I replaced the  function nextImage line p<total-1 ? p++ : p=0; with p<total-1 ? (p++, preloadPic()) : null; and the function prevImage line p>0 ? p-- : p=total-1; with p>0 ? (p--, preloadPic()) : null; so I know that's why it's not working.... I just don't know how to blend the 2 lines together so they work simultaneously too.

                 

                Below is my updated code. Any suggestions would be great!

                 

                 

                __________________________________________

                 

                function loadXML(loaded) {
                    if (loaded) {
                        xmlNode = this.firstChild;
                        image = [];
                        description = [];
                        //
                        //define link variable
                        //
                        link = [];
                        //
                        total = xmlNode.childNodes.length;
                        for (i=0; i<total; i++) {
                            image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
                            description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
                            //
                            //adding links
                            //
                            link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
                            //
                        }
                        id = setInterval(preloadPic, 100);
                    } else {
                        content = "file not loaded!";
                    }
                }
                xmlData = new XML();
                xmlData.ignoreWhite = true;
                xmlData.onLoad = loadXML;
                xmlData.load("image_and_link.xml");
                /////////////////////////////////////
                listen = new Object();
                listen.onKeyDown = function() {
                    if (Key.getCode() == Key.LEFT) {
                        prevImage();
                    } else if (Key.getCode() == Key.RIGHT) {
                        nextImage();
                    }
                };
                /////////////////////////////////////
                p = 0;
                this.onEnterFrame = function() {
                    filesize = picture.getBytesTotal();
                    loaded = picture.getBytesLoaded();
                    preloader._visible = false;
                    if (loaded != filesize) {
                        preloader.preload_bar._xscale = 100*loaded/filesize;
                    } else {
                        preloader._visible = false;
                        if (picture._alpha<100) {
                            picture._alpha += 10;
                        }
                    }
                    //
                    //getURL statement
                    //
                    picture.onRelease = function() {
                        getURL(link[p], "_blank");
                    };
                   
                    //
                };
                var current;
                var k = 0;
                function preloadPic() {
                    clearInterval(id);
                    var con = picture.duplicateMovieClip("con"+k, 9984+k);
                    con.loadMovie(image[p]);
                    preloader._visible = 1;
                    preloader.swapDepths(con.getDepth()+3);
                    con._alpha = 0;
                    var temp = _root.createEmptyMovieClip("temp"+k, 99+k);
                    k++;
                    temp.onEnterFrame = function() {
                        var total = con.getBytesTotal();
                        var loaded = con.getBytesLoaded();
                        percent = Math.round(loaded/total*100);
                        preloader.preload_bar._xscale = percent;
                        if (con._width) {
                            preloader._visible = 0;
                            con.onEnterFrame = fadeIn;
                            delete this.onEnterFrame;
                        }
                    };
                }

                 

                MovieClip.prototype.fadeIn = function() {
                    if (this._alpha<100) {
                        current._alpha -= 10;
                        this._alpha += 10;
                    } else {
                        current._visible = 0;
                        current = this;
                        delete this.onEnterFrame;
                    }
                };
                function nextImage() {
                    p<total-1 ? (p++, preloadPic()) : null;
                    picture._alpha = 0;
                    picture.loadMovie(image[p], 1);
                }
                function prevImage() {
                    p>0 ? (p--, preloadPic()) : null;
                    picture._alpha = 0;
                    picture.loadMovie(image[p], 1);
                }
                function firstImage() {
                    p = Math.floor(Math.random()*total);
                        picture._alpha = 0;
                    picture.loadMovie(image[p], 1);
                    }
                previous_btn.onRelease = function() {
                    slide = 0;
                    prevImage();
                };
                next_btn.onRelease = function() {
                    slide = 0;
                    nextImage();
                };

                 

                 

                 

                 

                 

                __________________________________________