[AS3编程教学]图片Gallery制作高级教程

同样为了显示原创性和本人没有偷懒，这次我们用10张猫猫的图片来做这个效果，并在舞台上新建一个10帧的影片剪辑，分别是准备的10张图片。

我们实现移动的原理依旧是在容器中创建5个元件，三个可见，两个在首尾不可见位置，每次左移最前面的那个跑到最后去，并显示成下一张的内容；每次右移最后面那张跑到最前面去，并显示前一张的内容，这样就实现了循环滚动展示，而容器的位置每次都要被重置到初始位置。

要过年了嘛，我们把左右按钮做成红色的，然后我们给左右按钮一个连接类名BtnLeft和BtnRight,如果弹出警告直接点击确定，系统会在运行时自动创建一个空类给它，当然这是内部机制，你完全不用管。

按钮有了类，下面我们要写图片集类，图片集有一些属性，比如自己的页码，以及属于自己的鼠标事件，单击后告诉主类自己被单击，然后主类收到后要控制文本框来显示这条单击信息。图片集类写出来如下图： package  {  import flash.display.MovieClip;  import flash.events.DataEvent;  import flash.events.MouseEvent;  /**  * 图片集类  * @author Tiger  * 2012/1/15 23:21  */  public class PicItem extends MovieClip  {  private var page:int;  public function PicItem()  {  page = 0  this.addEventListener(MouseEvent.CLICK, clickPic);  }  private function clickPic(e:MouseEvent):void   {  var midEvt:DataEvent = new DataEvent('ClickPicItem');  midEvt.data = '当前单击第' + page + '页!';  dispatchEvent(midEvt);  }  /**  * 外部设置页面显示  * @param index  */  public function setPage(index:int):void  {  page = index;  gotoAndStop(index);  }  } } //我们用了一个DataEvent来发送单击事件，通过一个setPage的公共方法设置页面信息。图片类写好后库中图片影片剪辑右键链接绑定类，自不赘述。

接下来写文档类，按照结构和思路，这个Gallery的创建过程是这样的：创建容器，创建图片，创建遮罩，创建文本框，创建按钮，施加控制！所以文档类执行时严格按照这个顺序完成。 -------------------------------------------------------------- 变量定义的部分如下： private var mcCup:Sprite; //容器  private var mcMask:Sprite; //遮罩  private var txtInfo:TextField; //信息文本显示  private var leftBtn:BtnLeft; //右按钮  private var rightBtn:BtnRight; //右按钮  private var picNum:int = 10; //图片数量  private var picList:Array = []; //图片存储数组  private var picWidth:int = 160; //图片宽度  private var picHeight:int = 50; //图片高度  private var isMoving:Boolean = false;//是否在运动中  private var leftIndex:int = 1; //左侧图片页码 -------------------------------------------------------------- 构造函数结构如下： public function Main():void  {  stage.showDefaultContextMenu = false;  createPic();  createMask();  createInfoText();  createTwoBtn();  } -------------------------------------------------------------- //建立图片  private function createPic():void   {  mcCup = new Sprite();  mcCup.x = cupInitX;  mcCup.y = 142;  this.addChild(mcCup);  for (var i:int = 0; i < 5; i++)   {  var midPic:PicItem = new PicItem();  midPic.x = -picWidth + i*picWidth;  midPic.y = 0;  midPic.setPage(i + 1);  midPic.addEventListener('ClickPicItem', getClickPic);  mcCup.addChild(midPic);  picList.push(midPic);  }  } 本函数创建了5个图片集，添加到容器mcCup中，5张图片的排列顺序从一张图片负宽度开始延续。 原理课参考“进阶教程”。 --------------------------------- //显示单击信息  private function getClickPic(e:DataEvent):void   {  txtInfo.text = e.data;  var tf:TextFormat = new TextFormat();  tf.size = 25;  tf.font = '微软雅黑';  txtInfo.setTextFormat(tf);  txtInfo.x = (stage.stageWidth - txtInfo.width) / 2;  } 监听图片单击时间后的相应处理，这里是对于DataEvent事件的使用。 -------------------------------- //建立遮罩  private function createMask():void   {  mcMask = new Sprite();  mcMask.x = mcCup.x - 4;  mcMask.y = mcCup.y - 2;  mcMask.graphics.lineStyle();  mcMask.graphics.beginFill(0xFFFFFF,1);  mcMask.graphics.drawRect(0, 0, picWidth * 3 + 4, picHeight +  4);  mcMask.graphics.endFill();  this.addChild(mcMask);  mcCup.mask = mcMask;  } 此处是动态遮罩的创建使用方法，大家可以留意。 --------------------------------- //建立信息文本框  private function createInfoText():void   {  var title:TextField = new TextField();  title.text = '图片Gallery高级教程！';  title.x = 128;  title.y = 12;  title.autoSize = TextFieldAutoSize.LEFT;  this.addChild(title);  txtInfo = new TextField();  txtInfo.textColor = 0xFF0000;  txtInfo.autoSize = TextFieldAutoSize.CENTER;  txtInfo.x = 100;  txtInfo.y = 85;  txtInfo.text = '请单击图片！';  this.addChild(txtInfo);  var tf:TextFormat = new TextFormat();  tf.size = 25;  tf.font = '微软雅黑';  txtInfo.setTextFormat(tf);  tf.size = 30;  title.setTextFormat(tf);  } 两个文本框，一个静态文本框显示标题，另一个动态文本框显示单击内容！ -------------------------------------------- //左右按钮创建和控制事件  private function createTwoBtn():void   {  leftBtn = new BtnLeft();  leftBtn.x = 3;  leftBtn.y = 152;  this.addChild(leftBtn);  rightBtn = new BtnRight();  rightBtn.x = 521  rightBtn.y = 152;  this.addChild(rightBtn);  rightBtn.addEventListener(MouseEvent.CLICK,leftMove);  leftBtn.addEventListener(MouseEvent.CLICK,rightMove);  }  function leftMove(e:MouseEvent):void  {  if(isMoving)return;  isMoving = true;  TweenLite.to(mcCup,.3,{x:mcCup.x -  picWidth,onComplete:leftMoveUpdate});  }  //左移刷新函数  function leftMoveUpdate():void  {  leftIndex++;  leftIndex = leftIndex%picNum;  picList.push(picList.shift());  mcCup.x = cupInitX;  for(var i:int = 0; i< 5;i++)  {  var id:int = (leftIndex + i)%picNum;  picList[i].setPage(id==0?picNum:id);  picList[i].x = -picWidth + i * picWidth;  }  isMoving = false;  }  function rightMove(e:MouseEvent):void  {  if(isMoving)return;  isMoving = true;  TweenLite.to(mcCup,.3,{x:mcCup.x +  picWidth,onComplete:rightMoveUpdate});  }  //右移刷新函数  function rightMoveUpdate():void  {  leftIndex--;  leftIndex = (picNum + leftIndex) % picNum;  if(leftIndex == 0)leftIndex=picNum;  picList.unshift(picList.pop());  mcCup.x = cupInitX;  for(var i:int = 0; i< 5;i++)  {  var id:int = (leftIndex + i)%picNum;  picList[i].setPage(id==0?picNum:id);  picList[i].x = -picWidth + i*picWidth;  }  isMoving = false;  } 左右按钮的动态创建和控制函数，该部分内容与“进阶教程”是一样的，直接沿用即可。 由于代码太多，完整的类不贴出来了，截图也如下图不完整，具体每个函数功能的实现过程，就是整个作品被制作出来的过程。

文档类完成后，在我们文档的属性面板把文档类绑定到舞台，如图所示：

最后发布测试，然后这个过程可能需要几次的测试调整，主要是对舞台坐标的调整和代码bug的调整，不是视频教程这个过程大家是看不到的，你只能看到最终效果，我们想要的效果其实已经出来了。舞台上什么都没有，时间轴上一句代码都没有，一切都被创建了，这是你要追求的效果和目标么？