[AS3] Center images loaded dynamicly

[Soelle]

Hi

I have several images that are loaded dynamic. Now I want them to center in the container. How is that done? I can get the width and height but I can't adjust the x values on the loaderinfo object.

Heres part of the code:
... part of function ...
for (var i:uint=0; i<numPictures; i++) {

var pictLdr:Loader = new Loader();

var pictURLReq:URLRequest=new URLRequest("png/"+i+".png");
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.C OMPLETE, onImageComplete);
}
...

function onImageComplete(e:Event):void
{
var info:LoaderInfo = LoaderInfo( e.target );
trace( info.width, info.height ); //this traces fine but how do I then center?
}

[werehunt]

function onImageComplete(e:Event):void

   var image:Bitmap = (Bitmap)(e.target.content);//Save the loaded bitmap to a local variable
   var holder:Sprite = new Sprite();//you can also do without this sprite, it all depends what are you planing to do with these images...
   container.addChild(holder);
   holder.addChild(image);
   holder.x = container.width / 2 - holder.width / 2;
   holder.y = container.height/ 2 - holder.height/ 2;
}

[Soelle]

hmmm but the child is already added in the first function. How do I reference the holder from the onImageComplete function?

[werehunt]

hmmm but the child is already added in the first function.

well, I cant see that, post more code.

[Soelle]

Okay :-)

function xmlLoaded(event:Event):void {
myXML=XML(myLoader.data);
numPictures=myXML.pictures.length();
for (var i:uint=0; i<numPictures; i++) {
var pictLdr:Loader = new Loader();
var pictURLReq:URLRequest=new URLRequest("png/"+i+".png");
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.C OMPLETE, onImageComplete);
var picture:MovieClip=new MovieClip();
picture.name="picture"+i;
picture.addChild(pictLdr);
picturezoom.pict.addChild(picture);
}
}
and then

function onImageComplete(e:Event):void
{
var info:LoaderInfo = LoaderInfo( e.target );
trace( info.width, info.height ); //this traces fine but how do I then center?
}

[werehunt]

picturezoom.pict.addChild(picture);

what is this?

[Soelle]

picturezoom is a container mc placed on the canvas with different elements in it. The pict (which also is inside picturezoom mc) is the holder for the loaded images.

[werehunt]

you know what?
I lost the interest somewhere between you not posting the whole neccessary code, you not formating the code, you not explaining enough what actually you want to do.
And I still dont get it to what actually you need to center each image to... I presume to picturezoom.pict...
Also what exactly picturezoom.pict is and how does it look like and why are you loading all big images (if they are big images) at once on top of each other ...

var thumbArr:Array = new Array();
var holderArr:Array = new Array();
var loadedThumbs:int = 0;

function xmlLoaded(event:Event):void {

   myXML=XML(myLoader.data);
   numPictures=myXML.pictures.length();

   for (var i:uint=0; i<numPictures; i++) {
     thumbArr.push(//push your links to images in here//);
   }

   startLoading();
}
	
	function startLoading():void {
		
		for (var i:int = 0; i < numPictures(); i++) {
			
			var picture:MovieClip=new MovieClip();
			holderArr.push(picture);
			picture.name="picture"+i;
                        picturezoom.pict.addChild(picture);

		}
		
		loadNextThumb();
	}
	
	function loadNextThumb():void {
		var thumbLoader:Loader = new Loader();
		thumbLoader.load(new URLRequest(thumbArr[0]));
		thumbLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, thumb_IOError, false, 0, true);
		thumbLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, thumb_Progress, false, 0, true);
		thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumb_Complete, false, 0, true);
		thumbArr.splice(0,1);
	}

	function thumb_IOError(e:IOErrorEvent):void {
		trace("thumb_IOError: " + e);
	}
	
	function thumb_Progress(e:ProgressEvent):void {
	}
	
	function thumb_Complete(e:Event):void {
		e.target.removeEventListener(IOErrorEvent.IO_ERROR, thumb_IOError);
		e.target.removeEventListener(ProgressEvent.PROGRESS, thumb_Progress);
		e.target.removeEventListener(Event.COMPLETE, thumb_Complete);

		var image:Bitmap = (Bitmap)(e.target.content);//Save the loaded bitmap to a local variable
		
		holderArr[loadedThumbs].addChild(image);
		
//position your images here
holderArr[loadedThumbs].x = picturezoom.pict.width / 2 - holderArr[loadedThumbs].width / 2;
holderArr[loadedThumbs].y = picturezoom.pict.height / 2 - holderArr[loadedThumbs].height / 2;

		if(thumbArr.length > 0){
    		 loadedThumbs++;
  		     loadNextThumb();
		} 
	}

[Soelle]

I really didn't mean to upset you. I'm very sorry. The reason for not posting all of the code was that I thought it would be more simple to explain. The reason for loading all the big images at once is that I'm doing a slideshow width the images. Once they are loaded I alpha them out and alpha up again when sliding through the images. The images are in different sizes so therefore it would look better if all the loaded images are aligned to the center instead of the top left corner.

I'm pretty new to AS3 (which you properly figured out), it seems the example gives some extra lines instead of referencing the picturezoom.pict holder in function onImageComplete isn't that possible?

I apologize for not being specific and the lack of code. I'm very happy for your help!