AS3的深度管理及排序

AS3的深度管理及排序
感谢：Moondy’s Zone
[url]http://www.moondyzone.com[/url]
AS3中，我们通过下面的方法来操作和管理物体的显示深度排序。

numChildren : int
//返回此对象的子项数目。
getChildAt(index:int):DisplayObject
//返回位于指定索引处的子显示对象实例。
getChildIndex(child:DisplayObject):int
//返回 DisplayObject 的 child 实例的索引位置。
setChildIndex(child:DisplayObject, index:int):void
//更改现有子项在显示对象容器中的位置。
swapChildren(child1:DisplayObject, child2:DisplayObject):void
//交换两个指定子对象的 Z 轴顺序（从前到后顺序）。
swapChildrenAt(index1:int, index2:int):void
//在子级列表中两个指定的索引位置，交换子对象的 Z 轴顺序（前后顺序）。
removeChildAt(index:int):DisplayObject
//从 DisplayObjectContainer 的子列表中指定的 index 位置删除子 DisplayObject。

下面是这样一个例子：有四个圆，可以点击与拖动，实现每点击其中一个圆，就把它调到最上面来。
[flash=400,400]http://www.moondyzone.com/wp-content/uploads/2009/01/depth.swf[/flash]

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400" xmlns:myCanvas3D="myCanvas3D.*" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			private var color_a:Array=[0xFF0000,0xFFFF00,0x0000FF,0x00FF00];
			private var pos:Array=[[200,150],[150,200],[250,200],[200,250]];
			private var block_mc:Sprite;
			private var block_box:Sprite;

			private function init():void{
				block_box=new Sprite();
				mycanvas.canvas.addChild(block_box);

				for (var i=0; i<color_a.length; i++) {
					block_mc=new Sprite;
					block_mc.graphics.lineStyle();
					block_mc.graphics.beginFill(color_a[i]);
					block_mc.graphics.drawCircle(0,0,50);
					block_mc.graphics.endFill();
					block_mc.x=pos[i][0];
					block_mc.y=pos[i][1];
					block_mc.buttonMode=true;
					block_mc.addEventListener(MouseEvent.CLICK,change_depth);
					block_mc.addEventListener(MouseEvent.MOUSE_DOWN,drag_item);
					block_mc.addEventListener(MouseEvent.MOUSE_UP,nodrag_item);
					block_box.addChild(block_mc);
				}
			}
			private function change_depth(e:MouseEvent){
				var obj=e.target;
				block_box.setChildIndex(obj,block_box.numChildren-1);
			}
			private function drag_item(e:MouseEvent){
				e.target.startDrag();
			}
			private function nodrag_item(e:MouseEvent){
				stopDrag();
			}
		]]>
	</mx:Script>
	<myCanvas3D:Canvas3D id="mycanvas" width="400" height="400" backgroundColor="0xCCCCCC">

	</myCanvas3D:Canvas3D>
</mx:Application>

这个其实很简单，要调整到最上层的话，只要用setChildIndex把鼠标点击对象的深度值设为（容器.numChildren-1）就可以啦。setChildIndex常用有以下几种：

置顶：
容器.setChildIndex(对象A,容器.numChildren-1);
置底：
容器.setChildIndex(对象A,0);
插入对象B的前面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B));
插入对象B的后面：
容器.setChildIndex(对象A,容器.getChildIndex(对象B)-1);

我们把上例中的圆换成立方块，结果如下：
[flash=400,400]http://www.moondyzone.com/wp-content/uploads/2009/01/depth2.swf[/flash]