Load images side by side

1

Hey everybody,

I’m quite new in AS3 and as first learning project I’m creating a image multi-gallery.

Until now I had some success retrieving the XML, creating the galleries, loading the images etc. But I tryed a lot and I don’t know how to load each image side by side, a newbie doubt.

For this I guess that I will need a listener to get the images width (each image has a different one) and only after this I can make the side by side work.

I really don’t know how can I do this. Completely lost.

Here’s my code until now:

//// CREATE CONTAINERS ////

// CREATE MENU CONTAINER //

var menuContainer:MovieClip = new MovieClip();

menuContainer.x=10;
menuContainer.y=300;

addChild(menuContainer);


// CREATE IMAGES CONTAINER //

var imagesContainer:MovieClip = new MovieClip();

imagesContainer.x=100;
imagesContainer.y=10;

addChild(imagesContainer);

// IMAGE LOADERS //

var imagesLoader:Loader;
var bigImagesLoader:Loader;


//// LOAD XML ////

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, whenLoaded);

xmlLoader.load(new URLRequest("XML/roiaXML.xml"));

var xml:XML;

function whenLoaded(evt:Event):void {
	xml=new XML(evt.target.data);
	var mySetsList:XMLList=xml.children();

	//// MENU BUTTONS ////

	// POSITIONING BUTTONS INSIDE MENU CONTAINER//
	var rowsQuantity:Number=3;
	var columnsQuantity:Number=Math.ceil(mySetsList.length()/rowsQuantity);
	var cellWidth:Number=160;


	// CREATE BUTTONS //
	for (var i:int=0; i< mySetsList.length(); i++) {

		var newSetButtonMC:setButtonMC=new setButtonMC();

		var imageNodesArray:Array = new Array();

		for (var j:int=0; j<mySetsList*.IMAGE.length(); j++) {
			imageNodesArray.push(mySetsList*.IMAGE[j].attribute("smallURL"));
		}

		newSetButtonMC.imageArray=imageNodesArray;

		//

		newSetButtonMC.setButtonText.text=mySetsList.attribute("setTitle")*;
		newSetButtonMC.setButtonText.autoSize=TextFieldAutoSize.LEFT;

		var cellX:Number=Math.floor(i/rowsQuantity);
		var cellY:Number=i%rowsQuantity;

		newSetButtonMC.x=cellX*cellWidth;
		newSetButtonMC.y=cellY*(newSetButtonMC.height+10);

		newSetButtonMC.addEventListener(MouseEvent.CLICK, onClickButton);

		menuContainer.addChild(newSetButtonMC);
	}


	//// MENU BUTTONS ACTIONS ////

	function onClickButton(mevt:MouseEvent):void {
		// LOAD GALLERY IMAGES //

		var targetButton:setButtonMC=setButtonMC(mevt.currentTarget);

		for (i=0; i<targetButton.imageArray.length; i++) {

			imagesLoader = new Loader();
			imagesLoader.load(new URLRequest (targetButton.imageArray*));

			imagesLoader.addEventListener(Event.INIT, getImageWidth);

			imagesContainer.addChild(imagesLoader);

			// LOAD BIG IMAGE WHEN CLICK IMAGE FROM GALERRY //

			imagesLoader.addEventListener(MouseEvent.CLICK, loadBigImage);
		}
	}

	function getImageWidth(eventImageWidth:Event):void {// FUNCTION TO GET IMAGE WIDTH //
		// what can I do here, I have no idea;
	}

	function loadBigImage(event:MouseEvent):void {
		trace("ok");
	}
}

Thanks in advance . Abstrato