朱學(xué)平，王 瓊

（十堰廣播電視大學(xué)，湖北 十堰 442000）

1．引言

當(dāng)前在許多網(wǎng)站的頁面上都可以看到炫目的圖片自動(dòng)切換效果，為了實(shí)現(xiàn)它，一些網(wǎng)站采用的做法是先利用Flash制作圖片切換動(dòng)畫，然后再將其插入到網(wǎng)頁中。在Flash中，圖片切換效果主要通過制作遮罩動(dòng)畫和編寫AS腳本兩種途徑實(shí)現(xiàn)，相比較而言，編寫AS腳本在圖片的批量處理和過渡效果的生成上優(yōu)勢(shì)顯著，是目前制作圖片切換效果的首選。

2．技術(shù)分析

（1）圖片的處理

在Flash中，我們可以，也只能將動(dòng)作腳本添加在關(guān)鍵幀、影片剪輯實(shí)例和按鈕實(shí)例上。編寫AS腳本制作圖片切換效果，首要任務(wù)就是將要展示的圖片轉(zhuǎn)化為影片剪輯實(shí)例，并將實(shí)例大小設(shè)置為與舞臺(tái)相匹配。我們可以采用批量處理的方式來生成每張圖片的影片剪輯實(shí)例及設(shè)置其大小。具體做法如下所述。

先定義一個(gè)存儲(chǔ)所有圖片影片剪輯實(shí)例的數(shù)組：

var mc_number:Number=10; //影片剪輯實(shí)例的個(gè)數(shù)，根據(jù)所要處理的圖片數(shù)目確定

var mc_array=new Array(mc_number);//定義一個(gè)存儲(chǔ)所有圖片影片剪輯實(shí)例的數(shù)組

緊接著就要生成每張圖片的影片剪輯實(shí)例，采用的方法是先創(chuàng)建空影片剪輯實(shí)例，再將圖片加載到影片剪輯實(shí)例中，使用的是 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)的作用是在動(dòng)畫播放時(shí)動(dòng)態(tài)地在舞臺(tái)上創(chuàng)建名為“img1”的空影片剪輯實(shí)例，其深度為 1，mc_array[i].loadMovie("images/"+String(i+1)+".jpg")的作用就是將圖片“imges/1.jpg”加載到“img1”中。循環(huán)結(jié)束后，會(huì)在舞臺(tái)上生成 mc_number個(gè)層疊在一起的影片剪輯實(shí)例，后生成的影片剪輯實(shí)例深度大，位于上層。

在本程序代碼中圖片是放在與 fla文件相同目錄下的images文件夾中，分別取名為1.jpg、2.jpg、3.jpg……,在實(shí)際編程中，要加載的圖片來源可以是網(wǎng)絡(luò)或本地硬盤的某個(gè)文件夾中，在這些情況下，文件的路徑一定要寫清楚，為了避免出錯(cuò)，最好將圖片文件預(yù)先存放在與fla文件相同目錄下的文件夾中，如這里的images文件夾。

到此為止，可以說我們已經(jīng)將外部的圖片導(dǎo)入到了舞臺(tái)上，但圖片的大小不一定與舞臺(tái)相匹配，下面要做的工作就是修改每個(gè)影片剪輯實(shí)例的屬性，如果在前期已經(jīng)對(duì)圖片大小做過處理，使每張的尺寸完全一致，那么就可以通過循環(huán)程序批量處理圖片所在的影片剪輯實(shí)例。在本程序中，圖片大小都為800*600，舞臺(tái)的大小為400*300，則代碼如下：

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

mc_array[i]._x=0;

mc_array[i]._y=0;

mc_array[i]._xscale=50; //影片剪輯實(shí)例與原始圖片寬度的比值

mc_array[i]._yscale=50; //影片剪輯實(shí)例與原始圖片高度的比值

}

圖片處理工作到此結(jié)束。

（2）圖片的切換

圖片處理完后，在舞臺(tái)上有 mc_number個(gè)圖片的影片剪輯實(shí)例，這些實(shí)例層疊在一起，又大小相等，所以我們看到的只是位于最上層（深度最大）的，如果要看到下層的某張圖片，就要將其實(shí)例置于頂層。將某個(gè)影片剪輯實(shí)例置于頂層，可以通過兩種方式實(shí)現(xiàn)，一種是使用MovieClip類的SwapDepth()方法，將其與位于頂層的影片剪輯交換深度，還有一種就是直接利用 mx.behaviors.DepthControl.bringTo Front（影片剪輯實(shí)例名稱）；語句將指定的影片剪輯位于頂層。比如，我要將名為“img1”的影片剪輯實(shí)例置于頂層，可寫成：

mx.behaviors.DepthControl.bringToFront(img1);

（3）過渡效果的生成

要實(shí)現(xiàn)圖片的過渡效果，我們就利用 Flash 的TransitionManager類來完成。

TransitionManager類提供了遮簾（Blinds）、淡化（Fade）、飛行（Fly）等等十種過渡效果，只要導(dǎo)入所有mx.transitions類和所有mx.transitions. easing 類后，就可以使用Transition Manager類的 start()方法將過渡效果應(yīng)用于影片剪輯實(shí)例上。

導(dǎo)入類的代碼如下：

import mx.transitions.＊;

import mx.transitions.easing.＊;

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

TransitionManager.start(影片剪輯實(shí)例名稱，{type:過渡類型,direction:方向,duration:過渡所所需的時(shí)間,easing:緩動(dòng)效果,各種過渡效果所需的參數(shù)})；

start( )方法中{}內(nèi)的參數(shù)就是用于設(shè)定過渡效果，使用說明如下：

type 要用的過渡效果名稱，如 Blinds、Fade、Fly……10種中的任一種。direction 過渡是進(jìn)入還是退出，可以用兩個(gè)值：Transition.IN和Transition.OUT。duration 過渡所所需的時(shí)間：一般一個(gè)過渡幾秒就夠了吧，常用3-5。easing 在過渡效果中可以為過渡效果添加緩動(dòng)效果。各種過渡效果所需的參數(shù)除了上面的的參數(shù)外，每一種過渡效果可能還有自已的參數(shù)，如遮簾效果還有遮罩條紋數(shù)（numStrips）和條紋方向（dimension）兩個(gè)參數(shù)。

通過更改{}中的參數(shù)，可以實(shí)現(xiàn)不同的效果，我們預(yù)先定義一個(gè)數(shù)組，將自己喜歡的過渡效果存儲(chǔ)起來，便于后面隨機(jī)使用。

var type_number :Number=3; //過渡效果的數(shù)目，這里為了簡(jiǎn)便，只設(shè)置了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 網(wǎng)頁中圖片自動(dòng)切換效果的實(shí)現(xiàn)

最終動(dòng)畫的播放效果是所有圖片不間斷地、隨機(jī)使用各種過渡效果切換。要實(shí)現(xiàn)這個(gè)“不間斷地”，可以使用setInterval() 方法。setInterval() 方法可按照指定的周期（以毫秒計(jì)）來不停調(diào)用函數(shù)（在這里是我們編寫實(shí)現(xiàn)圖片自動(dòng)切換的函數(shù)），直到窗口被關(guān)閉。代碼如下：

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);

我們將這段代碼和前面圖片處理代碼、定義過渡效果數(shù)組代碼結(jié)合起來，就是一個(gè)完整的實(shí)現(xiàn)圖片自動(dòng)切換效果的AS腳本。運(yùn)行腳本，就可以生成swf文件。

在網(wǎng)頁中實(shí)現(xiàn)圖片自動(dòng)切換效果，一定要先將生成的swf文件及存放圖片的images文件夾一同復(fù)制到網(wǎng)站中，而且二者必須處于網(wǎng)站相同目錄下。接著要做的是在某個(gè)網(wǎng)頁的指定位置處插入這個(gè) swf文件，點(diǎn)擊“在瀏覽器中預(yù)覽/調(diào)試”按鈕，就可以在網(wǎng)頁中看到圖片自動(dòng)切換效果了。