Cannot position MovieClips loaded with images based on their height

Question

I use the following code to load some banners: a "banner" is a clickable PNG image. I get the URL it must point to through a parameter of the AdLoader class.

package 
{
    import flash.display.MovieClip;
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.navigateToURL;
    import flash.filters.DropShadowFilter;
    import flash.filters.BitmapFilterQuality;
    //
    public class AdLoader extends MovieClip
    {
        var mcs = [];
        var loader:Loader;
        var URLs:Array;
        var flt:DropShadowFilter;
        var h:uint = 0;
        //
        public function AdLoader(ads:Object)
        {
            initFilters();
            //
            var adsLen = ads.u.length;
            URLs = ads.u;
            // here I create movieClips based on how many images I must load
            buildContainers(adsLen);
            //
            for (var i:uint=0; i<adsLen; i++)
            {
                //
                loader = new Loader();
                var request:URLRequest = new URLRequest(ads.s[i]);
                loader.load(request);
                loader.contentLoaderInfo.addEventListener(Event.COMPLETE, __onLoadComplete);
                mcs[i].addChild(loader);
            }
        }
        //
        public function __onLoadComplete(e:Event)
        {
            loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, __onLoadComplete);

            //;
            var n = this.numChildren;
            //trace(n);
            //
            for (var j:uint=0; j<n; j++)
            {
                trace(j);
                h +=  this.getChildAt(j).height;
                this.getChildAt(j).y = j == 0 ? 0:h + 10;
            }
        }
        //
        public function gotoURL(e:MouseEvent)
        {
            var n = Number(e.target.parent.name.split("_")[1]);
            var request:URLRequest = new URLRequest(URLs[n]);
            navigateToURL(request,"_blank");
        }
        //
        public function buildContainers(n)
        {
            for (var i:uint=0; i<n; i++)
            {
                var mcLoader = new MovieClip();
                mcLoader.name = "loader_" + i;
                mcLoader.addEventListener(MouseEvent.MOUSE_DOWN, gotoURL);
                mcLoader.mouseEnabled = true;
                mcLoader.buttonMode = true;
                mcLoader.filters = new Array(flt);
                mcs.push(mcLoader);
                addChild(mcLoader);
            }
        }
        //
        public function initFilters()
        {
            //...removed
        }
    }
}

In practice, I create some MovieClip containers (loader_1, loader_2, etc.) and in each container I want to load one image.

What happens: when the images are loaded I want to position each image at the y+10 pixel of the preceding, so if the first is at y:0 and its height is 140, I want the second image at y:150 (and so on). I can't understand what it happens but sometimes the code works, while most of the time it doesn't.

Anybody interested can download all the files here (from the top left menu choose File, then "download original").

Answer 1

First off, you should first set the event handler and then start the loading:

loader.load(request);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, __onLoadComplete);

should be:

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, __onLoadComplete);
loader.load(request);

Secondly, keep in mind that, since you are loading multiple images, the __onLoadComplete will be called multiple times (once for each image). But, the first time it is called, in your code you "remove" it from your loader object (which is actually the loader for the last image, since you are overwriting it in the loop). Also, the code for calculating the positions is wrong (especially since it is run before all the images are loaded). Anyway, this is one way it could be done:

var imagesLoaded:int = 0;
public function __onLoadComplete(e:Event)
{
    // we keep track how many images we have loaded so far
    imagesLoaded++;

    // if all the images are loaded, we will arrange them
    if(imagesLoaded == adsLen)
    {
        var n = this.numChildren;

        h = 0;
        for (var j:uint=0; j<n; j++)
        {                
            this.getChildAt(j).y = h;
            h += this.getChildAt(j).height + 10;
        }
    }
}

Be sure to look for some more examples on how to load multiple assets in AS3 (for example this one).