How do I code thumb scroller images set to uniformed spacing in between?
nikolaig May 8, 2012 1:01 PMI 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?
