9 Replies Latest reply on Sep 8, 2007 8:34 PM by samuels2921

    Flash XML Photo Gallery

    samuels2921 Level 1
      In this tutorial http://www.kirupa.com/developer/mx2004/thumbnails5.htm it explain how to make a Flash Thumbnail Photo Gallery. I am designing a bigger photo gellery based on this code. how do I have the photo gallery to list 5 pictures it create a new row . This code is the code that designs the thumbnail movie clip with all the thumbs in 1 row.


      function thumbnails_fn(k) {
      thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
      tlistener = new Object();
      tlistener.onLoadInit = function(target_mc) {
      target_mc._x = hit_left._x+(target_mc._width+5)*k;
      target_mc.pictureValue = k;
      target_mc.onRelease = function() {
      p = this.pictureValue-1;
      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);
      }
        • 1. Re: Flash XML Photo Gallery
          Level 7
          You're calling thumbnails with the thumbnail number to create: k.
          I'll assume k goes from 1 to x. You can figure out in which row, and column
          k goes in using:

          var perRow = 5;
          var row = Math.ceil(k / perRow);
          var col = (k % perRow == 0) ? k / row : k % perRow;

          So then, in your script you'd change the line that sets _x:

          target_mc._x = hit_left._x+(target_mc._width+5)*k;
          to:
          target_mc._x = hit_left._x + (target_mc._width + 5) * col;

          and then add a line to set _y. I'm not sure if you'd base it off hit_left,
          like you do for _x, but you'll have to just mod it:

          target_mc._y = hit_left._y + (target_mc._height + 5) * row;


          --
          Dave -
          Head Developer
          http://www.blurredistinction.com
          Adobe Community Expert
          http://www.adobe.com/communities/experts/


          • 2. Flash XML Photo Gallery
            samuels2921 Level 1
            None of it worked
            • 3. Re: Flash XML Photo Gallery
              samuels2921 Level 1
              That code posted sets all the thumbs on top of each other

              var perRow = 5;
              var row = Math.ceil(k/perRow);
              var col = (k%perRow == 5) ? k/row : k%perRow;
              function thumbnails_fn(k) {
              thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
              tlistener = new Object();
              tlistener.onLoadInit = function(target_mc) {
              target_mc._x = hit_left._x+(target_mc._width+5)*col;
              target_mc._y = hit_left._y+(target_mc._height+5)*row;
              target_mc.pictureValue = k;
              target_mc.onRelease = function() {
              p = this.pictureValue-1;
              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);
              }
              • 4. Re: Flash XML Photo Gallery
                Level 7
                Right... you need to update row and column, for each k:
                var perRow = 5;
                function thumbnails_fn(k) {
                //these go inside the function
                var row = Math.ceil(k/perRow);
                var col = (k%perRow == 5) ? k/row : k%perRow;
                //
                thumbnail_mc.createEmptyMovieClip("t"+k,
                thumbnail_mc.getNextHighestDepth());
                tlistener = new Object();
                tlistener.onLoadInit = function(target_mc) {
                target_mc._x = hit_left._x+(target_mc._width+5)*col;
                target_mc._y = hit_left._y+(target_mc._height+5)*row;
                target_mc.pictureValue = k;
                target_mc.onRelease = function() {
                p = this.pictureValue-1;
                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);
                }


                --
                Dave -
                Head Developer
                http://www.blurredistinction.com
                Adobe Community Expert
                http://www.adobe.com/communities/experts/


                • 5. Re: Flash XML Photo Gallery
                  Level 7
                  >> var col = (k%perRow == 5) ? k/row : k%perRow;

                  And it is a 0 there, not a 5.

                  var col = (k%perRow == 0) ? k/row : k%perRow;

                  I gave you the right code originally...

                  --
                  Dave -
                  Head Developer
                  http://www.blurredistinction.com
                  Adobe Community Expert
                  http://www.adobe.com/communities/experts/


                  • 6. Re: Flash XML Photo Gallery
                    samuels2921 Level 1
                    sorry... been experimenting I found out it works but the first row has 1 picture then the rest of the rows have 5 pictures
                    • 7. Flash XML Photo Gallery
                      samuels2921 Level 1
                      Current ActionScript Works but haves the first row with only 1 thumb and the rest of the thumbs in rows and colums but are aligned to a different x and y axle.

                      var perRow = 5;
                      function thumbnails_fn(k) {
                      thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
                      tlistener = new Object();
                      tlistener.onLoadInit = function(target_mc) {
                      var row = Math.ceil(k/perRow);
                      var col = (k % perRow == 0) ? k / row : k % perRow;
                      target_mc._x = hit_left._x+(target_mc._width+5)*col;
                      target_mc._y = (target_mc._height+5)*row;
                      target_mc.pictureValue = k;
                      target_mc.onRelease = function() {
                      p = this.pictureValue-1;
                      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);
                      }
                      • 8. Re: Flash XML Photo Gallery
                        Level 7
                        Are you starting k at 0? You could just start it at 1... or increment it
                        before calculating...


                        --
                        Dave -
                        Head Developer
                        http://www.blurredistinction.com
                        Adobe Community Expert
                        http://www.adobe.com/communities/experts/


                        • 9. Re: Flash XML Photo Gallery
                          samuels2921 Level 1
                          how to increment it before calculating?