基于ActionScript的Flash網(wǎng)站的研究

姚競(jìng)英

（無錫城市職業(yè)技術(shù)學(xué)院，江蘇無錫，214153）

引言

近年來，網(wǎng)絡(luò)技術(shù)不斷發(fā)展，它的覆蓋率廣闊、傳播的信息量很大、數(shù)據(jù)形態(tài)呈現(xiàn)多樣化、傳播速度很快，通過電腦、手機(jī)、電視等都能方便快捷得上網(wǎng)獲得信息，互聯(lián)網(wǎng)已經(jīng)成為人們工作生活中不可缺少的一部分。FLASH使用的矢量圖存儲(chǔ)空間較小，F(xiàn)LASH動(dòng)畫具有較強(qiáng)的交互功能、精美的動(dòng)態(tài)效果，網(wǎng)站中加入FLASH動(dòng)畫后會(huì)具有強(qiáng)烈的視覺沖擊、強(qiáng)大的交互功能，會(huì)給用戶留下深刻印象，因此，F(xiàn)LASH已經(jīng)受到了網(wǎng)站設(shè)計(jì)者們的青睞。

1 Flash網(wǎng)站

1.1 Flash網(wǎng)站的規(guī)劃

（1）確定網(wǎng)站主題和風(fēng)格

確定網(wǎng)站的主題是至關(guān)重要的，有了主題才能制定風(fēng)格，這決定了之后素材的收集、動(dòng)畫的設(shè)計(jì)、網(wǎng)站的制作等多個(gè)環(huán)節(jié)。

（2）設(shè)計(jì)網(wǎng)站結(jié)構(gòu)

就是設(shè)計(jì)方便使用的導(dǎo)航和網(wǎng)站整體目錄結(jié)構(gòu)圖。一個(gè)網(wǎng)站構(gòu)造的好壞影響著用戶對(duì)網(wǎng)站使用的感覺，這決定了用戶是否愿意再次瀏覽該網(wǎng)站。導(dǎo)航具備一致性、可識(shí)別性和可學(xué)習(xí)性，它向用戶展現(xiàn)了整個(gè)網(wǎng)站的信息結(jié)構(gòu)，用戶可以通過導(dǎo)航實(shí)現(xiàn)在網(wǎng)站內(nèi)部各個(gè)場(chǎng)景之間的跳轉(zhuǎn)。導(dǎo)航必須可以被用戶輕松識(shí)別并方便使用，給用戶提供標(biāo)記來瀏覽網(wǎng)站。網(wǎng)站結(jié)構(gòu)對(duì)于維護(hù)網(wǎng)站、更新內(nèi)容有著重要影響。

（3）設(shè)計(jì)場(chǎng)景

FLASH網(wǎng)站是通過場(chǎng)景將內(nèi)容展示給用戶的，主場(chǎng)景就是主舞臺(tái)，規(guī)定了網(wǎng)站的幀頻、長(zhǎng)寬像素比例等，二級(jí)子場(chǎng)景、三級(jí)子場(chǎng)景等逐個(gè)導(dǎo)入到主場(chǎng)景中。場(chǎng)景的設(shè)計(jì)是根據(jù)網(wǎng)站結(jié)構(gòu)來規(guī)劃的。

（4）準(zhǔn)備素材

根據(jù)確定好的網(wǎng)站主題、風(fēng)格和結(jié)構(gòu)，收集相關(guān)素材，主要有以下幾類

文字：文字生成文件較小、容易編輯，下載方便，是網(wǎng)站最基本的元素。長(zhǎng)篇累牘的文字會(huì)讓人厭煩而不愿意去看，網(wǎng)站中使用的文字必須要簡(jiǎn)明扼要，突出網(wǎng)站主題。瀏覽網(wǎng)站的用戶電腦硬件條件各不相同，為了避免在不同硬件環(huán)境下文字出現(xiàn)無法顯示的情況，網(wǎng)站不可使用特殊的字體，而要選擇常用字體和容易辨識(shí)的字體?？紤]到用戶瀏覽網(wǎng)站內(nèi)容的舒適感，對(duì)網(wǎng)頁(yè)中文字的大小、顏色、行間距、字間距等設(shè)置都有一定限制。

圖片：所謂“圖文并茂”，網(wǎng)頁(yè)使用的文字必須配上合適的圖片。與位圖相比，F(xiàn)LASH中常見的矢量圖是以數(shù)學(xué)公式來表示的，需要的存儲(chǔ)空間比較小，放大后邊緣不會(huì)出現(xiàn)鋸齒狀，不影響圖片質(zhì)量。

動(dòng)畫：除了現(xiàn)成的GIF動(dòng)畫，F(xiàn)LASH本身就是制作動(dòng)畫的，用FLASH可以制作網(wǎng)站的導(dǎo)入動(dòng)畫、廣告、導(dǎo)航欄動(dòng)畫、各場(chǎng)景動(dòng)畫等。

音樂等：音樂文件對(duì)網(wǎng)站來說是必不可少的。在網(wǎng)站中需要有背景音樂、鼠標(biāo)點(diǎn)擊音效，一些特效，還有FLASH動(dòng)畫中需要有配音。此外，F(xiàn)LASH網(wǎng)站中也可以導(dǎo)入視頻文件。

（5）制作網(wǎng)站

制作loading頁(yè)：用戶打開網(wǎng)站的時(shí)候，不管網(wǎng)速快慢，都必須等待一段時(shí)間將網(wǎng)站內(nèi)容下載到電腦里才能開始瀏覽網(wǎng)站的，這就需要設(shè)計(jì)loading頁(yè)來吸引用戶的視線，引導(dǎo)用戶等待下載完成。這里舉例用ActionScript技術(shù)制作一段進(jìn)度條動(dòng)畫，首先用素材中的load.jpeg圖片轉(zhuǎn)換為影片剪輯元件，選中該元件，按F9鍵，在“動(dòng)作”面板輸入以下代碼，這樣當(dāng)打開網(wǎng)站時(shí)，進(jìn)度條會(huì)顯示當(dāng)前下載的進(jìn)度百分比，暗示瀏覽者馬上就能開始瀏覽網(wǎng)站了，不用等太久了。

onClipEvent（load）

｛ this._xscale＝0；

total＝_root.getBytesTotal（）；

｝

onClipEvent（enterFrame）

｛ loaded＝_root.getBytesLoaded（）；

percent＝int（loaded／total*100）；

_root.txt＝percent+＂%＂；

this._xscale＝percent；

if（loaded＝＝total）

｛ _root.gotoAndPlay（2）；｝

｝

FLASH和Dreamweaver結(jié)合制作整站：利用FLASH的逐幀動(dòng)畫、傳統(tǒng)補(bǔ)間動(dòng)畫、補(bǔ)間形狀、引導(dǎo)層、遮罩、按鈕等技術(shù)結(jié)合ActionScript腳本語(yǔ)言、Dreamweaver技術(shù)和數(shù)據(jù)庫(kù)等軟件技術(shù)，搭建整個(gè)網(wǎng)站，制作網(wǎng)站注冊(cè)、會(huì)員登錄、表單、導(dǎo)航動(dòng)畫、FLASH網(wǎng)絡(luò)廣告動(dòng)畫、交互動(dòng)畫、場(chǎng)景切換動(dòng)畫、鏈接效果和各層級(jí)的場(chǎng)景動(dòng)畫。

網(wǎng)站的后期調(diào)試、管理和維護(hù)：網(wǎng)站建設(shè)好后，后期調(diào)試是必不可少的。這里包括網(wǎng)站鏈接測(cè)試，檢查各層級(jí)網(wǎng)頁(yè)中是否有超鏈接掉鏈的情況存在；網(wǎng)站兼容性測(cè)試，用多種瀏覽器測(cè)試網(wǎng)頁(yè)打開和使用是否正常，并在多種操作系統(tǒng)中測(cè)試；網(wǎng)站性能測(cè)試和網(wǎng)站安全性測(cè)試。

1.2 Flash在網(wǎng)站中的主要應(yīng)用

（1）動(dòng)畫導(dǎo)航系統(tǒng)

對(duì)于網(wǎng)站來說，導(dǎo)航系統(tǒng)發(fā)揮著極其重要的作用，它為網(wǎng)站瀏覽者提供了從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的途徑，使瀏覽者可以快速便捷得訪問到所需的內(nèi)容。導(dǎo)航系統(tǒng)可以有文字類、圖片類和浮動(dòng)類，它不再僅僅是傳統(tǒng)的鼠標(biāo)移上去出現(xiàn)的效果，用FLASH技術(shù)結(jié)合ActionScript腳本語(yǔ)言，可以制作出導(dǎo)航動(dòng)態(tài)效果，使用戶在使用時(shí)有愉快感和新鮮感。設(shè)計(jì)時(shí)，要分出不同級(jí)別的導(dǎo)航欄，一級(jí)導(dǎo)航欄要具有鮮明感和立體感，一目了然，吸引用戶去使用。每個(gè)級(jí)別的導(dǎo)航欄要有標(biāo)志給予區(qū)分，色彩搭配要清爽亮麗，結(jié)合使用FLASH中的按鈕，用ActionScript腳本語(yǔ)言和音效制作導(dǎo)航動(dòng)畫特效，使瀏覽者享受點(diǎn)擊過程的感覺。

（2）網(wǎng)絡(luò)廣告

網(wǎng)絡(luò)廣告是采用網(wǎng)站上的廣告橫幅、文本鏈接、多媒體等方法，將高科技廣告?zhèn)鬟f給互聯(lián)網(wǎng)用戶的一種方式，它是全新的廣告媒體，覆蓋范圍廣、信息容量大、費(fèi)用低投資少、多媒體動(dòng)態(tài)效果好、傳播速度快，在各個(gè)網(wǎng)站隨處可見。此外，由于FLASH動(dòng)畫有交互性，用戶不僅可以欣賞廣告，還能通過拖動(dòng)、選擇、點(diǎn)擊等行為來改變動(dòng)畫的播放走向而參與其中，使自己成為動(dòng)畫的一部分，這樣的廣告會(huì)讓用戶記憶深刻，大大增加點(diǎn)擊率，已經(jīng)成為商家的首選。網(wǎng)站廣告主要有按鈕類、標(biāo)識(shí)類、橫幅類、通欄類、對(duì)聯(lián)類、畫中畫類、背投類和全屏類，在設(shè)計(jì)時(shí)要求色彩清晰明快、內(nèi)容簡(jiǎn)明有號(hào)召力、講究時(shí)效性和趣味性。

（3）組件的使用

FLASH中有一些帶有不同參數(shù)的影片剪輯叫“組件”，組件是制作豐富網(wǎng)絡(luò)應(yīng)用程序的構(gòu)建模塊，在網(wǎng)站設(shè)計(jì)中開發(fā)人員可以通過組件重復(fù)使用和共享代碼，封裝復(fù)雜功能，使得設(shè)計(jì)者可以自定義使用這些功能而無需重復(fù)編寫復(fù)雜的腳本。網(wǎng)站中常用的FLASH組件有選擇類、文本類、列表類、控制類和容器類，可以用來制作例如網(wǎng)站用戶登錄程序、網(wǎng)站會(huì)員注冊(cè)頁(yè)面、投票頁(yè)面、心理測(cè)試頁(yè)面等。

（4）各級(jí)場(chǎng)景動(dòng)畫和轉(zhuǎn)場(chǎng)動(dòng)畫

FLASH網(wǎng)站比較多得用于企業(yè)產(chǎn)品的推廣、企業(yè)官方網(wǎng)站、個(gè)人工作室等，這些網(wǎng)站內(nèi)容比較新奇獨(dú)特，有企業(yè)特色或個(gè)人風(fēng)格。在制作網(wǎng)站的形象展示動(dòng)畫時(shí)，主色要根據(jù)整個(gè)網(wǎng)站風(fēng)格來設(shè)計(jì)，其它搭配色要對(duì)照主色進(jìn)行選擇。在制作各級(jí)場(chǎng)景動(dòng)畫時(shí)，除了使用FLASH補(bǔ)間形狀、補(bǔ)間動(dòng)畫等技術(shù)外，可以結(jié)合視頻的插入、三維應(yīng)用引擎使動(dòng)畫更具有魅力和吸引力。網(wǎng)站連接網(wǎng)頁(yè)之間的轉(zhuǎn)場(chǎng)動(dòng)畫是網(wǎng)頁(yè)之間的過渡，可以使用動(dòng)畫特效來完成，有時(shí)簡(jiǎn)單的遮罩技術(shù)和多個(gè)圖層的疊加設(shè)計(jì)，會(huì)產(chǎn)生很酷很炫的轉(zhuǎn)場(chǎng)效果。

2.3 Flash網(wǎng)站的優(yōu)缺點(diǎn)

（1）優(yōu)點(diǎn)

更酷更炫的視覺效果：每個(gè)互聯(lián)網(wǎng)用戶的心理特征不同，在瀏覽網(wǎng)站時(shí)的感受及與網(wǎng)站的互動(dòng)頻率就會(huì)不同。設(shè)計(jì)者需要從專業(yè)的角度出發(fā)，掌握足夠的視覺力、創(chuàng)造力和想象力，使用戶瀏覽網(wǎng)站時(shí)留下深刻的印象。與靜態(tài)網(wǎng)站不同，F(xiàn)LASH技術(shù)可以制作酷炫的動(dòng)畫效果，充分展示MV、視頻、游戲、動(dòng)畫等元素，網(wǎng)站變得有故事有內(nèi)涵、增加廣告特性、生動(dòng)而立體，使用戶在打開網(wǎng)頁(yè)時(shí)眼前一亮，這樣具有動(dòng)態(tài)視覺效果的網(wǎng)站，有著無窮的吸引力。

傳播多種類型的信息，與用戶更好得互動(dòng)：FLASH中可以插入多種格式的圖片、音頻文件和視頻文件，通過網(wǎng)頁(yè)上的導(dǎo)航、動(dòng)畫、廣告等元素向用戶傳播多媒體信息，與傳統(tǒng)網(wǎng)頁(yè)相比更加多元化。將FLASH動(dòng)畫和ActionScript腳本語(yǔ)言相結(jié)合，使用按鈕特效、3D效果，用戶可以通過鍵盤或鼠標(biāo)來控制網(wǎng)頁(yè)中對(duì)象的運(yùn)動(dòng)，增加了與網(wǎng)站的互動(dòng)，提高了網(wǎng)站的趣味性和吸引力。

（2）缺點(diǎn)

搜索引擎的問題：FLASH網(wǎng)站中所包含的多種類型的數(shù)據(jù)都是集成在SWF文件中，即使是當(dāng)下百度、谷歌等主流的搜索引擎對(duì)于FLASH網(wǎng)站內(nèi)的動(dòng)畫元素進(jìn)行識(shí)別、收錄和調(diào)用還是比較困難的，這一點(diǎn)會(huì)影響網(wǎng)站的推廣，可以參考的方法是添加網(wǎng)頁(yè)關(guān)鍵字以便被搜索引擎查找到。

代碼的安全性：FLASH網(wǎng)站中特效、廣告等許多地方會(huì)用到ActionScript腳本語(yǔ)言，這種語(yǔ)言有其自身無法忽視的安全漏洞，黑客有可能會(huì)利用漏洞來攻擊網(wǎng)站和瀏覽者電腦，如何避免病毒的入侵保障網(wǎng)站的安全是必須考慮的問題。

2 基于AS的網(wǎng)站用戶登錄程序

在網(wǎng)站中，注冊(cè)過的用戶必須登錄成功后才可以開始執(zhí)行網(wǎng)站功能，那么在用戶登錄時(shí)就必須對(duì)用戶輸入的賬號(hào)和密碼進(jìn)行驗(yàn)證，輸入的內(nèi)容正確，則跳轉(zhuǎn)到登錄成功的頁(yè)面；內(nèi)容錯(cuò)誤，則跳轉(zhuǎn)到登錄失敗的頁(yè)面，下面介紹該網(wǎng)站用戶登錄程序的制作：

（1）將準(zhǔn)備好的登錄窗口的圖片轉(zhuǎn)換為影片剪輯元件，利用濾鏡效果相應(yīng)美化，結(jié)合文字搭建好登錄窗口的界面

（2）在主場(chǎng)景中放置Label組件，實(shí)例名為usertitle，text參數(shù)是“賬號(hào)：”，再放置TextInput組件，實(shí)例名為user。使用同樣的方法，為密碼框放置相應(yīng)組件和設(shè)置實(shí)例名

（3）在主場(chǎng)景中放置兩個(gè)Button組件實(shí)例，實(shí)例名為Submit和Reset，label參數(shù)分別設(shè)為“確定”和“取消”

（4）主場(chǎng)景第二幀創(chuàng)建提示用戶登錄失敗的文字和圖片，第三幀創(chuàng)建提示用戶登錄成功的文字和圖片

（5）單擊“確定”按鈕時(shí)調(diào)用LoginAction（）函數(shù)，判斷輸入的賬號(hào)和密碼是否正確；單擊“取消”按鈕時(shí)調(diào)用ResetAction（）函數(shù)，用于重置文本輸入框

Submit.addEventListener（MouseEvent.CLICK，LoginAction）；

／／偵聽“確定”按鈕的鼠標(biāo)單擊事件，當(dāng)事件發(fā)生時(shí)調(diào)用LoginAction（）函數(shù)判斷用戶輸入的帳號(hào)和密碼是否正確

function LoginAction（event：MouseEvent）：void｛

var user：String＝User.text；／／獲取User輸入文本框中的帳號(hào)

var pwd：String＝PassWord.text；／／獲 取PassWord輸入文本框中的密碼

if（user＝＝＂admin＂＆＆pwd＝＝＂123456＂）｛／／如果帳號(hào)為“admin”且密碼為“123456”，即輸入正確

gotoAndStop（3）；／／跳轉(zhuǎn)并停止在第3幀

｝else｛ gotoAndStop（2）；／／跳轉(zhuǎn)并停止在第2幀｝

｝

Reset.addEventListener（MouseEvent.CLICK，ResetAction）；

／／偵聽“取消”按鈕的鼠標(biāo)單擊事件，當(dāng)事件發(fā)生時(shí)調(diào)用ResetAction（）函數(shù)清空輸入文本框中的內(nèi)容

function ResetAction（event：MouseEvent）：void｛

User.text＝＂＂； ／／清空User輸入文本框中的內(nèi)容

PassWord.text＝＂＂； ／／清空PassWord輸入文本框中的內(nèi)容

｝

3 結(jié)束語(yǔ)

FLASH憑借其補(bǔ)間動(dòng)畫、補(bǔ)間形狀等動(dòng)畫制作技術(shù)和ActionScript腳本語(yǔ)言的結(jié)合使用，給網(wǎng)站設(shè)計(jì)帶來了無限生機(jī)和驚喜，酷炫的動(dòng)態(tài)界面、強(qiáng)烈的視覺沖擊力，F(xiàn)LASH網(wǎng)站給瀏覽者留下了深刻的印象，這樣的網(wǎng)站受到商家的青睞，前景廣闊，相信在未來會(huì)成為主流。