您的位置:首页 > 其它

flash特效原理:链式模型的使用(3)

2012-05-03 19:44 344 查看
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 newPosX:Number;
		public var newPosY: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):void
		{
			this.x = x;
			this.y = y;
			this.posX = x;
			this.posY = y;
			this.newPosX=x;
			this.newPosY=y;
		}
		
	}
}



开始实验了,我们会先创建一个图形类,名为Card类,你也可以根据自己喜欢定义自己喜欢的类,而这里是会尽量简单,减少其他没必要干扰。Card定义只是公开了一个move的方法,这个方法目的是移动图形类的位置,并且记录对象所在的位置。

创建完毕后,同样你如果使用flash ide的话,创建一个文档,并绑定文档类Main,在Main 类里面 实现的思路过程,一般首先为创建一组图形,然后利用我们之前定义好的链式模式结构存储起来,接下来就是书写进行交互事件。

基础思路 : 创建图形----》记录在结构里面---》进行交互体现。



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

	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
		{
			for (var i:int=0; i<4; i++)
			{
				var card:Card = new Card(i.toString(),colors[i],100,200);//创建卡片
				addChild(card);
				card.move(i*105+80,100);
				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;
				listLink.source[i].data.newPosX=nextPosX;
				TweenLite.to(sprite,0.5,{x:nextPosX});
			}
            
			//重置新位置
			for (var j:int=0; j<4; j++)
			{
				listLink.source[j].data.posX = listLink.source[j].data.newPosX;
			}
		}

	}

}


我们书写一个卡片类来实现这种滚动切换的效果。设计这个类目的是辅助实验这种效果,第一个实验效果是在平面上移动到每一张图片,这些图片是跟随着它指向的节点进行移动缓冲移动。当你完成这个实验后,可以尝试做一些改变以其改变每一张图片的位置和缩放大小。有了这个基础后,我们可以进一步扩展为圆形分布的效果。后续会有很多介绍,利用这些基础类实现我们想要的效果。



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: