Skip navigation
nikolaig
Currently Being Moderated

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

May 7, 2012 2:08 PM

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,compl eteHandler);

                    ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERRO R, 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;

          }

}

 
Replies
  • Currently Being Moderated
    May 7, 2012 3:07 PM   in reply to nikolaig

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 8:55 AM   in reply to nikolaig

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 9:53 AM   in reply to nikolaig

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 11:58 AM   in reply to nikolaig

    You're welcome

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points