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,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,100,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);

这个实验只是需要懂得使用这种思想就可以解决特效当中很多的问题。 后面的应用就需要尝试用这个简单的代码***一些有趣的特效。