编写AS脚本实现图片自动切换效果

朱学平，王 琼

（十堰广播电视大学，湖北 十堰 442000）

1．引言

当前在许多网站的页面上都可以看到炫目的图片自动切换效果，为了实现它，一些网站采用的做法是先利用Flash制作图片切换动画，然后再将其插入到网页中。在Flash中，图片切换效果主要通过制作遮罩动画和编写AS脚本两种途径实现，相比较而言，编写AS脚本在图片的批量处理和过渡效果的生成上优势显著，是目前制作图片切换效果的首选。

2．技术分析

（1）图片的处理

在Flash中，我们可以，也只能将动作脚本添加在关键帧、影片剪辑实例和按钮实例上。编写AS脚本制作图片切换效果，首要任务就是将要展示的图片转化为影片剪辑实例，并将实例大小设置为与舞台相匹配。我们可以采用批量处理的方式来生成每张图片的影片剪辑实例及设置其大小。具体做法如下所述。

先定义一个存储所有图片影片剪辑实例的数组：

var mc_number:Number=10; //影片剪辑实例的个数，根据所要处理的图片数目确定

var mc_array=new Array(mc_number);//定义一个存储所有图片影片剪辑实例的数组

紧接着就要生成每张图片的影片剪辑实例，采用的方法是先创建空影片剪辑实例，再将图片加载到影片剪辑实例中，使用的是 MovieClip类的 createEmptyMovieClip()方法和loadMovie()方法，代码如下：

for(i=0;i＜mc_number;i++){

mc_array[i]=_root.createEmptyMovieClip("img"+String(i+1),i+1);

mc_array[i].loadMovie("images/"+String(i+1)+".jpg");

}

若 i为 0，则_root.createEmptyMovieClip("img"+String(i+1),i+1)的作用是在动画播放时动态地在舞台上创建名为“img1”的空影片剪辑实例，其深度为 1，mc_array[i].loadMovie("images/"+String(i+1)+".jpg")的作用就是将图片“imges/1.jpg”加载到“img1”中。循环结束后，会在舞台上生成 mc_number个层叠在一起的影片剪辑实例，后生成的影片剪辑实例深度大，位于上层。

在本程序代码中图片是放在与 fla文件相同目录下的images文件夹中，分别取名为1.jpg、2.jpg、3.jpg……,在实际编程中，要加载的图片来源可以是网络或本地硬盘的某个文件夹中，在这些情况下，文件的路径一定要写清楚，为了避免出错，最好将图片文件预先存放在与fla文件相同目录下的文件夹中，如这里的images文件夹。

到此为止，可以说我们已经将外部的图片导入到了舞台上，但图片的大小不一定与舞台相匹配，下面要做的工作就是修改每个影片剪辑实例的属性，如果在前期已经对图片大小做过处理，使每张的尺寸完全一致，那么就可以通过循环程序批量处理图片所在的影片剪辑实例。在本程序中，图片大小都为800*600，舞台的大小为400*300，则代码如下：

for(i=0;i＜mc_number;i++){

mc_array[i]._x=0;

mc_array[i]._y=0;

mc_array[i]._xscale=50; //影片剪辑实例与原始图片宽度的比值

mc_array[i]._yscale=50; //影片剪辑实例与原始图片高度的比值

}

图片处理工作到此结束。

（2）图片的切换

图片处理完后，在舞台上有 mc_number个图片的影片剪辑实例，这些实例层叠在一起，又大小相等，所以我们看到的只是位于最上层（深度最大）的，如果要看到下层的某张图片，就要将其实例置于顶层。将某个影片剪辑实例置于顶层，可以通过两种方式实现，一种是使用MovieClip类的SwapDepth()方法，将其与位于顶层的影片剪辑交换深度，还有一种就是直接利用 mx.behaviors.DepthControl.bringTo Front（影片剪辑实例名称）；语句将指定的影片剪辑位于顶层。比如，我要将名为“img1”的影片剪辑实例置于顶层，可写成：

mx.behaviors.DepthControl.bringToFront(img1);

（3）过渡效果的生成

要实现图片的过渡效果，我们就利用 Flash 的TransitionManager类来完成。

TransitionManager类提供了遮帘（Blinds）、淡化（Fade）、飞行（Fly）等等十种过渡效果，只要导入所有mx.transitions类和所有mx.transitions. easing 类后，就可以使用Transition Manager类的 start()方法将过渡效果应用于影片剪辑实例上。

导入类的代码如下：

import mx.transitions.＊;

import mx.transitions.easing.＊;

TransitionManager类的start()方法使用格式如下：

TransitionManager.start(影片剪辑实例名称，{type:过渡类型,direction:方向,duration:过渡所所需的时间,easing:缓动效果,各种过渡效果所需的参数})；

start( )方法中{}内的参数就是用于设定过渡效果，使用说明如下：

type 要用的过渡效果名称，如 Blinds、Fade、Fly……10种中的任一种。direction 过渡是进入还是退出，可以用两个值：Transition.IN和Transition.OUT。duration 过渡所所需的时间：一般一个过渡几秒就够了吧，常用3-5。easing 在过渡效果中可以为过渡效果添加缓动效果。各种过渡效果所需的参数除了上面的的参数外，每一种过渡效果可能还有自已的参数，如遮帘效果还有遮罩条纹数（numStrips）和条纹方向（dimension）两个参数。

通过更改{}中的参数，可以实现不同的效果，我们预先定义一个数组，将自己喜欢的过渡效果存储起来，便于后面随机使用。

var type_number :Number=3; //过渡效果的数目，这里为了简便，只设置了3种

var type_array=new Array(type_number);

type_array[0]= {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:20, dimension:0}; //遮帘过渡

type_array[1] = {type:PixelDissolve,direction:Transition. IN, duration:2, easing:None. easeNone, xSections:50, ySections:50};//像素溶解

type_array[2] = {type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris. CIRCLE};//光圈过渡

3 网页中图片自动切换效果的实现

最终动画的播放效果是所有图片不间断地、随机使用各种过渡效果切换。要实现这个“不间断地”，可以使用setInterval() 方法。setInterval() 方法可按照指定的周期（以毫秒计）来不停调用函数（在这里是我们编写实现图片自动切换的函数），直到窗口被关闭。代码如下：

var showID:Number=0;

function showImage(){

mx.behaviors.DepthControl.bringTo Front(mc_array[showID]);

mx.transitions.TransitionManager.start(mc_array[showID],type_array[random(type_number)]);

showID++;

showID=showID++%mc_number;

}

setInterval(showImage,4000);

我们将这段代码和前面图片处理代码、定义过渡效果数组代码结合起来，就是一个完整的实现图片自动切换效果的AS脚本。运行脚本，就可以生成swf文件。

在网页中实现图片自动切换效果，一定要先将生成的swf文件及存放图片的images文件夹一同复制到网站中，而且二者必须处于网站相同目录下。接着要做的是在某个网页的指定位置处插入这个 swf文件，点击“在浏览器中预览/调试”按钮，就可以在网页中看到图片自动切换效果了。