Is there a CSS Z-Index Equivalent to AS3?

3 posts

Flag Post

I’m not very well versed in AS3, and am wondering if there is something similar to CSS’s Z-Index stack to order which objects get stacked on-top of each-other. I would like to figure out how to order objects (images) into “layers”.

I’m working on my games menu system and I want to display my “studios” logo first, and then launch the menu will display. However, I’m running into a “z-index” bug that I can’t circumvent.

Here’s the code: ( I have to initialize Game Logo after the menu so it sits ontop, but I want it the other way. But doing so, just draws up the menu….)

public function initalizeGame():void
// Init Logo
// Init Preloader
// Add other Init’s
public function initalize():void
public function initTitleScreen():void
// Don’t worry about this. This just contains a bunch of variables you don’t need to see.

I also edited the games-logo’s background to fade out via the timeline, so that it goes away, but it leaves the “background intact” making the area below unclickable. I could also be lazy and just put this.y = -2000; in the last frame on the actions, but thats not efficient enough. So how can I order layers in AS3?

Flag Post

Children define depth. If DisplayObjects A and B are added to parent P, like so:


A will be at a lower depth (behind) B.

You should consider the use of containers to manage depth sorting. For example, you will have a hud and game container. All displayobjects that are for the hud are added to the hud and all game related displayobjects are added to game. Then you add game and hud to the same parent, but hud after game so the hud will always exist above the game display objects.

Flag Post

Thanks, Unknown! I totally spaced out on creating HUD layers, and what not. I’ll play around with the p.addChild() stuff as well! Thanks! :3