基于ActionScript的Flash網站的研究

姚競英

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

引言

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

1 Flash網站

1.1 Flash網站的規劃

（1）確定網站主題和風格

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

（2）設計網站結構

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

（3）設計場景

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

（4）準備素材

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

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

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

動畫：除了現成的GIF動畫，FLASH本身就是制作動畫的，用FLASH可以制作網站的導入動畫、廣告、導航欄動畫、各場景動畫等。

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

（5）制作網站

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

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的逐幀動畫、傳統補間動畫、補間形狀、引導層、遮罩、按鈕等技術結合ActionScript腳本語言、Dreamweaver技術和數據庫等軟件技術，搭建整個網站，制作網站注冊、會員登錄、表單、導航動畫、FLASH網絡廣告動畫、交互動畫、場景切換動畫、鏈接效果和各層級的場景動畫。

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

1.2 Flash在網站中的主要應用

（1）動畫導航系統

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

（2）網絡廣告

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

（3）組件的使用

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

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

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

2.3 Flash網站的優缺點

（1）優點

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

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

（2）缺點

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

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

2 基于AS的網站用戶登錄程序

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

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

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

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

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

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

Submit.addEventListener（MouseEvent.CLICK，LoginAction）；

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

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）；

／／偵聽“取消”按鈕的鼠標單擊事件，當事件發生時調用ResetAction（）函數清空輸入文本框中的內容

function ResetAction（event：MouseEvent）：void｛

User.text＝＂＂； ／／清空User輸入文本框中的內容

PassWord.text＝＂＂； ／／清空PassWord輸入文本框中的內容

｝

3 結束語

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