編寫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文件，點擊“在瀏覽器中預覽/調試”按鈕，就可以在網頁中看到圖片自動切換效果了。