3 Replies Latest reply on Apr 24, 2010 2:01 PM by SiHoop

    How to load and place images dynamically

    SiHoop Level 1

      I'm having trouble loading images dynamically. I want to import a series of images and have them displayed sequentially across the screen. The images will have different widths, so it's important to know the width of each imported image as gI will place an image immediately to the right of the previous image.I thought the code below would control the presentation, but the event handler does not seem to work well (perhaps in part because the images are different sizes).

       

      What should I do to control the placement of the images?

       

      Thnks a lot.

       

      xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   creationComplete="init()">
      <mx:Script >
          <![CDATA[
      import mx.events.*;
      private var imageLoader:Loader
      private var imageX:Number=0;
      public function init():void{
            for(var i:int=0; i<4;i++){
                 imageLoader = new Loader();
                 var url:String = "images/animal"+i+".png";
                 var urlReq:URLRequest = new URLRequest(url);
                 imageLoader.load(urlReq);
                 trace("Image="+url)
                 container.addChild(imageLoader);
                 imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
             }
      }
      public function imageLoaded(e:Event):void {
           imageLoader.x=imageX;
             trace("imageLoader.x="+e.target.width);
          imageX+=e.target.width
          imageLoader.y=100
      }
          ]]>
      </mx:Script>
      <mx:UIComponent id="container" />
      </mx:Application>

        • 1. Re: How to load and place images dynamically
          Ansury Level 3

          Unless I completely misunderstand your goal, you're making things way too hard on yourself. 

           

          Setup an HBox and use addChild() to add images to that:

          (I made some changes to get it to work for me locally so don't copy/paste.)

           

               <fx:Script>
                    <![CDATA[
                         import mx.controls.Image;
                         
                         private var imageLoader:Loader;
                         
                         private function cc():void {
                              
                              for(var i:int=1; i<5;i++){
                                   imageLoader = new Loader();
                                   var url:String = "assets/mifune" + i + ".jpg";
                                   var urlReq:URLRequest = new URLRequest(url);
                                   imageLoader.load(urlReq);
                                   trace("Image=" + url)
                                   imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
                              }
                         }
                         
                         public function imageLoaded(e:Event):void {
                              
                              var i:Image = new Image();
                              i.source = e.currentTarget.content;
                              container.addChild(i);
                         }
                    ]]>
               </fx:Script>
               
               <mx:HBox id="container" height="162"/>
          

           

           

           

          By the way, do you need to use Loader because there's other ways to load images, ex. you can create a new Image like I'm doing above and set the source property to the path of the file, or you can embed the images, but I'm assuming these aren't an option.

          • 2. Re: How to load and place images dynamically
            SiHoop Level 1

            Fantastic! Thanks a lot!!

            • 3. Re: How to load and place images dynamically
              SiHoop Level 1

              My images are displaying in the HBox, but now there's another problem: They don't always import in the correct order. I think its because the images are different sizes so some images 'overtake' other images during the import process. Some times the images import as

              image1

              image2

              image3

              image4

               

              but other times they come in as

              image1

              image3

              image4

              image2

              Is there a way to make sure that the images import in the correct order?