Question

I’m working in Flash AS3, AIR 3.2 for iOS SDK. I’m loading in an image, then applying a shape and textfield over this. But it seems that z-index goes weird with the loader class. At the moment, when this is run, the text and shape is applied first, and the image then gets applied on top of these even though the methods are in a different order. How do I set the shape and text to be above an image that’s loaded in from the loader class?

The methods in the main method:

displayImage();
overlayBox();
textAnimation();

These are the methods:

public function displayImage():void {

        var imageurl:String = "image.jpg";

        myLoader = new Loader();

        var fileRequest:URLRequest = new URLRequest(imageurl);

        myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
        myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

        myLoader.load(fileRequest);
    }

public function onLoaderProgress(e:ProgressEvent) {
        trace(e.bytesLoaded, e.bytesTotal); // this is where progress will be monitored
    }

public function onLoaderComplete(e:Event) {

        image = new Bitmap(e.target.content.bitmapData);

        var imageWidth:Number = image.width;
        var imageHeight:Number = image.height;
        var resizeWidthVar:Number;
        var resizeHeightVar:Number;

        trace("Image width: " + image.width);
        trace("Image height: " + image.height);

        if(imageWidth >= imageHeight) {
            resizeHeightVar = imageHeight/displayRes;
            trace("resizeHeightVar = " + resizeHeightVar);

            imageWidth = imageWidth/resizeHeightVar;
            imageHeight = imageHeight/resizeHeightVar;
        }
        else {
            resizeWidthVar = imageWidth/displayRes;
            trace("resizeWidthVar = " + resizeWidthVar);

            imageWidth = imageWidth/resizeWidthVar;
            imageHeight = imageHeight/resizeWidthVar;
         }

        image.width = imageWidth;
        image.height = imageHeight;

        trace("Image width: " + image.width);
        trace("Image height: " + image.height);

        image.x = xScreenPos;
        image.y = yScreenPos;

        addChild(image); // the image is now loaded, so let's add it to the display tree!
    }

public function overlayBox():void {

        var overlaySquare:Sprite = new Sprite();

        addChild(overlaySquare);

        overlaySquare.graphics.beginFill(0x00000, 0.7);
        overlaySquare.graphics.drawRect(0, 0, displayRes, displayRes);
        overlaySquare.graphics.endFill();
        overlaySquare.x = xScreenPos;
        overlaySquare.y = yScreenPos;
    }

public function textAnimation():void {

        //set text format
        textFormat.font = "Helvetica Neue Light";
        textFormat.size = 12;
        textFormat.bold = false;
        textFormat.color = 0x000000;

        // pass text format
        textOne.defaultTextFormat = textFormat;

        textOne.text = "Blah blah blah blah";
        textOne.autoSize = TextFieldAutoSize.LEFT;
        textOne.x = xScreenPos;
        textOne.y = yScreenPos;

        //add to stage
        addChild(textOne);

    }

Answer 1

One of the solutions is to replace addChild(image); with the addChildAt(image, 0); another one is to add loader addChild(loader); and don’t add image in the complete handler.