Skip to main content
N
nikolaig
Inspiring
May 7, 2012
Answered

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

  • May 7, 2012
  • 1 reply
  • 2541 views

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;

          }

}

This topic has been closed for replies.
Correct answer Ned Murphy

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.

1 reply

Ned Murphy
Ned Murphy
Legend
May 7, 2012

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.

N
nikolaigAuthor
Inspiring
May 8, 2012

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
Ned MurphyCorrect answer
Legend
May 8, 2012

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices