dcsimg
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: [AS3] Center images loaded dynamicly

  1. #1
    Member
    Join Date
    Aug 2001
    Posts
    31

    [AS3] Center images loaded dynamicly

    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?
    }

  2. #2
    Junior Member
    Join Date
    Jul 2009
    Posts
    19
    Code:
    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;
    }
    Last edited by werehunt; 09-24-2009 at 05:07 AM.

  3. #3
    Member
    Join Date
    Aug 2001
    Posts
    31
    hmmm but the child is already added in the first function. How do I reference the holder from the onImageComplete function?

  4. #4
    Junior Member
    Join Date
    Jul 2009
    Posts
    19
    Quote Originally Posted by Soelle View Post
    hmmm but the child is already added in the first function.
    well, I cant see that, post more code.

  5. #5
    Member
    Join Date
    Aug 2001
    Posts
    31
    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?
    }

  6. #6
    Junior Member
    Join Date
    Jul 2009
    Posts
    19
    Code:
    picturezoom.pict.addChild(picture);
    what is this?
    Last edited by werehunt; 09-24-2009 at 08:26 AM.

  7. #7
    Member
    Join Date
    Aug 2001
    Posts
    31
    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.

  8. #8
    Junior Member
    Join Date
    Jul 2009
    Posts
    19
    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 ...

    Code:
    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();
    		} 
    	}
    Last edited by werehunt; 09-24-2009 at 02:19 PM.

  9. #9
    Member
    Join Date
    Aug 2001
    Posts
    31
    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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center