6 Replies Latest reply on Jun 18, 2010 3:46 AM by David_F57

    Scaled images within a HBox

    Steffen Bobek

      My goal is to create a list containing image thumbnails side by side. The images are created dynamically as is the list.

       

      private function createThumbsList(imageUrls : Array) : void {
          var list : HBox = new HBox();
          list.height = 50;
          this.moduleContext.displayContainer.addChild(list);

       

          for (var i : Number = 0; i < imageUrls.length; i++)
          {
              var img : Image = new Image();
              img.source = imageUrls[i];
              img.percentHeight = 100;
              img.addEventListener(MouseEvent.CLICK, function(event : MouseEvent) : void {
                  // show fullsize image
              });
              list.addChild(img);
          }
      }

       

      The thumbnails are scaled to the height of the list. Although the images' content width is scaled too, their control width remains unscaled. Thus there are heavy spaces between the thumbnails.

       

      How to solve?

       

      I learned there are properties "width" and "contentWidth" and you only have to do:

       

          img.width = img.contentWidth;

       

      But nothing happened when I added this after list.addChild(img);. I guess it's too early in the control's life cycle and "contentWidth" is not calculated yet, right? When is the right moment for the command? Or is there a workaround, e.g. usage of another container control instead of HBox?

       

      Thanks,

      Steffen