Copy link to clipboard
Copied
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;
}
}
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 moviec
...Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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");
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
You're welcome