0 Replies Latest reply: May 8, 2012 1:01 PM by nikolaig RSS

    How do I code thumb scroller images set to uniformed spacing in between?

    nikolaig Community Member

      I am on the last bit of arranging the images in the thumb scroller from xml file.

      I am presently stack on trying to apply the equal spacing between the images.

      Here is the snippet of code I am trying to implement:

       

      var currentX = 90;//modified line to adjust variable thumb widths//90 because it is where it starts or any other number I need to position the images

                          var spaceBetween = 20;

                          var currentImageWidth = thisOne.currentImageWidth;

       

       

                          thisOne.x = currentX;

                          currentX += currentImageWidth+spaceBetween;

       

                          thisOne.itemNum = item;

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

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

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

                          thisOne.alpha = 0;

       

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

                          trace(thisOne.currentImageWidth);

       

       

      Unfortunatelly all the images are jammed together and not spread out in the scroller.

      Here is a snippet of code from xml file:

       

      <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/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com" width="148"/>

      </images>

       

      When I implemented the  trace(thisOne.currentImageWidth); it worked and showed me the specified numbers, but did not apply them to position the images.

       

      What did I miss?

       

      I also have this resizeMe function which seems to scale the images, I wander if this one already retrieves the images height?

       

      function completeHandler(e:Event):void{

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

       

        //size image into scroller

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

      }

       

       

      function resizeMe(mc:DisplayObject, maxH:Number, maxW:Number=0, 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;

                }

      }

       

      Does this function already defines the image width?