flash 与交互：左右交互

??????????? 有时候在写交互操作的时候，总会看到这种比较常见的左右交互操作。通过鼠标点击左边，向左切换一张图片，通过点击右边，切换向右切换一张图片。在实际应用当中，这种交互是经常可以使用到的，掌握这种技巧的比较有趣味。

?

?????????? 下面就写一个简单的实验。看看效果是怎样？ 按着一个人需求，场景上有四个按钮，分别控制左右交互，其中两个控制一张图片切换，另外一张控制5张图片切换。

????????????注意：上面的按钮，只是控制一张图片移动，下面的图片是控制五张的图片。

???????????在制作的时候，使用绘图APi来绘制每一个项，一共是15个图片。

???????????在这个类? class Item extends Sprite ，当中默认 设置60x80 矩形大小。

???????? 为了让看有遮罩的效果，额外写了一个类，名为ItemContainer，用于放置Item的对象，在一开始的时候，根据需求，复制15个对象放置在ItemContainer 当中容器，然后铺上一层遮罩层看上去，我们只看到五个显示对象。

?????

?????

?

?在写左右交互的时候，定义两个简单方法，一个是moveLeft，另外一个是moveRight ，分别控制容器进行x轴的缓冲移动。

moveLeft的写法很简单，每移动一个记录一个currentPage新值，让他计算出容器该移动到什么位置。于是，采用这种方法来记录下一个位置的坐标值。

??? ?currentPage++;
???? var targetX:int=-currentPage*itemWidth;//定制目标位置位置。
?????TweenLite.to(container.insideContainer,0.5,{x:targetX});

同理，右边的方式是一样的，只是需要递减当前位置就可以实现移动。

??? currentPage--;
????var targetX:int=-currentPage*itemWidth;
????TweenLite.to(container.insideContainer,{x:targetX});

?

至于下面的 移动更多的图片，方法是大同小异的，不妨粘贴一下实验。

package 
{
	import flash.events.*;
	import flash.display.*;
     import com.greensock.TweenLite;
	public class Main extends Sprite
	{
		private var container:ItemContainer;

		private var array:Array=[];
		private var itemWidth:int;
		private var currentPage:int;
		private var itemLength:int;//项的总长度

		public function Main()
		{
			init();
		}
		private function init():void
		{
			container=new ItemContainer(300,80);
			addChild(container);
			container.x=120;
			container.y=100;
			addMouseListener();
			creatItem();
		}
		//添加按钮监听事件
		private function addMouseListener():void
		{
			btn_left.addEventListener(MouseEvent.CLICK,onMouseClickHandler);
			btn_right.addEventListener(MouseEvent.CLICK,onMouseClickHandler);
			btn_left2.addEventListener(MouseEvent.CLICK,onMouseClickHandler);
			btn_right2.addEventListener(MouseEvent.CLICK,onMouseClickHandler);
		}
		private function onMouseClickHandler(event:MouseEvent):void
		{
			switch (event.currentTarget)
			{
				case btn_left :
					moveLeft();
					break;
				case btn_right :
					moveRight();
					break;

				case btn_left2 :
					moveLeftMore();
					break;

				case btn_right2 :
					moveRightMore();
					break;

			}
		}
		//创建滚动项
		private function creatItem():void
		{
			for (var i:int=0; i<15; i++)
			{
				var item:Item=new Item((i+1).toString());
				container.add(item);
				item.x=i*item.width;
				array.push(item);
			}
			itemWidth=array[0].width;
			itemLength=array.length;
		}
		//点击向左移动
		private function moveLeft():void
		{
			if (currentPage<itemLength-5)
			{
				currentPage++;
				var targetX:int=-currentPage*itemWidth;
				TweenLite.to(container.insideContainer,{x:targetX})
			}
		}
		//点击向右移动
		private function moveRight():void
		{
			if (currentPage!=0)
			{
				currentPage--;
				var targetX:int=-currentPage*itemWidth;
				TweenLite.to(container.insideContainer,{x:targetX})
			}
		}
		//点击向左移动更多，在这里一般设置为5个
		private function moveLeftMore():void
		{			
			if (itemLength-5-currentPage==0)
			{
				return;
			}
			var targetX:int;
			if ((itemLength-5-currentPage)>=5)
			{				
				currentPage+=5;
				targetX=-currentPage*itemWidth;					
			}
			else
			{
				var len:int=itemLength-5-currentPage;
				currentPage+=len;
				targetX=-currentPage*itemWidth;		
			}
			TweenLite.to(container.insideContainer,{x:targetX});
		}
		//点击向右移动更多，在这里设置一般为5个
		private function moveRightMore():void
		{          
			if (currentPage==0)
			{
				return;
			}            
			var targetX:int;

			if ((itemLength-5-currentPage)<=5)
			{
				currentPage-=5;
				targetX=-currentPage*itemWidth;
			}
			else
			{
				var len:int=currentPage;
				currentPage-=len;
				targetX=-currentPage*itemWidth;
			}
			TweenLite.to(container.insideContainer,{x:targetX});
		}
	}
}

import flash.display.Sprite;
import flash.text.*;

class Item extends Sprite
{
	public function Item(numStr:String)
	{
		this.graphics.lineStyle(0);
		this.graphics.beginFill(0xff0000);
		this.graphics.drawRect(0,60,80);
		this.graphics.endFill();
		var mark:TextField=new TextField();
		mark.autoSize=TextFieldAutoSize.LEFT;
		mark.x=25;
		mark.y=40;
		mark.text=numStr;
		addChild(mark);
	}
}

?

?

package
{
	
	import flash.display.*;
	public class ItemContainer extends Sprite
	{
		private var container:Sprite=new Sprite();
		public function ItemContainer(w:Number,h:Number)
		{	
		    addChild(container);
			var maskShape:Shape=creatMaskShape(w,h);
			addChild(maskShape);
			container.mask=maskShape;
		}
		
		//添加显示对象到容器
		public function add(obj:*):void
		{			
			container.addChild(obj);		
		}
		
		public function get insideContainer():Sprite
		{
			return this.container;
		}
		
		private function creatMaskShape(w:Number,h:Number):Shape
		{
			var shape:Shape=new Shape();
			shape.graphics.beginFill(0xff0000);
			shape.graphics.drawRect(0,w,h);
			shape.graphics.endFill();
			return shape;
		}
    }	
}