No Action Until Image Loads, Please

Question

Hi;
For some reason the squares of color that are supposed to load behind the image that acts as a mask load first, momentarily showing while the image loads, which looks bad. Hre is the code:
package
    import flash.display.Sprite;
    import flash.text.TextLineMetrics;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldAutoSize;
    import flash.net.navigateToURL;
    import flash.display.Bitmap;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.MovieClip;
    import com.greensock.*;
    import com.greensock.easing.*;
    import flash.display.Loader;
    import flash.events.ProgressEvent;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.net.URLRequest;
    import Images;
    import flash.display.SpreadMethod;
    [SWF(backgroundColor="0x505050")]
    public class BillsBBQPreloader extends MovieClip
        var loader:Loader = new Loader();
        var loader2:Loader = new Loader();
        var loader3:Loader = new Loader();
        var loader4:Loader = new Loader();
        var loader5:Loader = new Loader();
        private var myTextField:TextField = new TextField();
        var imgFlag1:Boolean = new Boolean(false);
        var imgFlag2:Boolean = new Boolean(false);
        var imgFlag3:Boolean = new Boolean(false);
        var imgFlag4:Boolean = new Boolean(false);
        var imgFlag5:Boolean = new Boolean(false);
        var thermometer:Images = new Images();
        var thermometerMask:Images = new Images();
        var mask_container:Sprite = new Sprite();
        var square:Sprite = new Sprite();
        public function BillsBBQPreloader()
            addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
        private function init(e:Event)
//            addChild(mask_container);
//            mask_container.addChild(thermometerMask);
            addChild(square);
            AddThermometer();
        private function AddText():void
            var clientName:TextField = new TextField();
            var format:TextFormat = new TextFormat();
            format.font = 'Arial';
            format.size = 35;
            clientName.textColor = 0x023048;
            clientName.text = "Bill's Texas Pit BBQ";
            clientName.autoSize = TextFieldAutoSize.LEFT;
            clientName.setTextFormat(format);
            var nameSprite:Sprite = new Sprite();
            nameSprite.x = stage.stageWidth/2 - 150;
            nameSprite.y = 10;
            nameSprite.alpha = 0;
            TweenLite.to(nameSprite, 2, {alpha:1});
            addChild(nameSprite);
            nameSprite.addChild(clientName);
            AddWhite();
        private function AddThermometerMask():void
            thermometerMask.ImagesArray = ["images/thermometer-mask.png", "index.py", 144, 1152, (stage.stageWidth-144)/2, 23];
            AddRed();
        private function AddWhite():void
            square.graphics.beginFill(0xffffff);
            square.graphics.moveTo(0,0);
            square.graphics.lineTo(100,0);
            square.graphics.lineTo(100,504);
            square.graphics.lineTo(0,504);
            square.graphics.endFill();
            square.x = (stage.stageWidth-100)/2;
            square.y = ((stage.stageHeight+458)/2)-83;
            AddRed();
        private function AddRed():void
//            square.mask = mask_container;
            square.graphics.beginFill(0xff0000);
            square.graphics.moveTo(0,0);
            square.graphics.lineTo(75,0);
            square.graphics.lineTo(75,504);
            square.graphics.lineTo(0,504);
            square.graphics.endFill();
            square.x = (stage.stageWidth-74)/2;
            square.y = ((stage.stageHeight+458)/2)-83;
            AddLoaders();
        private function AddThermometer():void
            thermometer.ImagesArray = ["images/thermometer-mask.png", "index.py", 144, 1152, (stage.stageWidth-144)/2, (stage.stageHeight-458)/2];
            addChild(thermometer);
//            AddThermometerMask();
            AddText();
        private function AddLoaders():void
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
            loader.load(new URLRequest("images/logo_w_fire.png"));
            loader2.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
            loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded2);
            loader2.load(new URLRequest("images/tpwebbaseline.jpg"));
            loader3.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded3);
            loader3.load(new URLRequest("images/tpdplatebgwflame.jpg"));
            removeEventListener(Event.ADDED_TO_STAGE, init);
            addChild(myTextField);
            myTextField.width = 250;
            myTextField.x = (stage.stageWidth-50)/2;
            myTextField.y = 470;
            myTextField.selectable = false;
            myTextField.border = false;
            myTextField.borderColor = 0xAA0000;
            myTextField.autoSize = TextFieldAutoSize.LEFT;
            var myFormat:TextFormat = new TextFormat();
            myFormat.color = 0x023048;
            myFormat.size = 24;
            myFormat.italic = true;
            myTextField.defaultTextFormat = myFormat;
        private function imageLoaded(event:Event):void
            imgFlag1 = true;
            if (imgFlag2 == true && imgFlag3 == true)
                completePreloader();
        private function imageLoaded2(event:Event):void
            imgFlag2 = true;
            if (imgFlag1 == true && imgFlag3 == true)
                completePreloader();
        private function imageLoaded3(event:Event):void
            imgFlag3 = true;
            if (imgFlag1 == true && imgFlag2 == true)
                completePreloader();
        function completePreloader()
            var req:URLRequest = new URLRequest('index.py');
            navigateToURL(req, '_self');
        function loop(e:ProgressEvent):void
            var perc:Number = e.bytesLoaded/e.bytesTotal;
            myTextField.text = Math.ceil(perc*100).toString() + "%";
            var myY:Number = ((stage.stageHeight+458)/2)-83-(3.75*perc*100)
            square.y = myY;
Here's the code for Images()
package  {
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.filters.*;
    import flash.filters.BitmapFilterQuality;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    public class Images extends MovieClip
        private var parent_container:Sprite = new Sprite();
        private var _path:String = new String("path");
        private var _myWidth:Number = new Number(20);
        private var _myHeight:Number = new Number(20);
        private var _myX:Number = new Number(20);
        private var _myY:Number = new Number(20);
        private var _myURL:String = new String("url");
        public function Images():void
        public function set ImagesArray(_imagesArray:Array):void
            _path = _imagesArray[0];
            _myURL = _imagesArray[1];
            _myWidth = _imagesArray[2];
            _myHeight = _imagesArray[3];
            _myX = _imagesArray[4];
            _myY = _imagesArray[5];
            LoadImage();
        function LoadImage():void
            parent_container = new Sprite();
            addChild(parent_container)
            var req:URLRequest = new URLRequest(_path);
            var loader:Loader = new Loader();
            loader.load(req);
            loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);         
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadedImage);
        function LoadedImage(e:Event):void
            var loaderInfo:LoaderInfo = e.target as LoaderInfo;
            var displayObject:DisplayObject = loaderInfo.content;
            displayObject.width = _myWidth;
            displayObject.height = _myHeight;
            parent_container.addChild(displayObject);
            parent_container.x = _myX;
            parent_container.y = _myY;
        function ioErrorHandler(event:IOErrorEvent):void {
            trace("ioErrorHandler: " + event);
I have experimented with adding the square child elsewhere (such as in the code where it is created twice), but that proves even more disastrous. Please advise.
TIA,
Beno

Answer 1

Oops. I realize now you guys showed me how to do this; namely dispatchEvent(). (This was a problem I set aside while we solved the one that addressed this issue.) Here is the revised code which accomplishes what I wanted:
package
    import flash.display.Sprite;
    import flash.text.TextLineMetrics;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldAutoSize;
    import flash.net.navigateToURL;
    import flash.display.Bitmap;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.MovieClip;
    import com.greensock.*;
    import com.greensock.easing.*;
    import flash.display.Loader;
    import flash.events.ProgressEvent;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.net.URLRequest;
    import Images;
    import flash.display.SpreadMethod;
    [SWF(backgroundColor="0x505050")]
    public class BillsBBQPreloader extends MovieClip
        var loader:Loader = new Loader();
        var loader2:Loader = new Loader();
        var loader3:Loader = new Loader();
        var loader4:Loader = new Loader();
        var loader5:Loader = new Loader();
        private var myTextField:TextField = new TextField();
        var imgFlag1:Boolean = new Boolean(false);
        var imgFlag2:Boolean = new Boolean(false);
        var imgFlag3:Boolean = new Boolean(false);
        var imgFlag4:Boolean = new Boolean(false);
        var imgFlag5:Boolean = new Boolean(false);
        var thermometer:Images = new Images();
        var thermometerMask:Images = new Images();
        var mask_container:Sprite = new Sprite();
        var square:Sprite = new Sprite();
        public function BillsBBQPreloader()
            addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
        private function init(e:Event)
//            addChild(mask_container);
//            mask_container.addChild(thermometerMask);
            AddThermometer();
        private function AddText():void
            var clientName:TextField = new TextField();
            var format:TextFormat = new TextFormat();
            format.font = 'Arial';
            format.size = 35;
            clientName.textColor = 0x023048;
            clientName.text = "Bill's Texas Pit BBQ";
            clientName.autoSize = TextFieldAutoSize.LEFT;
            clientName.setTextFormat(format);
            var nameSprite:Sprite = new Sprite();
            nameSprite.x = stage.stageWidth/2 - 150;
            nameSprite.y = 10;
            nameSprite.alpha = 0;
            TweenLite.to(nameSprite, 2, {alpha:1});
            addChild(nameSprite);
            nameSprite.addChild(clientName);
            AddWhite();
        private function AddThermometerMask():void
            thermometerMask.ImagesArray = ["images/thermometer-mask.png", "index.py", 144, 1152, (stage.stageWidth-144)/2, 23];
            AddRed();
        private function AddWhite():void
            square.graphics.beginFill(0xffffff);
            square.graphics.moveTo(0,0);
            square.graphics.lineTo(100,0);
            square.graphics.lineTo(100,504);
            square.graphics.lineTo(0,504);
            square.graphics.endFill();
            square.x = (stage.stageWidth-100)/2;
            square.y = ((stage.stageHeight+458)/2)-83;
            AddRed();
        private function AddRed():void
//            square.mask = mask_container;
            square.graphics.beginFill(0xff0000);
            square.graphics.moveTo(0,0);
            square.graphics.lineTo(75,0);
            square.graphics.lineTo(75,504);
            square.graphics.lineTo(0,504);
            square.graphics.endFill();
            square.x = (stage.stageWidth-74)/2;
            square.y = ((stage.stageHeight+458)/2)-83;
            AddLoaders();
        private function AddThermometer():void
            thermometer.ImagesArray = ["images/thermometer-mask.png", "index.py", 144, 1152, (stage.stageWidth-144)/2, (stage.stageHeight-458)/2];
            thermometer.addEventListener("loadcomplete", AddToStage);
        private function AddToStage(e:Event):void
            addChild(square);
            addChild(thermometer);
            AddText();
        private function AddLoaders():void
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
            loader.load(new URLRequest("images/logo_w_fire.png"));
            loader2.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
            loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded2);
            loader2.load(new URLRequest("images/tpwebbaseline.jpg"));
            loader3.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded3);
            loader3.load(new URLRequest("images/tpdplatebgwflame.jpg"));
            removeEventListener(Event.ADDED_TO_STAGE, init);
            addChild(myTextField);
            myTextField.width = 250;
            myTextField.x = (stage.stageWidth-50)/2;
            myTextField.y = 470;
            myTextField.selectable = false;
            myTextField.border = false;
            myTextField.borderColor = 0xAA0000;
            myTextField.autoSize = TextFieldAutoSize.LEFT;
            var myFormat:TextFormat = new TextFormat();
            myFormat.color = 0x023048;
            myFormat.size = 24;
            myFormat.italic = true;
            myTextField.defaultTextFormat = myFormat;
        private function imageLoaded(event:Event):void
            imgFlag1 = true;
            if (imgFlag2 == true && imgFlag3 == true)
                completePreloader();
        private function imageLoaded2(event:Event):void
            imgFlag2 = true;
            if (imgFlag1 == true && imgFlag3 == true)
                completePreloader();
        private function imageLoaded3(event:Event):void
            imgFlag3 = true;
            if (imgFlag1 == true && imgFlag2 == true)
                completePreloader();
        function completePreloader()
            var req:URLRequest = new URLRequest('index.py');
            navigateToURL(req, '_self');
        function loop(e:ProgressEvent):void
            var perc:Number = e.bytesLoaded/e.bytesTotal;
            myTextField.text = Math.ceil(perc*100).toString() + "%";
            var myY:Number = ((stage.stageHeight+458)/2)-83-(3.75*perc*100)
            square.y = myY;
package  {
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.filters.*;
    import flash.filters.BitmapFilterQuality;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    public class Images extends MovieClip
        private var parent_container:Sprite = new Sprite();
        private var _path:String = new String("path");
        private var _myWidth:Number = new Number(20);
        private var _myHeight:Number = new Number(20);
        private var _myX:Number = new Number(20);
        private var _myY:Number = new Number(20);
        private var _myURL:String = new String("url");
        public function Images():void
        public function set ImagesArray(_imagesArray:Array):void
            _path = _imagesArray[0];
            _myURL = _imagesArray[1];
            _myWidth = _imagesArray[2];
            _myHeight = _imagesArray[3];
            _myX = _imagesArray[4];
            _myY = _imagesArray[5];
            LoadImage();
        function LoadImage():void
            parent_container = new Sprite();
            addChild(parent_container)
            var req:URLRequest = new URLRequest(_path);
            var loader:Loader = new Loader();
            loader.load(req);
            loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);         
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadedImage);
        function LoadedImage(e:Event):void
            var loaderInfo:LoaderInfo = e.target as LoaderInfo;
            var displayObject:DisplayObject = loaderInfo.content;
            displayObject.width = _myWidth;
            displayObject.height = _myHeight;
            parent_container.addChild(displayObject);
            parent_container.x = _myX;
            parent_container.y = _myY;
            dispatchEvent(new Event("loadcomplete"));
        function ioErrorHandler(event:IOErrorEvent):void {
            trace("ioErrorHandler: " + event);
Thanks,
Beno