[AS3编程教学]Flash相册中级教程

首先我们按照之前一个教程做出最基本的相册效果：

因为我们要显示每一张照片的信息，并且给出当前页面，所以我们新建一层，命名为“文本框”，在相册下方拖两个动态文本框，分别命名为txtInfo和txtPage:

我们对背景进行简单的设计，新建一个名为“背景”的图层，拖动到最下方，选择一种背景色，上线画两个矩形，加上一个“美女相册”的标题，右下角加入制作日期，并绘制几条装饰曲线：

此时发布出来便稍微有点像模像样了。

我们把5张美女的信息保存在一个数组里，然后读取显示。所以我们在代码里先加入一个数组： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; btnPrev.addEventListener(MouseEvent.CLICK,prevPhoto); btnNext.addEventListener(MouseEvent.CLICK,nextPhoto); function prevPhoto(e:MouseEvent):void {  mcPhotos.prevFrame(); } function nextPhoto(e:MouseEvent):void {  mcPhotos.nextFrame(); }

接下来我们需要单击显示图片信息和当前页码信息。做法就是每次单击后获取当前相册的帧数，然后通过帧数显示页码和信息。具体做法我们把nextPhoto函数改成下方这样： function nextPhoto(e:MouseEvent):void {  mcPhotos.nextFrame();  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; } 这里要提到一个影片剪辑的重要属性：currentFrame，表示影片剪辑的当前帧，得到当前帧的帧数，是一个正整数。

我们发布影片测试，单击“下一页”按钮，就可以发现我们需要的信息显示了。

我们用同样的方法做上一步按钮的功能，将上一步按钮执行函数：prevPhoto改成这样： function prevPhoto(e:MouseEvent):void {  mcPhotos.prevFrame();  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; }

再次测试影片，前一步也有页码信息显示了，此时整个代码是这样： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; btnPrev.addEventListener(MouseEvent.CLICK,prevPhoto); btnNext.addEventListener(MouseEvent.CLICK,nextPhoto); function prevPhoto(e:MouseEvent):void {  mcPhotos.prevFrame();  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; } function nextPhoto(e:MouseEvent):void {  mcPhotos.nextFrame();  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; }

但是有一个问题，我们发现测试影片时文字描述那个地方时空白的，只有单击按钮后才会显示信息，为了解决这个问题，我们把显示信息的代码在一开始执行一遍，让它默认显示： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; var index:int = mcPhotos.currentFrame; txtPage.text = '第' + index +'页'; txtInfo.text = infoList[index - 1]; btnPrev.addEventListener(MouseEvent.CLICK,prevPhoto); btnNext.addEventListener(MouseEvent.CLICK,nextPhoto); function prevPhoto(e:MouseEvent):void {  mcPhotos.prevFrame();  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; } function nextPhoto(e:MouseEvent):void {  mcPhotos.nextFrame();  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; }

还有最后哦一个问题，细心的同学可能发现了，我们代码中有三句一模一样： var index:int = mcPhotos.currentFrame; txtPage.text = '第' + index +'页'; txtInfo.text = infoList[index - 1]; 被我们重复写了三次，这在代码优化中不提倡，所以我们写一个函数setPicInfo（），进行简单的分装： //设置图片信息 function setPicInfo():void {  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; } 此时所有代码如下： mcPhotos.stop(); var infoList:Array = ['第一位美女','第二位美女','第三位美女','第四位美女','第五位美女',]; 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.nextFrame();  setPicInfo(); } //设置图片信息 function setPicInfo():void {  var index:int = mcPhotos.currentFrame;  txtPage.text = '第' + index +'页';  txtInfo.text = infoList[index - 1]; } 是不是简洁了很多！