如何用flash中的按钮制作相册，切换图片？

Question

图层七是按钮，目前就做到这里，后面的还有什么步骤？前面做的对不对？希望要一个详细的步骤，这个按钮制作照片这是期末的作业之一。

Answer 1

如何通过按钮切换图片（AS3）

这里用的是Animate CC，新建AS3文档。



请点击输入图片描述

可以找几张图片导入到舞台中，这里我们用矩形状形代替。这几张图片尺寸最好一致，保证效果。



请点击输入图片描述

分别将这几张图片转换为影片剪辑，并分别设置实例名为image0,image1,image2

设置好后对齐这几张图片。



请点击输入图片描述



请点击输入图片描述

接下来制作按钮。这里我们用影片剪辑制作按钮。

0FLASH CS6中如何将影片剪辑用作按钮（AS3版）



请点击输入图片描述

设置这几个按钮的实例名分别为btn0,btn1,btn2



请点击输入图片描述

接下来在主时间轴加如下代码：

var image_index:int=0;

var image_count:int=3;

initImage();

function initImage():void

{

for(var i:int=0;i<image_count;i++)

{

if(i!=image_index)

{

this["image"+i].visible=false;

}

this["btn"+i].addEventListener(MouseEvent.CLICK,ChangeImage);

}

this["btn"+image_index].gotoAndStop(2);

}

function ChangeImage(e:MouseEvent):void

{

var obj:Object=e.currentTarget;

var t:int=int(obj.name.slice(3));

if(t==image_index)

{

return;

}

this["btn"+image_index].gotoAndStop(1);

this["image"+image_index].visible=false;

image_index=t;

obj.gotoAndStop(2);

this["image"+image_index].visible=true;

}



请点击输入图片描述

运行后，通过点击按钮可以切换图片。



请点击输入图片描述

Answer 2

1新建文档
双击桌面上的Flash图标，打开Flash软件。在Flash软件的主界面上找到【文件】--【新建】--【ActionScript 2.0或3.0】，新建一张Flash文档。ActionScript 2.0和ActionScript 3.0在没有使用as脚本的情况下其实并没有什么区别。
2寻找素材
把需要进行图片切换的素材先放到文件夹中，这里因为我主要是为了说明如何制作图片的切换效果，因此我的图片是随便找的风景图。
3导入到库中
然后把这三张图片导入到Flash软件的库中。导入的方法：在Flash菜单栏中找到【文件】--【导入】--【导入到库】，即可将图片导入到库中。所有的图片可以一次性导入，不要一张张导入，浪费时间。
4设置图片的大小和位置
然后将库中的图片拉到舞台上，设置好图片的大小，即与舞台重合：550*400像素。
5转化为元件
然后将图片转化为【图形元件】。转化方法：右击图片--【转化为图形元件】。输入元件名称和元件类型，点击【确定】按钮即可。另外两张图片也安装第4步和第5步这样做。
6插入图层2
然后我们在图层1上方插入图层。添加图层的方法：右击【图层1】--【插入图层】即可。然后把图层2转化为遮罩层。
7对图层2解锁，使用【矩形工具】绘制一个跟舞台相同大小的矩形。起初矩形移动到舞台外，并转化为图形元件。
8图层1：在第40帧插入空白关键帧，拉入第二张图片，在第80帧位置插入空白关键帧，拉入第三张图片，在第120帧位置创建关键帧。
9图层2遮罩效果
先从无到有显示图片，然后关闭图片，再显示另一张图片，以此类推。具体做法，第一帧遮罩矩形在舞台左侧，第39帧移动过舞台在舞台的右侧。第二张图片和第三张图片同理。
10预览效果
在Flash软件中预览效果。预览方法：【文件】--【预览效果】--【Flash】。
图片的切换，是利用Flash的遮罩效果做的，当然也可以用脚本代码写。不过要先理解下图片的走向。在预览中我们可以看到在图片的切换过程中有一瞬间的页面空白，那是因为我们在图2中插入了空白关键帧导致的。