基于AS的WEB圖片隨機(jī)切換效果的實(shí)現(xiàn)

【摘要】Flash已漸漸成為WEB網(wǎng)站的一大主流，在許多頁面上都可以看到用Flash制作的炫目的圖片自動(dòng)切換效果，在Flash中圖片切換一般有兩種途徑：遮罩和AS腳本，相比較而言，用AS腳本不論在圖片批量處理上還是后期維護(hù)更新上都有顯著優(yōu)勢。本文詳細(xì)介紹了用Adobe Flash Professional CS5.5腳本設(shè)計(jì)圖片切換效果的技術(shù)和步驟，并附上腳本詳細(xì)代碼，對網(wǎng)站動(dòng)畫設(shè)計(jì)和多媒體課件制作都具有一定的指導(dǎo)作用。

【關(guān)鍵詞】Flash；AS；圖片切換

1.引言

Flash是一種交互式矢量多媒體技術(shù)，目前互聯(lián)網(wǎng)上已經(jīng)有成千上萬個(gè)純Flash站點(diǎn)，而且其他普通站點(diǎn)，包括很多wap站點(diǎn)，也都用到了flash技術(shù)，可以說Flash已漸漸成為交互式矢量的標(biāo)準(zhǔn)，未來網(wǎng)頁的一大主流。在用Flash展示產(chǎn)品、風(fēng)景、新聞等圖片時(shí)，其切換效果可用遮罩和AS兩種途徑來實(shí)現(xiàn)，其中遮罩方式簡單易學(xué)，但效果比較單調(diào)，修改不方便；AS方式效果豐富，適合對圖片批處理，更改圖片及效果也極為方便，是制作切換效果的首選。

2.圖片處理

2.1 圖片存放

首先準(zhǔn)備若干張jpg或gif圖片，本文設(shè)計(jì)的是10張600*400的jpg圖片（可以用“光影魔術(shù)手”軟件進(jìn)行批處理），文件名分別為：1.jpg，2.jpg，...，8.jpg，存放在與.fla文件相同目錄下（如圖1），然后通過AS腳本，創(chuàng)建空的影片剪輯和加載外部圖片。

2.2 圖片加載

用數(shù)組方式批量添加，用MovieClip類的createEmptyMovieClip（）和loadMovie（）方法創(chuàng)建空影片剪輯實(shí)例和將圖片加載到實(shí)例中，因?yàn)閳D片多，用循環(huán)方式依次加載，同時(shí)也方便使后加入的深度依次增大而位于上層，具體如：

var mc_array = new Array（10）； //定義數(shù)組，存儲(chǔ)與圖片數(shù)量相對符的8個(gè)mc對象。

for （i=0； i<=7； i++） {

mc_array[i] = _root.createEmptyMovieClip（\"mc\"+String（i+1）， i+1）；

mc_array[i].loadMovie（String（i+1）+\".jpg\"， i+1）；

}

這樣就在舞臺(tái)上層疊了8個(gè)影片剪輯。

2.3 圖片布局

外部圖片導(dǎo)入到舞臺(tái)以后，位置和大小不一定與舞臺(tái)相匹配，須作調(diào)整。本程序中，舞臺(tái)大小設(shè)置為800*600，圖片大小在導(dǎo)入之前已統(tǒng)一設(shè)置為600*400，完全能被裝下，如果圖片大于舞臺(tái)，可通過_xscale和_yscale屬性來縮小。代碼如下：

for （i=1； i<=8； i++） {

with（eval（\"mc\"+i））

{

_x=Stage.width/2-300； //設(shè)置圖片居中

_y=Stage.height/2-200；

_xscale=100； //設(shè)置圖片大小不變（100%），仍為600*400

_yscale=100；

}

}

3.圖片切換

因?yàn)?張圖片大小完全相同，后載入的覆蓋了先載入的，這時(shí)只能看到最上面的一張，所以還必須在兩張圖片之間設(shè)置時(shí)間和過渡效果，才能看到前后圖像載入變化。

flash AS提供了10種效果：Blinds（遮罩效果）、Fade（淡化效果）、Fly（飛行效果）、Iris（光圈效果）、Photo（聚變曝光效果）、PixelDissolve（像素溶解效果）、Rotate（旋轉(zhuǎn)效果）、Squeeze（擠壓效果）、Wipe（劃入/劃出效果）、Zoom（縮放效果），每種效果中又有很多種形式，統(tǒng)計(jì)起來共有27種之多。這些效果的實(shí)現(xiàn)主要是通過TransitionManager類來完成的。要實(shí)現(xiàn)過渡效果，為編寫代碼更為方便，首先需要導(dǎo)入所有mx.transitions類和所有mx.transitions.easing類：

import mx.transitions.*；

import mx.transitions.easing.*；

在導(dǎo)入上面兩個(gè)類以后，就可以使用Tran-sitionManager類的start（）方法將過渡效果應(yīng)用于影片剪輯上。

格式：

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

start（）方法參數(shù)的說明：

影片剪輯名稱：就是要應(yīng)用過渡效果的MC的實(shí)例名稱，即前面用createEmptyMovieClip（“mc”+String（i+1），i+1）創(chuàng)建的mc1、mc2……mc8。

Type：過渡類型，前面已提到共有10種過渡效果，如：Blinds、Fade、Fly、Iris、Photo等。

Direction：方向，即過渡是進(jìn)入還是退出?？梢杂脙蓚€(gè)值：Transition.IN和Transi-tion.OUT

Duration：過渡所所需的時(shí)間，一般一個(gè)過渡幾秒就夠了，常用3-5秒。

easing：緩動(dòng)效果：在過渡效果中可以為過渡效果添加緩動(dòng)效果。

startPoint：一個(gè)指示起始位置的整數(shù)，范圍是1到9。1：左上；2：上中；3：右上；4：左中；5：中心；6：右中；7：左下；8：下中；9：右下。

某些效果還有自己特有的參數(shù)，如：遮罩條紋數(shù)：numStrips和條紋方向：dimension，遮罩形狀Shape：.Iris.SQUARE（方形）和CIRCLE（圓形）等

4.效果實(shí)現(xiàn)

為了將圖片各種隨機(jī)切換效果連續(xù)地展示出來，可以使用setInterval（）方法，setInterval（）方法可以按照指定的周期來調(diào)用函數(shù)（在本程序中是調(diào)用圖片自動(dòng)切換的函數(shù)：showImages（）），直到窗口關(guān)閉，代碼如下：

varshowID：Number = 0； //特效類型代碼

function showImages（） { // 圖片切換函數(shù)

mx.behaviors.DepthControl.bring-ToFront（mc_array[showID]）； // 將下一個(gè)要切換的mc置頂

mx.transitions.TransitionManager.start（mc_array[showID]，xg_arr[random （10）]）； //圖片隨機(jī)添加特效

if （showID++ == 7） {

showID = 0；

} }

setInterval（showImages， 3000）； //設(shè)置每張圖片顯示時(shí)間，單位：ms

5.程序設(shè)計(jì)與調(diào)試

在理解上述思路的基礎(chǔ)上就可在Flash窗口開始編寫程序代碼和調(diào)試了。

啟動(dòng)Adobe Flash Professional CS5.5，在圖層1的第一幀處（如圖2所示）按F9鍵，打開動(dòng)作窗口，在動(dòng)作窗口中輸入附錄中所示代碼。另特別注意，在發(fā)布之前，務(wù)必通過“文件—發(fā)布設(shè)置”將腳本修改為Action-Script2.0，否則在發(fā)布時(shí)會(huì)報(bào)錯(cuò)。

6.測試影片

按上述步驟完成后，即可按Ctrl+Enter測試影片。

作者簡介：易和平（1966—），男，湖南寧鄉(xiāng)人，碩士研究生，工程師，現(xiàn)供職于湖南師范大學(xué)校園網(wǎng)絡(luò)中心。