How do I code thumb scroller to have images set to its individual widths and uniformed heights?
nikolaig May 7, 2012 2:08 PMI 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;
}
}


