[AS3编程教学]Flash相册进阶教程

因为是进阶相册制作，所以将美女图片换了一批清晰的，其次给图片画了一个外框，并且将标题字体加粗，间距调宽，如下图所示：

上一版本的代码完全不变，我们按下Ctrl+Enter测试，便能看到之前的相册效果，当然美观程序上更高一些：

现在存在的问题就是，图片是突然切换的，没有一个效果，什么效果呢？淡入淡出的效果，我希望第一张图片淡出到一半之后，第二张图片淡入，这种感觉很柔和，很舒服，那么实现这个就需要做淡入淡出的补间动画，将5张图片全部转换成影片剪辑，然后按下图时间轴做淡入淡出动画，每个图片一个图层。

如果有同学不懂这种动画的制作过程，可以网上搜索相关教程，毕竟我们是编程教学，所以动画工作不做详解。淡入淡出效果做好后 我们需要对它进行程序控制，首先我们要记下每张图片完全显示的位置，保存在数组里，这些位置分别是第1,11,20,29，,38,44帧，用 一个数组保存。 var keyFrameList:Array = [1,11,20,29,38,44];

接下来写控制代码，因为图片现在不是连续放置的，所以prevFrame（）和nextFrame（）这种写法已经无法使用了，我们需要自己另 外写，思路就是按下下一页让它自动播放，并且开始判断时间轴是不是到了下一个相册关键帧的位置，到了就停止。我们先写下一页代 码如下： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; var keyFrameList:Array = [1,11,20,29,38,44]; //当前图片编号和下一个关键帧 var curentPicIndex:int = 0; var nextKeyFrame:int = keyFrameList[0]; setPicInfo(); btnPrev.addEventListener(MouseEvent.CLICK,prevPhoto); btnNext.addEventListener(MouseEvent.CLICK,nextPhoto); function prevPhoto(e:MouseEvent):void {  mcPhotos.prevFrame();  setPicInfo(); } //下一页 function nextPhoto(e:MouseEvent):void {  mcPhotos.play();  curentPicIndex++;  nextKeyFrame = keyFrameList[curentPicIndex];  this.addEventListener(Event.ENTER_FRAME,startTestFrame); } //检测是否到了下一页 function startTestFrame(e:Event):void {  if (mcPhotos.currentFrame == nextKeyFrame)  {  mcPhotos.stop();  setPicInfo();  this.removeEventListener(Event.ENTER_FRAME,startTestFrame);  } } //设置图片信息 function setPicInfo():void {  var index:int = keyFrameList.indexOf(mcPhotos.currentFrame);  txtPage.text = '第' + (index + 1) +'页';  txtInfo.text = infoList[index]; } 大概解释一下，每次单击下一页我们需要得到下一个图片关键帧位置，这个可以从已经保存的数组里查找，然后我们让相册在时间轴上 播放，同时用startTestFrame（）以每秒30次的频率检测相册是否播放到了下张图，如果到了就让相册停止，并且刷新下方的图片和页 码信息。 并且图片信息设置函数也发生了变化，每次根据相册关键帧来查找它的位置算出第几页以及读取信息，大家可以仔细理解。

接下去要写前一阵代码了，这个就稍微麻烦点，原理就是写一个倒退播放函数，并且检测是否到了前一页。倒退函数其实就是 EnterFrame事件里反复执行prevFrame（）函数，代码修改后如下： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; var keyFrameList:Array = [1,11,20,29,38,44]; //当前图片编号和下一个关键帧 var curentPicIndex:int = 0; var nextKeyFrame:int = keyFrameList[0]; setPicInfo(); btnPrev.addEventListener(MouseEvent.CLICK,prevPhoto); btnNext.addEventListener(MouseEvent.CLICK,nextPhoto); //前一页 function prevPhoto(e:MouseEvent):void {  curentPicIndex--;  nextKeyFrame = keyFrameList[curentPicIndex];  this.addEventListener(Event.ENTER_FRAME,prevPhotoPlay); } function prevPhotoPlay(e:Event):void {  mcPhotos.prevFrame();  startTestFrame(e); } //下一页 function nextPhoto(e:MouseEvent):void {  mcPhotos.play();  curentPicIndex++;  nextKeyFrame = keyFrameList[curentPicIndex];  this.addEventListener(Event.ENTER_FRAME,startTestFrame); } //检测是否到了下一页 function startTestFrame(e:Event):void {  if (mcPhotos.currentFrame == nextKeyFrame)  {  mcPhotos.stop();  setPicInfo();  this.removeEventListener(Event.ENTER_FRAME,startTestFrame);  this.removeEventListener(Event.ENTER_FRAME,prevPhotoPlay);  } } //设置图片信息 function setPicInfo():void {  var index:int = keyFrameList.indexOf(mcPhotos.currentFrame);  txtPage.text = '第' + (index + 1) +'页';  txtInfo.text = infoList[index]; } 我们发布影片测试，单击“下一页”，'上一页“按钮，就可以发现相册效果基本实现了。 我截到了一张切换的图片，这个很难得啊。

可是新的问题又出现了，每当我们在第一页继续点前一页或者最后一页点下一页后，再点另一个按钮会失效，多点几次才可以切换。 这个原因是为什么呢？原因是因为我们总共有5页，对应数组编号0到4，第一页再往前点就变负数了，最后一页往后点就大于4了，所以 操作另一个按钮时超出数组范围，因此无效。我们加入范围限制如下： 上一页：if(curentPicIndex <= 0)return; 下一页：if(curentPicIndex >= 4)return; 当页面到了边界后，就返回，不执行以下代码。现在测试，发现效果OK了。 完整代码如下： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; var keyFrameList:Array = [1,11,20,29,38,44]; //当前图片编号和下一个关键帧 var curentPicIndex:int = 0; var nextKeyFrame:int = keyFrameList[0]; setPicInfo(); btnPrev.addEventListener(MouseEvent.CLICK,prevPhoto); btnNext.addEventListener(MouseEvent.CLICK,nextPhoto); //前一页 function prevPhoto(e:MouseEvent):void {  if(curentPicIndex <= 0)return;  curentPicIndex--;  nextKeyFrame = keyFrameList[curentPicIndex];  this.addEventListener(Event.ENTER_FRAME,prevPhotoPlay); } function prevPhotoPlay(e:Event):void {  mcPhotos.prevFrame();  startTestFrame(e); } //下一页 function nextPhoto(e:MouseEvent):void {  if(curentPicIndex >= 4)return;  mcPhotos.play();  curentPicIndex++;  nextKeyFrame = keyFrameList[curentPicIndex];  this.addEventListener(Event.ENTER_FRAME,startTestFrame); } //检测是否到了下一页 function startTestFrame(e:Event):void {  if (mcPhotos.currentFrame == nextKeyFrame)  {  mcPhotos.stop();  setPicInfo();  this.removeEventListener(Event.ENTER_FRAME,startTestFrame);  this.removeEventListener(Event.ENTER_FRAME,prevPhotoPlay);  } } //设置图片信息 function setPicInfo():void {  var index:int = keyFrameList.indexOf(mcPhotos.currentFrame);  txtPage.text = '第' + (index + 1) +'页';  txtInfo.text = infoList[index]; }