6 Replies Latest reply: May 14, 2012 6:56 AM by kglad RSS

    Equal spacing between the images of uniformed height but variable widths with AS3?

    nikolaig Community Member

      I have to figure out how to insert images with variable width with equal spacing intervals.

      Here is where I got so far:

       

      function buildScroller(imageList:XMLList):void{

                trace("build Scroller");

       

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

                          var thisOne:MovieClip = new MovieClip();

       

        var currentX = 90;

                          var spaceBetween = 20;

        var currentImageWidth = Number(imageList[item].attribute("width"));

       

      thisOne.x = currentX;

      thisOne.x = (currentImageWidth+spaceBetween)*item;

       

       

      I can see that my images are being spread out on the page and if I change the number in var spaceBetween it affects the spacing. However the spacing is not uniformed. I can not figure why. Perhaps because I can not properly retrieve the image widths from the xml file. I assigned a width in xml file in the following manner:

      <images>

      <image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com" width="132"/>

      <image src="appThmb_imgs/ATI-1-bgpA_xsm.jpg" title="CoolingReflections" url="http://www.888acolyte.com" width="117"/>

      <image src="appThmb_imgs/ATI-2-zenC_xsm.jpg" title="OrchidsUnderGlass" url="http://www.888acolyte.com" width="263"/>

      <image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com" width="148"/>

      </images>

       

      they correspond to actual image width. I do however want them to be scaled at 50% of their actual width.

       

      Any ideas if I am missing a line of code or don't call out images properly?

        • 1. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
          kglad CommunityMVP

          use:

           

           

             var spaceBetween:int = 20;

          function buildScroller(imageList:XMLList):void{

                    trace("build Scroller");

            var nextX:int = spaceBetween;  // not sure where you want to start;

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

                              var thisOne:MovieClip = new MovieClip();

          thisOne.x = nextX;

          nextX = int(imageList[item].attribute("width"))+spaceBetween;

           

          }

           

          • 2. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
            nikolaig Community Member

            Thank You for your reply.

            I tried to implement it but images are still jambled together.

            Perhaps it has something to do with the fact that I specify the actual width of the image in the XML file but then define it as a scaled value in the code later on (11th line at the bottom of the code):

                mc.height = 110;

            This height definition will just give the width proportional to the height. Does it mean that I can not specify the height as it is?

            Also can be there a mistake in the XML file? I just assigned the width number as it is in pixels for each image. Here is an example:

             

            <images>

            <image src="appThmb_imgs/RosesGallasGalore_RGB_xsm.jpg" title="RosesGallasGalore" url="http://www.888acolyte.com" width="131"/>

            <image src="appThmb_imgs/SangriaBling_RGB_xsm.jpg" title="SangriaBling" url="http://www.888acolyte.com" width="233"/>

            <image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com" width="148"/>

            </images>

             

            There were no errors in the output or compiler errors tabs.

             

            Here is my code in its entirety:

            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_imgsModfd.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);

             

             

                      buildScroller(xmlData.image);

            }

             

             

             

             

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

            var scroller:MovieClip = new MovieClip();

            this.addChild(scroller);

             

             

            scroller.y = 30;

            /////

             

             

            /////Parse XML

            //build scroller from xml

                      var spaceBetween:int = 20;

             

                      function buildScroller(imageList:XMLList):void{

                      trace("build Scroller");

             

                      var nextX:int=spaceBetween; //not sure where you want to start;

             

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

                                var thisOne:MovieClip = new MovieClip();

             

                                thisOne.x=nextX;

             

             

                                nextX=int(imageList[item].attribute("width"))+spaceBetween;

             

             

             

             

                                //outline

                                var blackBox:Sprite = new Sprite();

                                blackBox.graphics.beginFill(0xFFFFFF);

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

                                thisOne.addChild(blackBox);

             

             

                                thisOne.itemNum = item;

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

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

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

                                thisOne.alpha = 0;

             

                                //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);

            }

             

             

             

             

            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 = 110;

             

                      mc.scaleX=mc.scaleY

             

                      if (centerHor) {

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

                      }

                      if (centerVert){

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

                      }

            }

            • 3. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
              sinious CommunityMVP

              There's no way around it if you don't know the images width to begin with. You will have to preload all your images, iterate through all of them finding the image with the largest width. Then use that number to align all images by setting the x position of the next image to that amount (plus a buffer, say 20px as mentioned).

               

              If you don't pre-iterate through your images to find that max width they will never look like they're in a column.

              • 4. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
                nikolaig Community Member

                What if I do know the image widths. Due to my limited knowledge with AS it is easier for me to go in the files and measure every single image and then specify its width in the script in XML file and refer to it with less code in AS3.

                It was also earlier suggested to me that it will be a bit too cumbersome to load each image and wait for another one to load.

                • 5. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
                  sinious CommunityMVP

                  Sorry I take weekends off

                   

                  If you're in windows you can use windows explorer to easily get dimensions. You can open the folder containing the images, go to "Details" view mode and select "Dimensions" as a column to display. This will easily let you examine all the files without needing to measure them. Here's a screenshot of that:

                   

                  http://www.filehorde.com/o/dimensions.jpg

                   

                  Make sure you're viewing by a detail view so it shows file properties. Right click where you see me point to arrows and the menu opens to allow you to check off Dimensions. Then you'll easily see all your file dimensions and can sort by it as you see I did.

                   

                  If you know the max width then you can simply use that width to do your column calculation. Always set the 'x' of each image over at least that amount, plus some padding. Then you will get correct easy columns.