flash特效原理：链式模型的使用（4）

package 
{

	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;

	public class Card extends Sprite
	{

		private var label:String;
		private var color:uint;
		private var _width:int;
		private var _height:int;
		public var posX:Number;
		public var posY:Number;
		public var posZ:Number;
		public var newPosX:Number;
		public var newPosY:Number;
		public var newPosZ:Number;
		public function Card(label:String,color:uint,width:int,height:int)
		{
			this.label = label;
			this.color = color;
			this._width = width;
			this._height = height;
			createChildren();
		}

		private function createChildren():void
		{
			var shape:Sprite=new Sprite();
			shape.graphics.beginFill(color);
			shape.graphics.drawRect(0,_width,_height);
			shape.graphics.endFill();
			addChild(shape);
            var labelTxt:TextField=new TextField();
			labelTxt.defaultTextFormat=new TextFormat(null,25,null,true);
			labelTxt.text=label;
			shape.addChild(labelTxt);
		}

		public function move(x:Number,y:Number,z:Number):void
		{
			this.x = x;
			this.y = y;
			this.z=z;
			this.posX = x;
			this.posY = y;
			this.posZ=z;
			this.newPosX=x;
			this.newPosY=y;
			this.newPosZ=z;
		}
		
	}
}

package 
{
	import flash.display.Sprite;
	import com.greensock.TweenLite;
	import flash.events.MouseEvent;
	import flash.geom.*;
	import flash.display.DisplayObject;


	public class Main extends Sprite
	{

		private var listLink:LinkList=new LinkList();
		public function Main()
		{
			init();
		}

		private var colors:Array = [0xFF0000,0xFF8000,0xFFFF00,0x80FF00];
		private function init():void
		{
			var perAngle:Number=Math.PI/2;
			var p:PerspectiveProjection=new PerspectiveProjection();
			p.fieldOfView=65;
			root.transform.perspectiveProjection=p;
			this.rotationX=5;
			for (var i:int=0; i<4; i++)
			{
				var card:Card = new Card(i.toString(),colors[i],100,200);//创建卡片
				addChild(card);
				 
				var px:Number=stage.stageWidth/2+Math.cos(i*perAngle)*300;
				var pz:Number=stage.stageHeight/2+Math.sin(i*perAngle)*400;
				card.move(px,pz);
				//trace("测试数值"+(i*105+80));
				listLink.insert(card);
			}

			stage.addEventListener(MouseEvent.CLICK,onClick);
		}

		private function onClick(event:MouseEvent):void
		{
			for (var i:int=0; i<4; i++)
			{
				var linkNode:LinkNode = listLink.source[i];
				var sprite:Sprite = linkNode.data as Sprite;
				var nextPosX:Number = linkNode.next.data.posX;
				var nextPosZ:Number = linkNode.next.data.posZ;
				listLink.source[i].data.newPosX=nextPosX;
				listLink.source[i].data.newPosZ=nextPosZ;
				
				TweenLite.to(sprite,0.5,{x:nextPosX,z:nextPosZ,y:100});
			}
            
			//重置新位置
			for (var j:int=0; j<4; j++)
			{
				listLink.source[j].data.posX = listLink.source[j].data.newPosX;
				listLink.source[j].data.posZ = listLink.source[j].data.newPosZ;
			}
			
			//排序
			listLink.dataArray.sort(sortOnZ);
			for(var k:int=0;k<4;k++)
			{
				var obj:*=listLink.dataArray[k];
				this.setChildIndex(obj,k);
			}
		  
			
		}
		
		private function sortOnZ(a:DisplayObject,b:DisplayObject):int 
		{
			var posA_z:Vector3D=a.transform.matrix3D.position;
			posA_z=this.transform.matrix3D.deltaTransformVector(posA_z);
			var posB_z:Vector3D=b.transform.matrix3D.position;
			posB_z=this.transform.matrix3D.deltaTransformVector(posB_z);
			 
			return posB_z.z-posA_z.z;
		}
		

	}

}

? ? ? ?在这个实验当中，会尝试结合简单的3D手法来设计，最初一开始的设计思路是通过将其布局在不同的空间点位置上，然后用这个链式模型记录他们空间点位置坐标（每一个节点都会记录下一点位置）。接下来的事情，每一张卡片就会根据他们的下一个节点位置进行移动，移动后它们的空间坐标位置变成新的空间点，你会发现这个过程，卡片会 进行缩放。看起来有点空间感，这是因为四张卡片深度（z）不一样导致的结果。注意，当你在同一个容器当中，由于深度的不同，他们的层级显示的先后就有点先后的问题。因此，在移动下一个节点的位置后，需要进行一些处理。

? ? ? ? ?注意：由于在容器当中他们的深度不一致，当每次切换的时候，需要进行重新排序，然后再进行交互层级。

     this.setChildIndex(obj,k);