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

[nikolaig]

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;

          }

}

[Ned Murphy]

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.

[nikolaig]

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?

[Ned Murphy · Accepted solution]

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.

[nikolaig]

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

}

[Ned Murphy]

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.

[nikolaig]

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.

[Ned Murphy]

You're welcome