7 Replies Latest reply: May 8, 2012 11:58 AM by Ned Murphy RSS

    How do I code thumb scroller to have images set to its individual widths and uniformed heights?

    nikolaig Community Member

      I am stack on trying to arrange the variable width images to be evently spaced out of xml file in thumb scroller.

      I probably miss something in this code sigment:

       

      function resizeMe(mc:DisplayObject, maxH:Number, maxW:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{

          maxH = maxH == 0 ? maxW : maxH;

          mc.width = maxW;

          mc.height = maxH;

          if (constrainProportions) {

              mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;

          }

                if (centerHor) {

                          mc.x = (maxW - mc.width) / 2;

                }

                if (centerVert){

                          mc.y = (maxH - mc.height) / 2;

                }

      }

       

      Presently my images appear to be scaled to a uniformed width with whatever height would be proportional to the defined uniformed width. I also have equal distances between the images.

      How do I do it that my images have equal distances, uniformed height and whatever width would be proportional to the defined uniformed height.

       

      Here is the code in its entirity:

      import com.greensock.*;

      import com.greensock.easing.*;

       

       

       

       

      //////////////////////////////////////

       

       

      //load xml

      var xmlLoader:URLLoader = new URLLoader();

      /////Parse XML

      var xmlData:XML = new XML();

      var xmlPath:String = "app_thmbs_imgs.xml";

      xmlLoader.load(new URLRequest(xmlPath));

      trace("loading xml from: " + xmlPath);

      xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

       

       

      function LoadXML(e:Event):void {

                trace("xml load complete");

                xmlData = new XML(e.target.data);

                //trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList

                buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

      }

       

       

       

       

      /////Build Scroller MovieClip to Contain Each Image

      var scroller:MovieClip = new MovieClip();

      this.addChild(scroller);

       

       

      scroller.y = 30;

      /////

       

       

      /////Parse XML

      //build scroller from xml

      function buildScroller(imageList:XMLList):void{

                trace("build Scroller");

       

                for (var item:uint = 0; item<imageList.length();item++) {

                          var thisOne:MovieClip = new MovieClip();

       

       

       

                          thisOne.x = (140 +20) *item;

                          //thisOne.x = currentX;//modified line to adjust variable thumb widths

                          thisOne.itemNum = item;

                          thisOne.title = imageList[item].attribute("title");

                          thisOne.link = imageList[item].attribute("url");

                          thisOne.src = imageList[item].attribute("src");

                          thisOne.alpha = 0;

                          //trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);

       

                          //Loading and Adding the Images

                          //image container

                          var thisThumb:MovieClip = new MovieClip();

                          //add image

                          var ldr:Loader = new Loader();

                          var url:String = imageList[item].attribute("src");

                          var urlReq:URLRequest = new URLRequest(url);

                          trace("loading thumbnail "+item+" into Scroller: " + url);

                          //assign event listeners for Loader

                          ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

                          ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                          ldr.load(urlReq);

                          thisThumb.addChild(ldr);

                          thisOne.addChild(thisThumb);

       

                          //create listeners for this thumb

                          thisOne.buttonMode = true;

                          thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

                          thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);

                          thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);

       

                          //add item

                          scroller.addChild(thisOne);

                }

       

                trace("termination of build scroller");

       

      }

       

       

      function clickScrollerItem(e:MouseEvent):void{

                trace("clicked item " +e.currentTarget.itemNum + " - visit url: " +e.currentTarget.link);

      }

       

       

      function overScrollerItem(e:MouseEvent):void{

                trace("over"+e.currentTarget.title);

      }

      function outScrollerItem(e:MouseEvent):void{

                trace("out"+e.currentTarget.title);

      }

       

       

      function completeHandler(e:Event):void{

                //trace("thumbnail complete "+e.target.loader.parent.parent.title)

                TweenMax.to(e.target.loader.parent.parent, .5, {alpha:1});

       

                //size image into scroller

                resizeMe(e.target.loader.parent, 140, 105, true, true, false);

      }

       

       

      function errorHandler(e:IOErrorEvent):void{

                trace("thumbnail error="+e);

      }

       

       

      //The resizing function

      // parameters

      // required: mc = the movieClip to resize

      // required: maxW = either the size of the box to resize to, or just the maximum desired width

      // optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once, or resizeMe(image, 200);)

      // optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.

      // optional: centerHor = centers the displayObject in the maxW area. default true.

      // optional: centerVert = centers the displayObject in the maxH area. default true.

      function resizeMe(mc:DisplayObject, maxH:Number, maxW:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{

          maxH = maxH == 0 ? maxW : maxH;

          mc.width = maxW;

          mc.height = maxH;

          if (constrainProportions) {

              mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;

          }

                if (centerHor) {

                          mc.x = (maxW - mc.width) / 2;

                }

                if (centerVert){

                          mc.y = (maxH - mc.height) / 2;

                }

      }

        • 1. Re: How do I code thumb scroller to have images set to its individual widths and uniformed heights?
          Ned Murphy MVP

          To get a uniform height you need to establish what that height value is and use it to define the scaleY property and subsequently the scaleX property.  So when you load an image you set its height to be whatever it needs to be, acquire its scaleY property after that and use it to set the scaleX property.

          • 2. Re: How do I code thumb scroller to have images set to its individual widths and uniformed heights?
            nikolaig Community Member

            Any chance I can ask you to make it as an example in coding.

            I tried to play with code on my own but not seem to achieve the proper result.

            Here is what I did. I changed around W and H as I understoog to make the H a first property from which everything else is derived.

             

            function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{

            //function resizeMe(mc:DisplayObject, maxH:Number, maxW:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{// original unchanged version

             

             

                //maxH = maxH == 0 ? maxW : maxH;// original unchanged version

                      maxW = maxW == 0 ? maxH : maxW;

             

             

                mc.width = maxW;

                mc.height = maxH;

                if (constrainProportions) {

                    mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;

                }

                      if (centerHor) {

                                mc.x = (maxW - mc.width) / 2;

                      }

                      if (centerVert){

                                mc.y = (maxH - mc.height) / 2;

                      }

            }

             

             

            It came close but still off in heights and in addition it doesn't have the equal distances between the images.

            Can I ask you to point out in the code where the change has to be made?

            • 3. Re: How do I code thumb scroller to have images set to its individual widths and uniformed heights?
              Ned Murphy MVP

              You want to set the height to a specific value... it should be as simple as

               

              mc.height = some specific value

              mc.scaleX = mc.scaleY; // this will make the width adjust proportional to the new height

               

              but it has to be done after the image is completed loading

               

              as far as adding it with uniform spacing goes, you need to determine where the right edge of the last image is and add the space betwwen to it to set the location of the one currently being added.  If you are adding these mc's to a container movieclip, then the width of that container should be very useful data to determine where the right edge of the last mc is.

              • 4. Re: How do I code thumb scroller to have images set to its individual widths and uniformed heights?
                nikolaig Community Member

                OK, I think it worked in terms of making the images of the uniformed height.

                Here is my present code set up:

                 

                function resizeMe(mc:DisplayObject, maxH:Number, maxW:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{

                 

                 

                    maxH = maxH == 0 ? maxW : maxH;

                 

                 

                    mc.width = maxW;

                    //mc.height = maxH;//original settings

                    mc.height = 110;

                 

                          mc.scaleX=mc.scaleY//added line which makes the width adjust proportional to the height

                 

                 

                    if (constrainProportions) {

                        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;

                    }

                          if (centerHor) {

                                    mc.x = (maxW - mc.width) / 2;

                          }

                          if (centerVert){

                                    mc.y = (maxH - mc.height) / 2;

                          }

                }

                 

                does it mean that the following lines contradict each other:

                 

                mc.scaleX=mc.scaleY

                -and-

                if (constrainProportions) {

                        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;

                    }

                 

                Presently the first line of mc.scaleX=mc.scaleY cancels out the "if" statement?

                 

                 

                ---------------------------------------------------------------------------------

                 

                Here is my set up for building the scrooler. I understand that the line " thisOne.x = (140 +20) *item;" defines the distance beween the background boxes, which is currently set to 20 pixels.

                 

                However I can not decipher where the images themselves are defined and how to trigger the equal spacing between them?

                 

                (I actually do not need a white box behind the image so I comment out the entire block belonging to //outline)

                 

                 

                /////Parse XML

                //build scroller from xml

                function buildScroller(imageList:XMLList):void{

                          trace("build Scroller");

                 

                          for (var item:uint = 0; item<imageList.length();item++) {

                                    var thisOne:MovieClip = new MovieClip();

                 

                                    //outline

                                    var blackBox:Sprite = new Sprite();

                                    blackBox.graphics.beginFill(0xFFFFFF);

                                    blackBox.graphics.drawRect(-1, -1, 124, 107);

                                    thisOne.addChild(blackBox);

                 

                                    //var currentX = currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

                 

                 

                                    thisOne.x = (140 +20) *item;

                                    //thisOne.x = currentX;//modified line to adjust variable thumb widths

                                    thisOne.itemNum = item;

                                    thisOne.title = imageList[item].attribute("title");

                                    thisOne.link = imageList[item].attribute("url");

                                    thisOne.src = imageList[item].attribute("src");

                                    thisOne.alpha = 0;

                                    //trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);

                 

                                    //Loading and Adding the Images

                                    //image container

                                    var thisThumb:MovieClip = new MovieClip();

                                    //add image

                                    var ldr:Loader = new Loader();

                                    var url:String = imageList[item].attribute("src");

                                    var urlReq:URLRequest = new URLRequest(url);

                                    trace("loading thumbnail "+item+" into Scroller: " + url);

                                    //assign event listeners for Loader

                                    ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

                                    ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                                    ldr.load(urlReq);

                                    thisThumb.addChild(ldr);

                                    thisOne.addChild(thisThumb);

                 

                                    //create listeners for this thumb

                                    thisOne.buttonMode = true;

                                    thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

                                    thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);

                                    thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);

                 

                                    //add item

                                    scroller.addChild(thisOne);

                          }

                 

                          trace("termination of build scroller");

                 

                }

                • 5. Re: How do I code thumb scroller to have images set to its individual widths and uniformed heights?
                  Ned Murphy MVP

                  You have a bit of code that I saw that is rendered useless if you change to what I said to use.  If you want a fixed height, then you use a fixed height.  the width will follow naturally, no need for conditionals.  Conditionals would be used if there were some possibility of width defining in some cases as opposed to height, but in your case, height is the definitive deciding factor.

                   

                  The line... thisOne.x = (140 +20) *item;

                   

                  Is only useful when you were using objects with a fixed width (likely 140).  That is no longer the case and that line is what you need to change.  I believe I answered this for you a couple of postings back, so you oughta look there to see what I offered.  BUt just to help your thought process...

                   

                  this line...  scroller.addChild(thisOne);

                   

                  indicates that you are adding the images to an object named "scroller".  The width of that scroler object is probably reflective of the edge of the last image added, since it should be growing wider each time you add a new image to it.  So think about using the "width" property of the scroller to help determine where to plant the image.

                  • 6. Re: How do I code thumb scroller to have images set to its individual widths and uniformed heights?
                    nikolaig Community Member

                    Thank you, it worked.

                    You did answer this a few posts back, but I got lost in the code and could not resolve it.

                    I will revisit previoius postings and try again.