[AS3编程教学]图片Gallery制作进阶教程

为了显示本人没有偷懒，为了显示本次图片的数量不限制，我们这次图片用10张小鸭子的图片，并在舞台上新建一个10帧的影片剪辑，分别插入准备的10张图片。

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

在进阶教程中不打算一步步讲解基础的原件准备过程，如下图所示：我们需要两个按钮btnLeft和btnRight用于切换，一个遮罩(红色半透明长方形)用于显示图片，一个空的影片剪辑mcCup作为图片容器（位于遮罩下方的蓝色部分)，一个现实图片信息的文本框txtPicInfo.如果制作有困难的同学可以查看本教程第一步：初级教程版本。

为了能动态创建图片到容器中，我们需要给库里的图片集一个连接类名mcPic,设置的时候弹出任何警告面板都点确定：

我们接下来写图片的创建函数createPic，我们所要做的就是将5张图片动态创建加载进容器mcCup中： //创建图片 function createPic():void { for(var i:int = 0;i<5;i++) { var midPic:mcPic = new mcPic(); midPic.x = -picWidth + i*picWidth; midPic.y = 0; midPic.gotoAndStop(i + 1); mcCup.addChild(midPic); picList.push(midPic); } }

此时我们测试影片，便可以看到图片被创建到了舞台。 如果把遮罩层取消遮罩，你便能看到以下场景。显示了中间的三张，其余的两张不可见，只是作为缓冲辅助用的，很多循环操作都是这个原理：

接下来我们需要一个变量并初始化为1，这个变量记录当前显示最左边的图片id,每次左移时，id变大，每次右移时，id都减小，根据这个id，我们确定屏幕之外的两张图片到底显示哪一页。以及图片的总数10，容器的初始位置。在代码中使用变量比较好的地方就在于改变，一旦有个值发生变化，你不需要逐行修改。 var leftIndex:int = 1; var totalNum:int = 10; var cupInitX:int = 38;

接下去我们写一个图片左移结束时的刷新函数，功能是将首尾图片重新排列位置，并且将页码按对应的方式显示： //左移刷新函数 function leftMoveUpdate():void { leftIndex++; leftIndex = leftIndex%totalNum; picList.push(picList.shift()); mcCup.x = cupInitX; for(var i:int = 0; i< 5;i++) { var id:int = (leftIndex - 1 + i)%totalNum; picList[i].gotoAndStop(id==0?totalNum:id); picList[i].x = -picWidth + i*picWidth; } } 代码并需要逐行解释，大家好好在本子上画个草图理解这个原理就好。

接着写一个addMouseEvent（）函数实现右侧按钮的单击功能。 //切换按钮事件 function addMouseEvent():void { btnRight.addEventListener(MouseEvent.CLICK,leftMove); } function leftMove(e:MouseEvent):void { TweenLite.to(mcCup,.3,{x:mcCup.x - picWidth,onComplete:leftMoveUpdate}); }

发布测试发现，鼠标右击功能OK，可以无限地翻页下去，哈哈，够神奇的。

接着写向右翻页刷新函数，并且完善addMouseEvent()函数，给鼠标左键也加入翻页功能，代码如下： //右移刷新函数 function rightMoveUpdate():void { leftIndex--; leftIndex = (totalNum + leftIndex)%totalNum; if(leftIndex == 0)leftIndex=totalNum; picList.unshift(picList.pop()); mcCup.x = cupInitX; for(var i:int = 0; i< 5;i++) { var id:int = (leftIndex - 1 + i)%totalNum; picList[i].gotoAndStop(id==0?totalNum:id); //trace(leftIndex picList[i].x = -picWidth + i*picWidth; } } //切换按钮事件 function addMouseEvent():void { btnRight.addEventListener(MouseEvent.CLICK,leftMove); btnLeft.addEventListener(MouseEvent.CLICK,rightMove); } function leftMove(e:MouseEvent):void { TweenLite.to(mcCup,.3,{x:mcCup.x - picWidth,onComplete:leftMoveUpdate}); } function rightMove(e:MouseEvent):void { TweenLite.to(mcCup,.3,{x:mcCup.x + picWidth,onComplete:rightMoveUpdate}); }

发布测试，左右切换都正常，可以无限制地循环切换下去的:)。

但是此时有个bug,单击过快会出现图片空白现象，因此我们要加一个正在移动中的布尔变量，如果移动开始就无法下一次移动，移动结束后才可以点击下一次移动，单击函数修改如下：。 //切换按钮事件 function addMouseEvent():void { btnRight.addEventListener(MouseEvent.CLICK,leftMove); btnLeft.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 rightMove(e:MouseEvent):void { if(isMoving)return; isMoving = true; TweenLite.to(mcCup,.3,{x:mcCup.x + picWidth,onComplete:rightMoveUpdate}); }

最后我们加入图片单击事件，此次我们不需要判断鼠标位置了，直接把单击事件写在图片元件上面，判断它的当前帧就可以实现，这个事件可以直接定义在图片被创建的地方。因此我们修改createPic()函数如下： //创建图片 function createPic():void { for(var i:int = 0;i<5;i++) { var midPic:mcPic = new mcPic(); midPic.x = -picWidth + i*picWidth; midPic.y = 0; midPic.gotoAndStop(i==0?10:i); midPic.buttonMode = true; midPic.addEventListener(MouseEvent.CLICK,clickPic); mcCup.addChild(midPic); picList.push(midPic); } } //图片单击事件 function clickPic(e:MouseEvent):void { var picClicked:MovieClip = e.target as MovieClip; txtPicInfo.text = '当前单击第' + (picClicked.currentFrame) + '张图片!'; }

最后发布测试，就是我们想要的效果。

此次TweenLite函数的使用中，我们使用了一个onComplete属性，意思是移动完毕时执行的方法，每次移动结束后我们刷新图片.

好好理解左右图片刷新函数的算法原理，涉及到求余计算，简单的顺序排列。