Scaled images within a HBox

Question

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

Answer 1

hi,
If you use a loader  image.load() then you can calculate the aspect and set the width correctly in the load complete event. I don't have time at the moment to look at an mx based solution but the following example allows you to load images but the renderer calculates the width based on the list height.
http://gumbo.flashhub.net/pagedrop/  source included.
David