5 Replies Latest reply on May 9, 2010 7:27 AM by kglad

    problem with order

    newcmr.hu

      Hi!

       

      I made an xml driven picture gallery. My problem is that somehow the script puts the thumbnails in a reversed order, and I can't find why. Maybe it is a very small and obvious problem, but I think I have been doing it for soo long that I can't see the program. The code is:

       

      // ////////////////// A terület méretének meghatározása ahol látszik a kép.
      var kepXmax = 600;
      var kepYmax = 405;
      // ////////////////// A betöltő mc x-y pozíciója
      kezdoX = 100;
      kezdoY = 50;
      p = 0;
      var w = 0;

       

      xml = new XML();
      xml.ignoreWhite = true;
      xml.onLoad = loadXML;
      xml.load("images.xml");

       

      function loadXML(loaded) {
          if (loaded) {
              xmlNode = this.firstChild;
              image = [];
              description = [];
              thumbnails = [];
              cat = [];
              total1 = xmlNode.childNodes.length;

       

              ///////////////////////As első alkalommal az első kategóriát állítjuk be
              if (category == undefined) {
                  category = xmlNode.childNodes[0].childNodes[3].firstChild.nodeValue;
              }
              ///////////////////////
              for (i=0; i<total1; i++) {
                  if (xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue == category) {

       

                      image[w] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
                      description[w] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
                      thumbnails[w] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
                      cat[w] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
                     
                      prevWidth = 0
                      prevX =110

       

                      thumbnails_fn(w);
                      w++;
                  }
              }
              total = w;
              firstImage();
          } else {
              content = "A fájl betöltése sikertelen!";
          }
      }

       

      /////////////////////////////////////
      listen = new Object();
      listen.onKeyDown = function() {
          if (Key.getCode() == Key.LEFT) {
              prevImage();
          } else if (Key.getCode() == Key.RIGHT) {
              nextImage();
          }
      };
      Key.addListener(listen);
      previous_btn.onRelease = function() {
          prevImage();
      };
      next_btn.onRelease = function() {
          nextImage();
      };
      /////////////////////////////////////

       

      this.onEnterFrame = function() {
          filesize = picture.getBytesTotal();
          loaded = picture.getBytesLoaded();
          preloader._visible = true;
          if (loaded != filesize) {
              preloader.preload_bar._xscale = 100*loaded/filesize;
          } else {
              preloader._visible = false;
              if (picture._alpha<100) {
                  picture._alpha += 10;
              }
              szelesseg = picture._width;
              magassag = picture._height;
              presel();
          }
      };
      function nextImage() {
          if (p<(total-1)) {
              p++;
              if (loaded == filesize) {
                  picture._alpha = 0;
                  picture.loadMovie(image[p],1);
                  desc_txt.text = description[p];
                  picture_num();
              }
          }
      }
      function prevImage() {
          if (p>0) {
              p--;
              picture._alpha = 0;
              picture.loadMovie(image[p],1);
              desc_txt.text = description[p];
              picture_num();
          }
      }
      function firstImage() {
          if (loaded == filesize) {
              picture._alpha = 0;
              picture.loadMovie(image[0],1);
              desc_txt.text = description[0];
              szelesseg = picture._width;
              magassag = picture._height;
              picture_num();
             
              presel();
             
             
          }
      }
      function picture_num() {
          current_pos = p+1;
          pos_txt.text = current_pos+" / "+total;
      }
      function thumbNailScroller() {
          // bélyegképek kódja
          this.createEmptyMovieClip("tscroller",1000);
          scroll_speed = 10;
          tscroller.onEnterFrame = function() {
              if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
                  if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {//a hitright ellenőrzi, hogy a thumbnail_mc még mindíg tart a hit_left alatt, nehogy túlscrollozzuk
                      thumbnail_mc._x -= scroll_speed;
                  } else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
                      thumbnail_mc._x += scroll_speed;
                  }
              } else {
                  delete tscroller.onEnterFrame;
              }
          };
      }
      function thumbnails_fn(k) {
          thumbnail_mc.createEmptyMovieClip("t"+k,thumbnail_mc.getNextHighestDepth());
          tlistener = new Object();
          tlistener.onLoadInit = function(target_mc) {//Ha betöltődött akép és lehet manipulálni
             
              target_mc._x = prevWidth+prevX
             
              prevWidth = target_mc._width+5
              prevX = target_mc._x
             
                             
              target_mc.pictureValue = k;
              target_mc.onRelease = function() {
                  p = this.pictureValue-1;//mivel a nextImage hozzáad egyet a p értékéhez
                  nextImage();
              };
              target_mc.onRollOver = function() {
                  this._alpha = 50;
                  thumbNailScroller();
              };
              target_mc.onRollOut = function() {
                  this._alpha = 100;
              };
          };
          image_mcl = new MovieClipLoader();
          image_mcl.addListener(tlistener);
          image_mcl.loadClip(thumbnails[k],"thumbnail_mc.t"+k);//betöltjük a movieclip-be a képet, majd meghívjuk a fentebbi onLoadInit-t

       

      }
      // ///////////////////////////// A képek scalezéséért felel
      function presel() {
          if ((szelesseg>kepXmax) || (magassag>kepYmax)) {
              // /// Ha a kép valamelyik oldala > mint a maximális (kepXmax,kepYmax)
              xoldal = szelesseg-kepXmax;
              yoldal = magassag-kepYmax;
              if (xoldal>yoldal) {
                  aranyx = kepXmax/szelesseg;
                  picture._width = aranyx*szelesseg;
                  picture._height = aranyx*magassag;
                  kozepre();
              } else if (yoldal>xoldal) {
                  aranyy = kepYmax/magassag;
                  picture._width = aranyy*szelesseg;
                  picture._height = aranyy*magassag;
                  kozepre();
              }
          } else if ((szelesseg<kepXmax) || (magassag<kepYmax)) {
              // // Ha a kép valamelyik oldala kisebb mint a maximális
              xoldal = kepXmax-szelesseg;
              yoldal = kepYmax-magassag;
              if (xoldal>yoldal) {
                  aranyy = kepYmax/magassag;
                  picture._width = aranyy*szelesseg;
                  picture._height = aranyy*magassag;
                  kozepre();
              } else if (yoldal>xoldal) {
                  aranyx = kepXmax/szelesseg;
                  picture._width = aranyx*szelesseg;
                  picture._height = aranyx*magassag;
                  kozepre();
              }
          }
      }
      function kozepre() {
          // ////////// Az új méretek alapján teszi mindig középre a képet
          picture._x = kezdoX+(kepXmax-picture._width)/2;
          picture._y = kezdoY+(kepYmax-picture._height)/2;
      }

       

       

       

      Sorry, but the comments are in hungarian. Where I put the thumbnails is this part (this is where something goes wrong and they are placed in a reversed order):

       

      function thumbnails_fn(k) {
            thumbnail_mc.createEmptyMovieClip("t"+k,thumbnail_mc.getNextHighestDepth());
           tlistener = new Object();
           tlistener.onLoadInit = function(target_mc) {//Ha betöltődött akép és  lehet manipulálni
              
               target_mc._x = prevWidth+prevX
              
               prevWidth = target_mc._width+5
               prevX = target_mc._x
              
                              
               target_mc.pictureValue = k;
               target_mc.onRelease = function() {
                   p = this.pictureValue-1;//mivel a nextImage hozzáad egyet a p  értékéhez
                   nextImage();
               };
               target_mc.onRollOver = function() {
                   this._alpha = 50;
                   thumbNailScroller();
               };
               target_mc.onRollOut = function() {
                   this._alpha = 100;
               };
           };
           image_mcl = new MovieClipLoader();
           image_mcl.addListener(tlistener);
           image_mcl.loadClip(thumbnails[k],"thumbnail_mc.t"+k);//betöltjük a  movieclip-be a képet, majd meghívjuk a fentebbi onLoadInit-t

       

      }

        • 1. Re: problem with order
          kglad Adobe Community Professional & MVP

          it doesn't look like you're specifying any order.

           

          you're calling thumbnail_fn() "sequentially" but that's not related to the order in which they complete loading and your onLoadInit() is called (and it's that order that determines the thumb's positioning).

          1 person found this helpful
          • 2. Re: problem with order
            newcmr.hu Level 1

            Thanks for your reply!

             

            Aha. I tought that the prpoblem is somewhere there. Do you ha

            ve any suggestions, how I could determine that the first thumb should be placed first and then the second etc.

             

            My problem is that it does exactly the opposite now, and I can't make out the how to influence the order.

            • 3. Re: problem with order
              kglad Adobe Community Professional & MVP

              you should load them sequentially.  it looks a lot better (when you view non-instant loading), in addition, to allowing the positioning you want:

               


              // ////////////////// A terület méretének meghatározása ahol látszik a kép.
              var kepXmax = 600;
              var kepYmax = 405;
              // ////////////////// A betöltő mc x-y pozíciója
              kezdoX = 100;
              kezdoY = 50;
              p = 0;
              var w = 0;

               

              xml = new XML();
              xml.ignoreWhite = true;
              xml.onLoad = loadXML;
              xml.load("images.xml");

               

              function loadXML(loaded) {
                  if (loaded) {
                      xmlNode = this.firstChild;
                      image = [];
                      description = [];
                      thumbnails = [];
                      cat = [];
                      total1 = xmlNode.childNodes.length;

               

                      ///////////////////////As első alkalommal az első kategóriát állítjuk be
                      if (category == undefined) {
                          category = xmlNode.childNodes[0].childNodes[3].firstChild.nodeValue;
                      }
                      ///////////////////////
                      for (i=0; i<total1; i++) {
                          if (xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue == category) {

               

                              image[w] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
                              description[w] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
                              thumbnails[w] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
                              cat[w] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
                              w++;
                          }
                      }
                      total = w;

              prevX=110;

              prevWidth=0;

              thumbnails_fn(0);
                      firstImage();
                  } else {
                      content = "A fájl betöltése sikertelen!";
                  }
              }

               

              /////////////////////////////////////
              listen = new Object();
              listen.onKeyDown = function() {
                  if (Key.getCode() == Key.LEFT) {
                      prevImage();
                  } else if (Key.getCode() == Key.RIGHT) {
                      nextImage();
                  }
              };
              Key.addListener(listen);
              previous_btn.onRelease = function() {
                  prevImage();
              };
              next_btn.onRelease = function() {
                  nextImage();
              };
              /////////////////////////////////////

               

              this.onEnterFrame = function() {
                  filesize = picture.getBytesTotal();
                  loaded = picture.getBytesLoaded();
                  preloader._visible = true;
                  if (loaded != filesize) {
                      preloader.preload_bar._xscale = 100*loaded/filesize;
                  } else {
                      preloader._visible = false;
                      if (picture._alpha<100) {
                          picture._alpha += 10;
                      }
                      szelesseg = picture._width;
                      magassag = picture._height;
                      presel();
                  }
              };
              function nextImage() {
                  if (p<(total-1)) {
                      p++;
                      if (loaded == filesize) {
                          picture._alpha = 0;
                          picture.loadMovie(image[p],1);
                          desc_txt.text = description[p];
                          picture_num();
                      }
                  }
              }
              function prevImage() {
                  if (p>0) {
                      p--;
                      picture._alpha = 0;
                      picture.loadMovie(image[p],1);
                      desc_txt.text = description[p];
                      picture_num();
                  }
              }
              function firstImage() {
                  if (loaded == filesize) {
                      picture._alpha = 0;
                      picture.loadMovie(image[0],1);
                      desc_txt.text = description[0];
                      szelesseg = picture._width;
                      magassag = picture._height;
                      picture_num();
                     
                      presel();
                     
                     
                  }
              }
              function picture_num() {
                  current_pos = p+1;
                  pos_txt.text = current_pos+" / "+total;
              }
              function thumbNailScroller() {
                  // bélyegképek kódja
                  this.createEmptyMovieClip("tscroller",1000);
                  scroll_speed = 10;
                  tscroller.onEnterFrame = function() {
                      if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
                          if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {//a hitright ellenőrzi, hogy a thumbnail_mc még mindíg tart a hit_left alatt, nehogy túlscrollozzuk
                              thumbnail_mc._x -= scroll_speed;
                          } else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
                              thumbnail_mc._x += scroll_speed;
                          }
                      } else {
                          delete tscroller.onEnterFrame;
                      }
                  };
              }
              function thumbnails_fn(k) {
                  thumbnail_mc.createEmptyMovieClip("t"+k,thumbnail_mc.getNextHighestDepth());
                  tlistener = new Object();
                  tlistener.onLoadInit = function(target_mc) {//Ha betöltődött akép és lehet manipulálni
                     
                      target_mc._x = prevWidth+prevX
                     
                      prevWidth = target_mc._width+5
                      prevX = target_mc._x
                     
                                     
                      target_mc.pictureValue = k;
                      target_mc.onRelease = function() {
                          p = this.pictureValue-1;//mivel a nextImage hozzáad egyet a p értékéhez
                          nextImage();
                      };
                      target_mc.onRollOver = function() {
                          this._alpha = 50;
                          thumbNailScroller();
                      };
                      target_mc.onRollOut = function() {
                          this._alpha = 100;
                      };
                  };
                  image_mcl = new MovieClipLoader();
                  image_mcl.addListener(tlistener);
                  image_mcl.loadClip(thumbnails[k],"thumbnail_mc.t"+k);//betöltjük a movieclip-be a képet, majd meghívjuk a fentebbi onLoadInit-t

               

              }
              // ///////////////////////////// A képek scalezéséért felel
              function presel() {
                  if ((szelesseg>kepXmax) || (magassag>kepYmax)) {
                      // /// Ha a kép valamelyik oldala > mint a maximális (kepXmax,kepYmax)
                      xoldal = szelesseg-kepXmax;
                      yoldal = magassag-kepYmax;
                      if (xoldal>yoldal) {
                          aranyx = kepXmax/szelesseg;
                          picture._width = aranyx*szelesseg;
                          picture._height = aranyx*magassag;
                          kozepre();
                      } else if (yoldal>xoldal) {
                          aranyy = kepYmax/magassag;
                          picture._width = aranyy*szelesseg;
                          picture._height = aranyy*magassag;
                          kozepre();
                      }
                  } else if ((szelesseg<kepXmax) || (magassag<kepYmax)) {
                      // // Ha a kép valamelyik oldala kisebb mint a maximális
                      xoldal = kepXmax-szelesseg;
                      yoldal = kepYmax-magassag;
                      if (xoldal>yoldal) {
                          aranyy = kepYmax/magassag;
                          picture._width = aranyy*szelesseg;
                          picture._height = aranyy*magassag;
                          kozepre();
                      } else if (yoldal>xoldal) {
                          aranyx = kepXmax/szelesseg;
                          picture._width = aranyx*szelesseg;
                          picture._height = aranyx*magassag;
                          kozepre();
                      }
                  }
              }
              function kozepre() {
                  // ////////// Az új méretek alapján teszi mindig középre a képet
                  picture._x = kezdoX+(kepXmax-picture._width)/2;
                  picture._y = kezdoY+(kepYmax-picture._height)/2;
              }

               

               

              function thumbnails_fn(k) {

              kvar = k;
                    thumbnail_mc.createEmptyMovieClip("t"+k,thumbnail_mc.getNextHighestDepth());

                   image_mcl.loadClip(thumbnails[k],"thumbnail_mc.t"+k);//betöltjük a  movieclip-be a képet, majd meghívjuk a fentebbi onLoadInit-t

               

              }

               

                   tlistener = new Object();
                   tlistener.onLoadInit = function(target_mc) {//Ha betöltődött akép és  lehet manipulálni
                      
                       target_mc._x = prevWidth+prevX
                      
                       prevWidth = target_mc._width+5
                       prevX = target_mc._x
                      
                                      
                       target_mc.pictureValue = kvar;
                       target_mc.onRelease = function() {
                           p = this.pictureValue-1;//mivel a nextImage hozzáad egyet a p  értékéhez
                           nextImage();
                       };
                       target_mc.onRollOver = function() {
                           this._alpha = 50;
                           thumbNailScroller();
                       };
                       target_mc.onRollOut = function() {
                           this._alpha = 100;
                       };
              kvar++;
              if(kvar<total){
              thumbnail_fn(kvar);
              }
                   };
                   image_mcl = new MovieClipLoader();
                   image_mcl.addListener(tlistener);
              • 4. Re: problem with order
                newcmr.hu Level 1

                Thanks very much! Now it works correctly.

                • 5. Re: problem with order
                  kglad Adobe Community Professional & MVP

                  you're welcome.