How do I use z-index in Flex 3?

[JoeyClams]

How do I set a z-index property in Flex 3? I have a Flex application and I need to overlay a canvas container on top of all the other containers on a button click. I do not want to use the PopUpManager to spawn a Flex popup dialog box, I just want to place a canvas container on top of the other containers, and then close it with a button click.

What's the best way to do this? I can't find any documentation regarding z-index in Flex 3 ANYWHERE....

Thx in advance

[JoeyClams]

I've made a new component called "PopUpBox" that is the Canvas component to be overlayed. In my main application, on the button click I'm adding "PopUpBox" to my main application container. This all works. The PopUpBox is added, but is added after my other content, not above it.

I'm assuming I have to add a script tag to my PopUpBox component that will set the index of the component. This is what I'm trying and it doesn't work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="650" backgroundColor="#eeeeee">
	<mx:Script>
		<![CDATA[
		private function init():void {
			parent.setChildIndex(this.parent, 0);
		}
		]]>
	</mx:Script>
</mx:Canvas>

[JoeyClams]

Correction:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="650" backgroundColor="#eeeeee" creationComplete="init()">
	<mx:Script>
		<![CDATA[
		private function init():void {
			parent.setChildIndex(this.parent, 0);
		}
		]]>
	</mx:Script>
</mx:Canvas>

[JoeyClams]

Ok, apparently setChildIndex() only sets the display index number of the item in the container (item #1 to display, item #2 to display, etc.), but doesn't have anything to do with z-index (i.e., layering items on top of one another)?

So what methods/properties exist to manipulate layering and z-indexes?

[jslice390]

If you are wanting to use a "z" property you should check out the flash player 10 beta. They have added a z property that works like x and y. You can learn more about the flash player 10 beta at

gotoandlearn.com

[drkstr]

Ok, apparently setChildIndex() only sets the display index number of the item in the container (item #1 to display, item #2 to display, etc.), but doesn't have anything to do with z-index (i.e., layering items on top of one another)?

This is exactly what it does!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" >
<mx:Script>
<![CDATA[

private function changeZIndex( direction:int ): void {
	var newIndex:int = idParentCanvas.getChildIndex(idChildCanvas) + direction;
	
	if( newIndex >= 0 && newIndex < idParentCanvas.numChildren ) {
		idParentCanvas.setChildIndex(idChildCanvas, newIndex );
	}
}

]]>
</mx:Script>

<mx:Canvas id="idParentCanvas" width="800" height="600">
	<mx:Canvas id="idChildCanvas"  width="200" height="200" borderStyle="solid" backgroundColor="#27448E" x="241" y="80"/>
	<mx:Canvas  width="100" height="300" backgroundColor="#993838" x="422" y="64"/>
	<mx:Canvas  width="400" height="250" x="276" y="172" borderColor="#89984C" backgroundColor="#8CC53A"/>
	<mx:Canvas width="350" height="125"  x="276" y="39" backgroundColor="#39ACB0" />
	<mx:Canvas  width="200" height="300" x="187" y="39" backgroundColor="#4CA843"/>
</mx:Canvas>

<mx:Button label="Move Up"  x="10" y="10" click="changeZIndex(1);"/>
<mx:Button label="Move Down"  x="92" y="10" click="changeZIndex(-1);" />
	
</mx:Application>

Best Regards,
~Aaron

[JoeyClams]

Ahh cool, it does work like that. Ok there must be an error in my layout container hierarchy then, I'll check it out.

Thanks for the help!