Problem in Loading Multiple image in Single Sprite/MovieClip

Question

Hi All,
I am having a killing problem in loading multiple images in single movie clip/sprite using a separate class.
Here is the ImageLoader.as class
package com.project.utils{
    import com.project.*;
    import com.project.utils.*;
    import flash.events.EventDispatcher;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.display.Loader;
    import flash.events.IOErrorEvent;
    import flash.net.URLLoader;
    import flash.events.MouseEvent;
    import flash.net.URLRequest;
    import flash.display.Bitmap;
    public class ImageLoader extends EventDispatcher {
        public var imgloader:Loader;
        public var imgMc:MovieClip;
        public var imgObject:Object;
        public var loaded:Number;
        public function ImageLoader():void {
            imgMc = new MovieClip();
            imgObject = new Object();
            imgloader = new Loader();
        public function loadImage(imgHolder:MovieClip, imgObj:Object):void {
            imgMc = new MovieClip();
            imgObject = new Object();
            imgloader = new Loader();
            imgMc = imgHolder;
            imgObject = imgObj;
            imgloader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImgLoad);
            imgloader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onImgLoadProgress);
            imgloader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onImageLoadFailed);
            imgloader.load(new URLRequest(imgObj.FilePath));
        private function onImgLoad(Evt:Event):void {
            var image:Bitmap = Bitmap(Evt.target.content);
            try {
                imgMc.removeChildAt(0);
            } catch (error:Error) {
            imgMc.addChild(image);
            try {
                if (imgObject.URL != undefined) {
                    imgMc.buttonMode = true;
                    imgMc.removeEventListener(MouseEvent.CLICK, onImageClicked);
                    imgMc.addEventListener(MouseEvent.CLICK, onImageClicked);
            } catch (err:Error) {
            dispatchEvent(new CustomEvent("CustomEvent.ON_IMGE_LOAD"));
        private function onImageClicked(evt:MouseEvent):void {
            trace("Image Attrs:"+imgObject.URL +" Target "+imgObject.Target);
        private function onImgLoadProgress(Evt:ProgressEvent):void {
            if (Evt.bytesLoaded>0) {
                loaded = Math.floor((Evt.bytesLoaded*100)/Evt.bytesTotal);
                dispatchEvent(new CustomEvent("CustomEvent.ON_IMGE_LOAD_PROC",loaded));
        private function onImageLoadFailed(Evt:IOErrorEvent):void {
            trace("Image Loading Failed");
            dispatchEvent(new CustomEvent("CustomEvent.ON_IMGE_LOAD_FAIL"));
Here I am loading some images using the above class in a for loop, like
            for (var i=0; i < 3; i++) {
                //imgLoader=new ImageLoader;
                imgLoader.addEventListener("CustomEvent.ON_IMGE_LOAD",onImageLoad);
                var target:MovieClip=videolist_mc["list" + mcCount + "_mc"];
                target.list_mc.visible=false;
                var imgObj:Object=new Object;
                imgObj.FilePath=list[i].Thumbnail;
                imgObj.Url=list[i].Url;
                imgObj.Target=list[i].Target;
                target.list_mc.urlObj=new Object  ;
                target.list_mc.urlObj=imgObj;
                imgLoader.loadImage(target.list_mc.imgholder_mc,imgObj);
                target.list_mc.lable_txt.htmlText="<b>" + list[i].Label + "</b>";
                target.list_mc.imgholder_mc.buttonMode=true;
                target.list_mc.imgholder_mc.addEventListener(MouseEvent.CLICK,onItemPressed);
                mcCount++;
In this case, the ImageLoader.as works only on the last movie clip from the for loop. For example, if i am trying to load three image in three movie clips namely img_mc1,img_mc2 and img_mc3 using the for loop and ImageLoader.as, I am getting the image loaded in the third movie clip only img_mc.
See at the same time, If i uncomment onething in the for loop that is
//imgLoader=new ImageLoader;         
its working like a charm. But I know creating class objects in a for loop is not a good idea and also its causes some other problems in my application.
So, help to get rid out of this problem.
Thanks
-Varun

Answer 1

package com.project.utils{
    import com.project.*;
    import com.project.utils.*;
    import flash.events.EventDispatcher;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.display.Loader;
    import flash.events.IOErrorEvent;
    import flash.net.URLLoader;
    import flash.events.MouseEvent;
    import flash.net.URLRequest;
    import flash.display.Bitmap;
    public class ImageLoader extends EventDispatcher {
        public var imgloader:Loader;
        public var imgMc:MovieClip;
        public var imgObject:Object;
        public var loaded:Number;
        public function ImageLoader():void {
// better add you movieclip to the stage if you want to view anything added to it.
            imgMc = new MovieClip();
            imgObject = new Object();
            imgloader = new Loader();
        public function loadImage(filepath:String):void {
            imgloader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImgLoad);
            imgloader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onImgLoadPr ogress);
            imgloader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onImageLoadF ailed);
            imgloader.load(new URLRequest(filepath));
        private function onImgLoad(Evt:Event):void {
            var image:Bitmap = Bitmap(Evt.target.content);
            try {
                imgMc.removeChildAt(0);
            } catch (error:Error) {
            imgMc.addChild(image);
            try {
                if (imgObject.URL != undefined) {
                    imgMc.buttonMode = true;
                    imgMc.removeEventListener(MouseEvent.CLICK, onImageClicked);
                    imgMc.addEventListener(MouseEvent.CLICK, onImageClicked);
            } catch (err:Error) {
            dispatchEvent(new CustomEvent("CustomEvent.ON_IMGE_LOAD"));
        private function onImageClicked(evt:MouseEvent):void {
            trace("Image Attrs:"+imgObject.URL +" Target "+imgObject.Target);
        private function onImgLoadProgress(Evt:ProgressEvent):void {
            if (Evt.bytesLoaded>0) {
                loaded = Math.floor((Evt.bytesLoaded*100)/Evt.bytesTotal);
                dispatchEvent(new CustomEvent("CustomEvent.ON_IMGE_LOAD_PROC",loaded));
        private function onImageLoadFailed(Evt:IOErrorEvent):void {
            trace("Image Loading Failed");
            dispatchEvent(new CustomEvent("CustomEvent.ON_IMGE_LOAD_FAIL"));
Here I am loading some images using the above class in a for loop, like
            for (var i=0; i < 3; i++) {
                var imgLoader:ImageLoader=new ImageLoader();
                imgLoader.addEventListener("CustomEvent.ON_IMGE_LOAD",onImageLoad);
                var target:MovieClip=videolist_mc["list" + mcCount + "_mc"];
                target.list_mc.visible=false;
                var imgObj:Object=new Object;
                imgObj.FilePath=list[i].Thumbnail;
                imgObj.Url=list[i].Url;
                imgObj.Target=list[i].Target;
                target.list_mc.urlObj=new Object  ;
                target.list_mc.urlObj=imgObj;
                imgLoader.loadImage(pass the image file's path/name);
                target.list_mc.lable_txt.htmlText="<b>" + list[i].Label + "</b>";
                target.list_mc.imgholder_mc.buttonMode=true;
                target.list_mc.imgholder_mc.addEventListener(MouseEvent.CLICK,onItemPressed);
                mcCount++;