姚競英

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

引言

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

1 Flash網(wǎng)站

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

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

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

（2）設計網(wǎng)站結構

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

（3）設計場景

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

（4）準備素材

根據(jù)確定好的網(wǎng)站主題、風格和結構，收集相關素材，主要有以下幾類

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

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

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

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

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

制作loading頁：用戶打開網(wǎng)站的時候，不管網(wǎng)速快慢，都必須等待一段時間將網(wǎng)站內(nèi)容下載到電腦里才能開始瀏覽網(wǎng)站的，這就需要設計loading頁來吸引用戶的視線，引導用戶等待下載完成。這里舉例用ActionScript技術制作一段進度條動畫，首先用素材中的load.jpeg圖片轉換為影片剪輯元件，選中該元件，按F9鍵，在“動作”面板輸入以下代碼，這樣當打開網(wǎng)站時，進度條會顯示當前下載的進度百分比，暗示瀏覽者馬上就能開始瀏覽網(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結合制作整站：利用FLASH的逐幀動畫、傳統(tǒng)補間動畫、補間形狀、引導層、遮罩、按鈕等技術結合ActionScript腳本語言、Dreamweaver技術和數(shù)據(jù)庫等軟件技術，搭建整個網(wǎng)站，制作網(wǎng)站注冊、會員登錄、表單、導航動畫、FLASH網(wǎng)絡廣告動畫、交互動畫、場景切換動畫、鏈接效果和各層級的場景動畫。

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

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

（1）動畫導航系統(tǒng)

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

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

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

（3）組件的使用

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

（4）各級場景動畫和轉場動畫

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

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

（1）優(yōu)點

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

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

（2）缺點

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

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

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

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

（1）將準備好的登錄窗口的圖片轉換為影片剪輯元件，利用濾鏡效果相應美化，結合文字搭建好登錄窗口的界面

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

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

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

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

Submit.addEventListener（MouseEvent.CLICK，LoginAction）；

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

function LoginAction（event：MouseEvent）：void｛

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

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

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

gotoAndStop（3）；／／跳轉并停止在第3幀

｝else｛ gotoAndStop（2）；／／跳轉并停止在第2幀｝

｝

Reset.addEventListener（MouseEvent.CLICK，ResetAction）；

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

function ResetAction（event：MouseEvent）：void｛

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

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

｝

3 結束語

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