基于Flash平臺(tái)的動(dòng)畫控制組件的設(shè)計(jì)與開發(fā)

摘 要：組件是帶參數(shù)的影片剪輯，開發(fā)者通過自定義組件，可以實(shí)現(xiàn)代碼重用，并且設(shè)計(jì)人員只需會(huì)使用組件而不需要知道組件是如何開發(fā)的。文章基于Flash平臺(tái)，利用ActionScript3.0腳本語言，通過創(chuàng)建動(dòng)畫控制組件詳細(xì)闡述了自定義組件的設(shè)計(jì)與開發(fā)過程，對(duì)課件制作者具有很好的現(xiàn)實(shí)指導(dǎo)意義。

關(guān)鍵詞：動(dòng)畫控制組件；Flash平臺(tái)；ActionScript3.0腳本語言

中圖分類號(hào)：TP311.56文獻(xiàn)標(biāo)識(shí)碼：B 文章編號(hào)：1673-8454（2011）02-0046-02

Flash課件制作已成為教師、多媒體設(shè)計(jì)師等從業(yè)者必須掌握的技能。在制作Flash課件時(shí)，經(jīng)常需要采用動(dòng)畫來描繪真實(shí)場(chǎng)景，從而提高教學(xué)效果。對(duì)于很多教師來說，F(xiàn)lash動(dòng)畫很容易學(xué)會(huì)，但對(duì)動(dòng)畫的控制需要編寫代碼，相對(duì)來說就非常困難；有些教師雖然懂得代碼編寫，但是每次控制動(dòng)畫時(shí)都需要重新編寫代碼，不能實(shí)現(xiàn)代碼重用。如果將動(dòng)畫的控制功能開發(fā)為一個(gè)組件，則可以實(shí)現(xiàn)代碼重用，并且操作者只需會(huì)使用組件而不需要知道組件是如何開發(fā)的。

在當(dāng)前Flash軟件的“組件”面板中沒有動(dòng)畫控制組件，本文正是基于上述想法將動(dòng)畫的控制功能定義成單獨(dú)的組件形式，以供隨時(shí)使用。這樣，教師就不需要理解組件是怎么執(zhí)行的，只需要知道組件怎么使用就可以了，并且教師不需要重復(fù)編寫同樣的代碼了。

一、關(guān)于組件

組件是帶有參數(shù)的影片剪輯，這些參數(shù)可以用來修改組件的外觀和行為。每個(gè)組件都有預(yù)定義的參數(shù)，并且它們可以被設(shè)置。Flash中包含的組件不是 FLA 文件，而是 SWC 文件。SWC 是用于組件的文件格式。庫項(xiàng)目中的電影剪輯可以被預(yù)編譯成SWC文件，這樣可以縮短影片測(cè)試和發(fā)布的執(zhí)行時(shí)間。

組件使應(yīng)用程序的設(shè)計(jì)過程和編碼過程分開。通過組件，可以實(shí)現(xiàn)代碼重用，既可以重復(fù)使用自己創(chuàng)建的代碼，也可以通過下載并安裝其他開發(fā)人員創(chuàng)建的組件來重復(fù)使用別人的代碼。通過使用組件，代碼編寫者可以創(chuàng)建設(shè)計(jì)人員在應(yīng)用程序中能用到的功能。開發(fā)人員將常用功能封裝在組件中，設(shè)計(jì)人員只需在Flash中打開“組件檢查器”，更改設(shè)定參數(shù)就可以自定義組件的外觀和行為。使用組件避免了不必要的重復(fù)勞動(dòng)，而且使程序結(jié)構(gòu)更清晰，更為重要的是，設(shè)計(jì)人員使用組件，不必關(guān)心組件是如何工作的。

二、動(dòng)畫控制組件的設(shè)計(jì)與開發(fā)

本文基于Flash平臺(tái)，利用ActionScript3.0腳本語言設(shè)計(jì)并開發(fā)了一個(gè)動(dòng)畫控制組件。

1.動(dòng)畫控制組件的界面設(shè)計(jì)

界面主要由視頻播放區(qū)域、播放/暫停按鈕、當(dāng)前進(jìn)度顯示、播放進(jìn)度條、視頻總長度顯示、音量控制按鈕組成，如圖1所示。

2.動(dòng)畫控制組件的功能設(shè)計(jì)

動(dòng)畫控制組件主要用于控制Flash動(dòng)畫，方便教師教學(xué)演示和控制，主要是播放、暫停、進(jìn)度條拖動(dòng)、聲音控制和顯示播放時(shí)間等。左邊的按鈕用來控制動(dòng)畫的播放和暫停；中間時(shí)間軸上面的滑塊可以拖動(dòng)以實(shí)現(xiàn)動(dòng)畫播放進(jìn)度的改變，鼠標(biāo)放置在滑塊上會(huì)出現(xiàn)動(dòng)畫播放的當(dāng)前幀數(shù)和動(dòng)畫總幀數(shù)的顯示信息；最右邊可以通過上下拖動(dòng)控制滑塊改變音量的大小。

3.動(dòng)畫控制組件的開發(fā)

（1）項(xiàng)目創(chuàng)建。Flash CS4使用項(xiàng)目開發(fā)機(jī)制，定義自己的項(xiàng)目并取相應(yīng)的名稱以標(biāo)示。

（2）創(chuàng)建FLA文檔。創(chuàng)建相應(yīng)的FLA文檔，F(xiàn)LA文檔用于具體項(xiàng)目開發(fā)時(shí)界面元素的設(shè)計(jì)、定義，并有利于項(xiàng)目的保存與修改。

（3）新建影片剪輯。組件就是帶有參數(shù)的影片剪輯。新建影片剪輯并命名，影片剪輯中共有兩幀，第一幀里面放了一個(gè)占位符(占位符，就是用戶最終觀察成品時(shí)界面元素都只能在這個(gè)范圍內(nèi)顯示)，第二幀里面放有組件開發(fā)所需要的資源，如界面按鈕、文本框、進(jìn)度條等。

（4）綁定組件類到影片剪輯。在項(xiàng)目面板中創(chuàng)建組件類，為組件類命名SwfCtrl并將組件類綁定到步驟3中定義的影片剪輯。如圖4所示。

（5）編寫組件類SwfCtrl。在步驟4打開的.as文件中編寫SwfCtrl類的代碼，包括變量的聲明及初始化，各控制功能如播放、暫停、進(jìn)度條拖動(dòng)、聲音控制和顯示播放時(shí)間等代碼的編寫。

（6）代碼調(diào)試修改。項(xiàng)目開發(fā)中代碼一次性完成是不可能的，開發(fā)人員必須經(jīng)過多次調(diào)試才能夠?qū)Υa的結(jié)構(gòu)、效果有一定的把握，開發(fā)過程中這一步工作就是不斷地調(diào)試、修改自己的代碼，以達(dá)到結(jié)構(gòu)清晰、功能完善的目的。

（7）定義組件參數(shù)。鼠標(biāo)右擊步驟3中定義的影片剪輯，選擇“組件定義”菜單，彈出組件定義面板。在組件定義面板中對(duì)組件參數(shù)進(jìn)行定義和修改，通過點(diǎn)擊+、-按鈕可以添加、刪除參數(shù)，還可以對(duì)參數(shù)的名稱、變量名、默認(rèn)值、類型等進(jìn)行定義。

（8）保存并導(dǎo)出組件。在保存完FLA文檔和類文件之后，鼠標(biāo)右擊步驟3中定義的影片剪輯，選擇“導(dǎo)出SWC文件”菜單，設(shè)置保存路徑確定即可。

4.組件的安裝和使用

組件的安裝比較簡單，只需將上述導(dǎo)出的SWC文件復(fù)制到Flash的組件目錄“C:\\Documents and Settings\\Administrator\\Local Settings\\Application Data\\Adobe\\Flash CS4\\zh_CN\\Configuration”，復(fù)制完成后，重新啟動(dòng)Flash軟件，新創(chuàng)建的組件便會(huì)出現(xiàn)在Flash軟件的“組件”面板中。

組件的使用：從“組件”面板中將新創(chuàng)建的組件拖入舞臺(tái)，并在“組件檢查器”設(shè)置相關(guān)參數(shù)即可使用。

結(jié)束語

本文通過創(chuàng)建一個(gè)動(dòng)畫控制組件詳細(xì)闡述了自定義組件的設(shè)計(jì)與開發(fā)過程，具有很好的現(xiàn)實(shí)應(yīng)用意義。另外，系統(tǒng)在開發(fā)過程中還存在一些不足之處，如對(duì)動(dòng)畫的控制目前只支持單層影片剪輯，對(duì)影片剪輯中嵌套影片剪輯的動(dòng)畫無法控制；組件外觀樣式比較單一等，需要在下一步工作中做進(jìn)一步的研究。

（編輯：魯利瑞）