11 Replies Latest reply on Oct 31, 2007 11:58 AM by Starlover_jacob

    thumbnail alignment

    Starlover_jacob Level 1
      Hi there, i have a thumbnail slider with a little problem i don't know how to solve.


      i get my urls from a database using amfphp but thats not so interesting now.
      i loop trough the results from the db and call the function thumbnails_fn to create the thumbnails.
      k=the numer of the thumbnail (1,2,3 and so on)
      thumbid=the id from the database
      thumburl = the url to get the image (../img/design/1.jpg)


      my problem is in the following line:
      target_mc._x = (thumbnail_mc._x+150)+(target_mc._width+5)*k; // x position of the new thumbnail

      here the position of the thumbnail is set. wich goes fine if all thumbnails are the same width.
      what happens is something like this.
      1: thumb1=50 width --> x position is the width of the thumbnail * the id(1) = 250.
      2: thumb2=20 width
      3: thumb3=100 width

      1: x position=1*50=50 witch is good.
      2: x position=2*20=40 witch is wrong and must be (50+20=70)
      3:x position=3*100=300 witch is wrong and must be(50+20+100=170)

      How can i solve this?
      i tied a recursive function witch gives me the total width back each time he runs the function so i can add the width of the current image with the total width but it gets me all kinds of errors. :-(
      I hope someone can help me.


      my code.
      ------------------------------------------------------------------------------------------ -----------------------------------
      function thumbnails_fn(k,thumbid,thumburl) {
      thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth()); //inside thumbnail_mc we create an empty movieclip with the name t+number

      //tlistener is the variable that I declared as an object.
      //Under the MovieClipLoader class, tlistener is used to gauge the progress of the loaded images,
      //and if the image has both loaded AND initialized, any code contained here is executed.
      tlistener = new Object();
      image_mcl = new MovieClipLoader();
      image_mcl.addListener(tlistener);
      image_mcl.loadClip(thumburl, "thumbnail_mc.t"+k);

      //One last feature is that this function takes in the argument target_mc,
      //which is passed to it from the loadClip method: "thumbnail_mc.t"+k, of course,
      //k is replaced with a number referencing the index position of your array.
      tlistener.onLoadInit = function(target_mc)
      {

      trace("de breedte van de afb:"+target_mc._width);
      trace("de hoogte van de afb:"+target_mc._height);
      // x van het plaatje = breedte van het plaatje keer het aantal plaatjes
      // gaat niet op als een van de afb een kleinere of grotere breedte heeft
      // bijv afb5=40 breed dan wordt de positie x 5 gedaan = 200
      // afb 4=50 breed dan wordt de positie x 4 gedaan = 200
      target_mc._x = (thumbnail_mc._x+150)+(target_mc._width+5)*k; // x position of the new thumbnail
      trace("de x positie van de thumbnail:"+target_mc._x);
      //target_mc._x = hit_left._x+(target_mc._width+5)*k; // x position of the new thumbnail
      target_mc.pictureValue = k;
      target_mc.onRelease = function() // if clicked on the thumbnail the large image is loaded by calling the function nextimage.
      {
      //p = this.pictureValue-1;
      //nextImage();
      //var mappingid:String="26";
      getImage(thumbid);
      }
      target_mc.onRollOver = function()
      {
      this._alpha = 50;
      thumbNailScroller();
      }
      target_mc.onRollOut = function()
      {
      this._alpha = 100;
      }
      }

      }
        • 1. Re: thumbnail alignment
          clbeech Level 3
          well it seems to me that you've got the right idea here, but you might want to just track the position of the next clip space by increamenting a variable on each iteration by the width + spacer. So I would add a var outside the function and then do so in the onLoadInit method, as in:
          • 2. Re: thumbnail alignment
            Starlover_jacob Level 1
            thanx a lot, that did the trick :-) very simple solution, i was thinking 2 difficult.

            Perhaps you can also help me with another problem i have.
            When i click one of the images i send the id of it to a function that gives me the fullurl from the db.
            after that i call the function fullimage to show my full size image.

            what i want to do is blow up this image so i have less data to be send to the client.

            the problem is that flash remembers the previous width and height so wen i click the thumbnail again he gets the previous width and height and multiplies it again with 2. :-(

            is there a way to delete all the info about the previous made movieclip or something?

            my code
            ----------------------------------------------------------------------------------------
            function fullimage(fullurl)
            {
            this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
            //thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());

            tlistener = new Object();
            image_mcl = new MovieClipLoader();
            image_mcl.addListener(tlistener);
            image_mcl.loadClip(fullurl, "image_mc");

            tlistener.onLoadInit = function(target_mc)
            {
            target_mc._x=-1* target_mc._width/2;
            target_mc._y=-1* target_mc._height -50;
            trace(target_mc._width);
            trace(target_mc._height);
            target_mc._width=imagewidth*2;
            target_mc._height=imageheight*2;
            }

            }
            • 3. Re: thumbnail alignment
              clbeech Level 3
              you're welcome :)

              well sure, but I think I would just use the image that's already been loaded rather than loading a new one. (slower) since you're only taking the original image size and then scaling it up ... use:

              target_mc._xscale = target_mc._yscale = 200;

              but do this by duplicating the thumbnail clip by id passed in, since you must be using an array to iterate through them, just grab the thumb from the index reference, I don't know the full structure of your system, but something like this:
              • 4. Re: thumbnail alignment
                Starlover_jacob Level 1
                you suggest to load an image with the size between the full and the thumb image so you can scale down to show the tumbnail and scale up to show the full image.

                its an option i don't prefer.
                you must wait for all the images to be loaded when you visit the site for the first time.

                if you do it my way you just have 2 wait 1sec for each full image you want to see.

                the second reason why i want to do this is that i don't like the looks of an scaled down image.. its just ugly :-).

                Perhaps you could answer this question. How do you destroy an previous created movieclip?
                I tried with unlink but when i crate a new movieclip with the same name he still knows the width and heigth of the previous one.
                so you can see in my code.. multiplying the width and height will get me an image thats 4 times the original size :-(

                Greetz, jacob
                • 5. Re: thumbnail alignment
                  clbeech Level 3
                  OK, I gotcha now, you have a second set of images, I'd thought you were 'bowing up' the thumbnails, no problem, that's fine and yes then you'd want to use the MCL method. although you may be able to scale down the images to be of an acceptable quality using the BitmapData class, but I also understand your loading wait-time point.

                  To the second question though, you would use:

                  mcInstance.removeMovieClip();

                  OK, back to the first question, as this also relates, if you construct a new mc at the same depth of the previously loaded clip using the MCL, then you don't need to remove the previous clip, because the new instance will replace the previous.
                  so here's a new function to try:
                  • 6. thumbnail alignment
                    Starlover_jacob Level 1
                    hello clbeech

                    to cum back on my previous question of the thumbnails that do not align right.
                    It worked fine for a while till i recently added buttons witch call the same function.

                    what happened is that the whole set of thumbnails created is placed not at the beginning but at the point where the last created image of the previous set was placed.

                    the x position is not reset before i create the new set of thumbnails.
                    How do i solve this?

                    If its not clear what i mean just tell me and i try to give you a better visualization of what is happening.

                    ow yes and how do you place in this forum the code in such a nice block with scrollbar? its much more recognizable.

                    Greetz, jacob
                    • 7. Re: thumbnail alignment
                      Starlover_jacob Level 1
                      i solved that problem to use createemptymovieclip at depth 0 each time before i use the createthumbnails function.
                      so the previous movieclip is overwritten and he begins to create the thumbnails again.

                      the problem i now have is that in my previous version i placed my thumbnails in a movieclip that was already on the stage and underneath a mask.

                      my question now is how do i get the createemptymovieclip beneath the mask so i only see a few of my thumbnails.

                      thanks in advance, greetz, jacob
                      it now seems every time i solve a problem i create another one. :-D keeps me learning.
                      • 8. Re: thumbnail alignment
                        clbeech Level 3
                        Sorry I"ve been away :) great that you solved the previous problem.

                        One thing you could do, is to create empty MCs that are children of the MC that resides under the mask, you would call somthing like:

                        var mc = parent_mc.createEmptyMovieClip('mc', 0);

                        that way the 'holder' MC is always below the mask and then replace the new MCs at level0 there. when loading the clip just make sure the call is targeting that MC path.
                        • 9. Re: thumbnail alignment
                          Starlover_jacob Level 1
                          no problem you were away ;-)
                          just wen i got your answer i discovered the actionscript setMask
                          this.createEmptyMovieClip("thumbnail_mc",0);

                          thumbnail_mc.setMask(mask_instance);

                          were mask_instance the movieclip is that masks the new created movieclip and it works fine :-D

                          There are just some things no book is telling you, thats why i like this forum so much.. you got the answer within an hour and you can go on with your project. Many many thanks.

                          Greetz, jacob
                          • 10. Re: thumbnail alignment
                            clbeech Level 3
                            great, you're welcome jacob :) as good a solution as any!!

                            hope your project turns out well ;)
                            • 11. Re: thumbnail alignment
                              Starlover_jacob Level 1
                              hi clbeech,

                              You helped me out very well with my first image problem.
                              Would you please be so kind to take a look at my next little project with images..
                              The problem is that its not aligning well and i have the idea that the resizing is not going well.

                              Url to files:
                              http://members.lycos.nl/jacobhingst/troep/photoslider/

                              Could you give me some suggestions how to solve this problem..
                              It looks like i am doing the right thing.. loading the image.. and when
                              filesize = litlimg_instance.ltlimgmc_instance0.holder.getBytesTotal();
                              loaded = litlimg_instance.ltlimgmc_instance0.holder.getBytesLoaded();
                              is equal to each other i am going to resize the new created image and place it on the correct spot.
                              But its not centered right. :(

                              Greetz, jacob