How to fix overlapping objects on the stage in AS3

Question

I have a flash game where I have a picture designed to be the textbox for a prompt and textbox inside with the relevant text but the textbox is being hidden by the image. A

Answer 1

The order of adding display objects to display object containers effect their z-order, in other words the front to back order. The last added display object becomes the frontmost. So the child index of the children of a display object container is important for drawing of overlapped children.

If you put picture and text on the same DisplayObjectContainer such as a MovieClip:

Lets say your DisplayObjectContainer is mc.

And your textbox is txt

Please try this:

mc.setChildIndex(txt, mc.numChildren-1);

Answer 2

The other answer using setChildIndex will definitely work, however, I think a different design approach is really what you should be doing to remove the headache altogether.

For example in a game I might have different layers such as :

backgroundLayer
gameLayer
interfaceLayer

Those 3 Sprite layers would get added to the stage in that order. I would then add display objects to the appropriate layers. So anything I added to the backgroundLayer or gameLayer would ALWAYS be 'behind' my user interface on the interfaceLayer.

That allows you to not have to worry about the layering constantly. The answer with setChildIndex will fix the problem for that moment, but should something else be added to the container it will overlap your textbox, which is something I don't assume you want.

here's an example :

var backgroundLayer:Sprite = new Sprite;
var gameLayer:Sprite = new Sprite;
var interfaceLayer:Sprite = new Sprite;

addChild(backgroundLayer);
addChild(gameLayer);
addChild(interfaceLayer);

now, whatever you add to interfaceLayer, will ALWAYS be on top of objects you add to gameLayer or backgroundLayer.

So in the case of your text box, just add it to your interfaceLayer and any other objects you want behind it, you add to the gameLayer or backgroundLayer.