第5章　制作交互動(dòng)畫

第5章制作交互動(dòng)畫動(dòng)作腳本基礎(chǔ)5.1音頻視頻控制5.2組件5.3項(xiàng)目實(shí)例：成果展示5.4Flash與其他動(dòng)畫制作軟件相比，最大的特點(diǎn)就是具有強(qiáng)大的交互性。動(dòng)畫制作者可以使用動(dòng)作腳本（ActionScript）向影片添加交互性動(dòng)作，使用戶還能夠參與到動(dòng)畫中，自由控制動(dòng)畫。所以掌握動(dòng)作腳本的使用方法是制作交互動(dòng)畫的前提，本章就帶領(lǐng)大家學(xué)習(xí)動(dòng)作腳本的基礎(chǔ)知識(shí)和常用動(dòng)作的使用。5.1動(dòng)作腳本基礎(chǔ)FlashCS3包含多個(gè)ActionScript版本，以滿足各類開發(fā)人員和回放硬件的需要；并且有多種將其合并到FLA文件中的方法，因此也有多條學(xué)習(xí)ActionScript的途徑。ActionScript2.0比ActionScript3.0更容易學(xué)習(xí)。盡管FlashPlayer運(yùn)行編譯后的ActionScript2.0代碼比運(yùn)行編譯后的ActionScript3.0代碼的速度慢，但ActionScript2.0對(duì)于許多計(jì)算量不大的項(xiàng)目仍然十分有用；例如，更面向設(shè)計(jì)的內(nèi)容，更容易被初學(xué)者掌握。所以本教材我們采用ActionScript2.0版本來編寫腳本動(dòng)作。5.1.1動(dòng)作腳本概述在FlashCS3中只有影片剪輯、按鈕和幀可以響應(yīng)動(dòng)作。前二者是用戶與Flash交互的基礎(chǔ)；后者可以控制Flash動(dòng)畫的播放。選擇“窗口”→“動(dòng)作”命令，或按F9快捷鍵，將顯示動(dòng)作面板。它可以完成所有ActionScript腳本語言的編寫。圖5.1所示為FlashCS3動(dòng)作面板的標(biāo)準(zhǔn)模式，適合于初級(jí)用戶或制作簡單的交互。FlashCS3還可以使用專家模式的動(dòng)作面板，適合于熟悉ActionScript腳本語言的用戶制作復(fù)雜的交互動(dòng)畫，如圖5.2所示。

圖5.1FlashCS3標(biāo)準(zhǔn)模式動(dòng)作面板的功能圖5.2FlashCS3專家模式動(dòng)作面板的功能5.1.2旋轉(zhuǎn)圖標(biāo)的控制本實(shí)例利用腳本動(dòng)作“play”和“stop”語句控制旋轉(zhuǎn)圖標(biāo)的播放和停止，效果如圖5.3所示。圖5.3旋轉(zhuǎn)圖標(biāo)

運(yùn)行效果5.1.3電子時(shí)鐘本實(shí)例制作的是一個(gè)動(dòng)態(tài)Flash時(shí)鐘，它通過鏈接所在計(jì)算機(jī)的日期，并與其同步，來實(shí)現(xiàn)時(shí)間的顯示，效果如圖5.18所示。圖5.18電子時(shí)鐘效果圖5.1.4瀏覽相冊(cè)本實(shí)例制作的是一個(gè)交互的相冊(cè)瀏覽器，當(dāng)用戶單擊不同的按鈕時(shí)，可以播放相應(yīng)的相冊(cè)，效果如圖5.30所示。圖5.30瀏覽相冊(cè)效果圖5.1.5制作鼠標(biāo)跟隨效果本實(shí)例制作的是一個(gè)動(dòng)態(tài)的鼠標(biāo)跟隨效果，當(dāng)鼠標(biāo)在畫面上移動(dòng)時(shí)，可以產(chǎn)生一串星星的旋轉(zhuǎn)及擴(kuò)散效果，如圖5.48所示。

圖5.48鼠標(biāo)跟隨效果圖5.1.6制作隨機(jī)雪花紛飛效果本實(shí)例利用腳本程序來制作隨機(jī)雪花飄落的效果，背景上的雪花位置和大小是隨機(jī)出現(xiàn)的，如圖5.54所示。

圖5.54隨機(jī)雪花效果圖5.2音頻視頻控制在Flash中，可以為不同的影片添加聲音和視頻。通過添加這些元素，可以使創(chuàng)建的影片更加豐富多彩。聲音元素的主要作用表現(xiàn)在兩方面：一是通過語音，對(duì)畫面的內(nèi)容進(jìn)行輔助說明；二是通過背景音樂，對(duì)畫面內(nèi)容起到烘托作用。也可以將制作好的影片剪輯和視頻文件導(dǎo)入到動(dòng)畫中。5.2.1音頻概述在Flash中，用戶既可以導(dǎo)入外部聲音文件，也可以使用共享庫中的聲音文件。導(dǎo)入后的音頻文件，可以獨(dú)立于時(shí)間軸連續(xù)播放，也能夠和動(dòng)畫同步播放。按鈕在添加了聲音后，會(huì)更具互動(dòng)性。此外，通過設(shè)置壓縮選項(xiàng)可以控制導(dǎo)出的SWF文件中聲音的品質(zhì)和大小，還可以使用行為來加載和控制聲音的回放。5.2.2為按鈕添加聲音本實(shí)例利用共享庫中的聲音，為按鈕添加聲音，當(dāng)單擊“播放”或“停止”按鈕時(shí)，會(huì)觸發(fā)相應(yīng)的聲響。5.2.3制作背景音樂在Flash中可以導(dǎo)入WAV、MP3等多種格式的聲音文件。當(dāng)聲音導(dǎo)入到文檔后，將與位圖、元件一起保存在“庫”面板中，因此和使用元件一樣，只需要一個(gè)聲音文件的副本，就可以在影片中以各種方式使用該聲音。該實(shí)例為制作的是為影片添加背景音樂。5.2.4視頻概述Flash提供了多種在Flash文檔中加入視頻的方法：可以將MOV、AVI、MPEG或其他格式的視頻剪輯導(dǎo)入為Flash中的嵌入文件；還可以將QuickTime格式的視頻剪輯導(dǎo)入為鏈接文件。鏈接的視頻文件不會(huì)成為Flash文檔的一部分，而是在Flash文檔中保留指向鏈接文件的指針。5.2.5制作視頻播放器本實(shí)例通過導(dǎo)入外部的視頻文件，利用按鈕去控制視頻文件的播放、暫停、快進(jìn)、快退和停止播放，效果如圖5.65所示。圖5.65視頻播放器效果圖5.3組件FlashCS3是標(biāo)準(zhǔn)的創(chuàng)作工具，使用它們制作出的Web內(nèi)容極富感染力。組件是提供此類感受的“豐富Internet應(yīng)用程序”的構(gòu)建塊。組件就是影片剪輯，其中的參數(shù)由用戶在Flash中創(chuàng)作時(shí)進(jìn)行設(shè)置，其中的ActionScript方法、屬性和事件可供用戶在運(yùn)行時(shí)自定義組件。設(shè)計(jì)這些組件的目的是為了讓開發(fā)人員重復(fù)使用和共享代碼，以及封裝復(fù)雜功能，使設(shè)計(jì)人員無需編寫ActionScript就能夠使用和自定義這些功能。5.3.1組件概述FlashCS3組件是帶參數(shù)的影片剪輯，用戶可以修改它們的外觀和行為。組件既可以是簡單的用戶界面控件（例如，單選按鈕或復(fù)選框），也可以包含內(nèi)容（例如，滾動(dòng)窗格）；組件還可以是不可視的（例如FocusManager，它允許用戶控制應(yīng)用程序中獲得焦點(diǎn)的對(duì)象）。使用組件，即使對(duì)ActionScript沒有深入的理解，用戶也可以構(gòu)建復(fù)雜的Flash應(yīng)用程序，不必創(chuàng)建自定義按鈕、組合框和列表，將這些組件從“組件”面板按住鼠標(biāo)左鍵拖動(dòng)到應(yīng)用程序中即可為應(yīng)用程序添加功能。用戶還可以方便地自定義組件的外觀，從而滿足其設(shè)計(jì)需求。5.3.2制作留言板本實(shí)例利用FlashCS3提供的UserInterface(即用戶界面，簡稱UI組件)下的TextInput、RadioButton、TextArea、Button等組件制作一個(gè)用戶留言板的前臺(tái)界面，如圖5.76所示。圖5.76留言板效果圖5.3.3制作滾動(dòng)文本本實(shí)例利用FlashCS3提供的UI組件下的UIScrollBar組件制作一個(gè)文本滾動(dòng)器，用戶可以通過單擊滾動(dòng)箭頭或拖動(dòng)滾動(dòng)滑塊來閱讀文本，如圖5.84所示。圖5.84滾動(dòng)文本效果圖5.4項(xiàng)目實(shí)例：成果展示在制作一些項(xiàng)目較大的Flash影片，往往需要一個(gè)團(tuán)隊(duì)協(xié)同合作，每人完成其中一部分任務(wù)，最后再進(jìn)行合成。而加載外部