Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 06-26-2008, 02:36 PM   #1
JoeyClams
Registered User
 
Join Date: Nov 2002
Posts: 35
Question How do I use z-index in Flex 3?

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 is offline   Reply With Quote
Old 06-26-2008, 03:17 PM   #2
JoeyClams
Registered User
 
Join Date: Nov 2002
Posts: 35
Default

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:

Code:
<?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 is offline   Reply With Quote
Old 06-26-2008, 03:21 PM   #3
JoeyClams
Registered User
 
Join Date: Nov 2002
Posts: 35
Default

Correction:

Code:
<?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 is offline   Reply With Quote
Old 06-26-2008, 03:55 PM   #4
JoeyClams
Registered User
 
Join Date: Nov 2002
Posts: 35
Default

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?
JoeyClams is offline   Reply With Quote
Old 06-26-2008, 04:49 PM   #5
jslice390
Member
 
Join Date: Feb 2007
Posts: 53
Default

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
HTML Code:
gotoandlearn.com
__________________
Jamin Hall
jslice390 is offline   Reply With Quote
Old 06-26-2008, 05:16 PM   #6
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

Quote:
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!

Code:
<?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
drkstr is offline   Reply With Quote
Old 06-26-2008, 06:36 PM   #7
JoeyClams
Registered User
 
Join Date: Nov 2002
Posts: 35
Default

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!
JoeyClams is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Excel and Flex interaction rico Flex 2, 3 & 4 1 08-01-2008 03:31 PM
Flex Project Data services RR_QQ Flex 2, 3 & 4 0 01-28-2008 10:33 PM
Is flex for me??? roshankolar Flex 2, 3 & 4 4 09-27-2007 06:34 PM
How do search engines index flex sites? mw44118 Flex 2, 3 & 4 5 07-23-2007 08:20 PM
Question about Flex 2 vistasoul Flex 2, 3 & 4 1 02-28-2006 04:07 AM


All times are GMT. The time now is 09:27 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.