如何用flash中的按钮制作相册,切换图片? 50
这里用的是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;
}
运行后,通过点击按钮可以切换图片。
双击桌面上的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中插入了空白关键帧导致的。