-
1. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
kglad May 9, 2012 2:32 PM (in response to nikolaig)use:
var spaceBetween:int = 20;
function buildScroller(imageList:XMLList):void{
trace("build Scroller");
var nextX:int = spaceBetween; // not sure where you want to start;
for (var item:uint = 0; item<imageList.length();item++) {
var thisOne:MovieClip = new MovieClip();
thisOne.x = nextX;
nextX = int(imageList[item].attribute("width"))+spaceBetween;
}
-
2. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
nikolaig May 11, 2012 8:39 AM (in response to kglad)Thank You for your reply.
I tried to implement it but images are still jambled together.
Perhaps it has something to do with the fact that I specify the actual width of the image in the XML file but then define it as a scaled value in the code later on (11th line at the bottom of the code):
mc.height = 110;
This height definition will just give the width proportional to the height. Does it mean that I can not specify the height as it is?
Also can be there a mistake in the XML file? I just assigned the width number as it is in pixels for each image. Here is an example:
<images>
<image src="appThmb_imgs/RosesGallasGalore_RGB_xsm.jpg" title="RosesGallasGalore" url="http://www.888acolyte.com" width="131"/>
<image src="appThmb_imgs/SangriaBling_RGB_xsm.jpg" title="SangriaBling" url="http://www.888acolyte.com" width="233"/>
<image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com" width="148"/>
</images>
There were no errors in the output or compiler errors tabs.
Here is my code in its entirety:
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_imgsModfd.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);
buildScroller(xmlData.image);
}
/////Build Scroller MovieClip to Contain Each Image
var scroller:MovieClip = new MovieClip();
this.addChild(scroller);
scroller.y = 30;
/////
/////Parse XML
//build scroller from xml
var spaceBetween:int = 20;
function buildScroller(imageList:XMLList):void{
trace("build Scroller");
var nextX:int=spaceBetween; //not sure where you want to start;
for (var item:uint = 0; item<imageList.length();item++) {
var thisOne:MovieClip = new MovieClip();
thisOne.x=nextX;
nextX=int(imageList[item].attribute("width"))+spaceBetween;
//outline
var blackBox:Sprite = new Sprite();
blackBox.graphics.beginFill(0xFFFFFF);
blackBox.graphics.drawRect(-1, -1, 124, 107);
thisOne.addChild(blackBox);
thisOne.itemNum = item;
thisOne.title = imageList[item].attribute("title");
thisOne.link = imageList[item].attribute("url");
thisOne.src = imageList[item].attribute("src");
thisOne.alpha = 0;
//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);
}
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 = 110;
mc.scaleX=mc.scaleY
if (centerHor) {
mc.x = (maxW - mc.width) / 2;
}
if (centerVert){
mc.y = (maxH - mc.height) / 2;
}
}
-
3. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
sinious May 11, 2012 8:56 AM (in response to nikolaig)There's no way around it if you don't know the images width to begin with. You will have to preload all your images, iterate through all of them finding the image with the largest width. Then use that number to align all images by setting the x position of the next image to that amount (plus a buffer, say 20px as mentioned).
If you don't pre-iterate through your images to find that max width they will never look like they're in a column.
-
4. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
nikolaig May 11, 2012 9:12 AM (in response to sinious)What if I do know the image widths. Due to my limited knowledge with AS it is easier for me to go in the files and measure every single image and then specify its width in the script in XML file and refer to it with less code in AS3.
It was also earlier suggested to me that it will be a bit too cumbersome to load each image and wait for another one to load.
-
5. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
sinious May 14, 2012 6:48 AM (in response to nikolaig)Sorry I take weekends off
If you're in windows you can use windows explorer to easily get dimensions. You can open the folder containing the images, go to "Details" view mode and select "Dimensions" as a column to display. This will easily let you examine all the files without needing to measure them. Here's a screenshot of that:
Make sure you're viewing by a detail view so it shows file properties. Right click where you see me point to arrows and the menu opens to allow you to check off Dimensions. Then you'll easily see all your file dimensions and can sort by it as you see I did.
If you know the max width then you can simply use that width to do your column calculation. Always set the 'x' of each image over at least that amount, plus some padding. Then you will get correct easy columns.
-
6. Re: Equal spacing between the images of uniformed height but variable widths with AS3?
kglad May 14, 2012 6:56 AM (in response to nikolaig)use the actual height in your xml.




