網(wǎng)頁設計與制作第九章

1、網(wǎng)頁設計與制作學時：60學時第九章 網(wǎng)頁動畫制作工具Flash CS4了解：了解熟悉Flash CS4軟件的特點; 了解Flash CS4中各種動畫的區(qū)別。熟練掌握：掌握Flash CS4的基本操作； 掌握Flash CS4基本動畫的制作。掌握：掌握Flash CS4動畫的優(yōu)化和輸出，掌握Flash CS4中腳本的編寫方式。第一節(jié) Flash CS4的工作界面工具箱舞臺工具面板菜單欄時間軸面板屬性面板場景一、舞臺一、舞臺Flash中所有的動畫對象，都需要在舞臺上表現(xiàn)出來。用戶可以在其中繪制和放置動畫內(nèi)容。只有在該區(qū)域中的內(nèi)容才會被導出。任何時候，用戶在舞臺上看到的內(nèi)容都代表當前幀的內(nèi)容。二、工

2、具箱二、工具箱使用工具箱中的工具可以進行繪圖、填充、選擇和修改插圖等操作，并可以更改舞臺的視圖。工具區(qū)域視圖區(qū)域顏色區(qū)域選項區(qū)域三、時間軸三、時間軸時間軸是處理層和幀的地方。層幀四、場景四、場景場景主要用于組織動畫內(nèi)容，即用戶可以根據(jù)動畫的內(nèi)容進行場景的編排，F(xiàn)lash可以根據(jù)場景的前后順序播放動畫，這類似于電影拍攝中所使用到的場景概念。五、屬性面板五、屬性面板屬性面板是Flash軟件中重要且使用率很高的面板之一，它在默認狀態(tài)下顯示當前文檔屬性，如大小、背景顏色、幀頻等。在編輯過程中，如果選擇了某個對象，屬性面板中會顯示該對象屬性。六、常用面板六、常用面板（一）“對齊”面板（二）“顏色”面板和

3、“樣本”面板（三）“動作”面板第二節(jié) FlashCS4的基礎操作一、新建文檔和設置文檔屬性一、新建文檔和設置文檔屬性（一）新建文檔新建文檔的方法有以下兩種：執(zhí)行“文檔”“新建”命令，打開“新建文檔”對話框，從中選擇“Flash文件”選項，單擊“確定”按鈕即可。在啟動FlashCS4后，出現(xiàn)的歡迎屏幕界面中選擇“創(chuàng)建新項目”“Flash文件” 。一、新建文檔和設置文檔屬性（二）保存文檔保存文檔執(zhí)行“文檔”“ 保存”命令，打開彈出的“保存”對話框中，設置保存的名稱，單擊“保存”按鈕即可。此時保存的文件擴展名為“fla”，即Flash的源文件格式。（或按Ctrl+S組合鍵）一、新建文檔和設置文檔屬性

4、（三）設置文檔屬性要設置文檔屬性，可以在新建文檔并進入編輯窗口后，執(zhí)行“修改”“文檔”命令（或按Ctrl+J組合鍵），或在屬性面板中單擊“編輯”按鈕，打開“文檔屬性”對話框,在“文檔屬性”對話框中，可以設置動畫的尺寸、背景色及幀速。二、外部對象的導入二、外部對象的導入（一）導入圖像在FlashCS4中可以導入多種格式的圖像。這里的圖像主要是指外部的位圖圖像。執(zhí)行“文檔”“導入”命令，打開“導入”對話框，選擇需要導入的位圖后，單擊“導入”按鈕，即可導入。FlashCS4可以導入的位圖圖像格式有.jpg、.gif、.bmp、.png等。從圖9-13中的紅色標二、外部對象的導入（二）導入聲音Flas

5、hCS4中可以導入的聲音格式主要有.wav和.mp3。其中.mp3是動畫中最常使用的聲音格式。執(zhí)行“文檔”“導入”命令，打開“導入”對話框，選擇需要導入的聲音文件后，單擊“導入”按鈕，即可導入。二、外部對象的導入（三）導入視頻文件如果系統(tǒng)安裝了適用于AppleMacintosh的QuickTime 7、Windows的QuickTime 6.5或安裝了DirectX 9或更高版本（僅限Windows），則可以導入多種格式的視頻剪輯，包括mov、avi、wmv和mpg/mpeg等格式。執(zhí)行“文檔”“導入”命令，打開“導入視頻”對話框，選擇需要導入的視頻，單擊“導入”按鈕，即可導入。三、動畫的預覽

6、測試與發(fā)布三、動畫的預覽測試與發(fā)布（一）預覽動畫執(zhí)行“控制”“測試影片”命令或按Ctrl+Enter組合鍵，可以打開Flash Player播放器對動畫進行即時瀏覽與測試。（二）動畫發(fā)布執(zhí)行“文檔”“發(fā)布設置”命令，在打開的“發(fā)布設置”對話框中，對動畫進行發(fā)布格式的設置。設置完畢后，可以直接在“發(fā)布設置”對話框中單擊“發(fā)布”按鈕來發(fā)布動畫。第三節(jié) 圖形的創(chuàng)建與編輯一、繪圖工具一、繪圖工具（一）線條工具線條工具 用于繪制直線。選擇線條工具后，將鼠標指針移到舞臺上，拖動鼠標即可。（二）鉛筆工具鉛筆工具 用于繪制隨意形狀的線條。（三）鋼筆工具使用鋼筆工具 可繪制任意形狀的圖形。（四）矩形工具和橢圓工

7、具選擇矩形工具或橢圓工具，然后在舞臺中拖動鼠標進行繪制即可。 （五）多角星形工具使用多角星形工具 ，可以繪制多邊形和星形。二、筆觸和填充設置二、筆觸和填充設置1、使用漸變色填充使用漸變色填充，就是使用兩種以上的顏色，實現(xiàn)顏色過渡，對對象進行填色。2、使用位圖填充使用位圖為圖形進行填充的操作為：執(zhí)行“文件”“導入”命令，選擇外部一幅位圖，然后執(zhí)行“窗口”“顏色”命令，在“顏色”面板的“類型”下拉列表框中選擇“位圖”選項，即可為對象進行位圖填充（一）漸變色和位圖填充在Flash中可以使用純色、漸變色和位圖對圖形進行填充。使用純色填充，就是使用單獨的一種顏色為圖形進行填充，如紅色、黑色等。二、筆觸和

8、填充設置（二）填充效果的修改按住任意變形工具右下角的下拉按鈕，可選擇“填充變形”工具 來調(diào)整填充的大小、方向和中心，使?jié)u變填充或位圖填充變形。 選擇填充變形工具后，填充圖形上便會顯示一個帶有控制手柄的邊框。當將鼠標指針移到某個手柄上，會顯示該手柄的功能。各控制手柄的功能如圖。中心點寬度大小旋轉(zhuǎn)二、筆觸和填充設置（三）修改筆觸顏色為矩形、圓形等矢量圖形的進行描邊，可以選擇墨水瓶工具 ，然后在圖形邊緣單擊即可。使用墨水瓶工具可以更改線條顏色或為對象添加描邊。對直線和形狀只能應用純色，而不能應用漸變或位圖。二、筆觸和填充設置（四）填充圖形使用顏料桶工具 可以用顏色填充空白區(qū)域或者更改已填充區(qū)域的顏色

9、。在工具箱中選擇顏料桶工具后，可以在工具箱下方的選項區(qū)中選擇空隙大小，單擊“空隙大小”選項，然后選擇一個空隙大小選項，該選項的主要作用是當填充顏色時，F(xiàn)lash將忽略所繪制對象的空隙，如圖。二、筆觸和填充設置（五）復制填充和筆觸使用滴管工具 可以從一個對象復制筆觸和填充屬性，然后將它們應用到其他對象。滴管工具還允許用戶將位圖圖像取樣作為填充。1、復制和應用筆觸選擇滴管工具，然后單擊要復制的筆觸，此時鼠標指針自動變成墨水瓶工具的指針形狀，然后單擊其他筆觸或已填充區(qū)域應用復制的筆觸或填充。2、鎖定漸變色或位圖填充選擇刷子工具或者顏料桶工具，然后選擇作為填充的漸變或位圖，對圖形進行填充。再選擇滴管工

10、具，在填充區(qū)域單擊，此時鼠標變成一個帶鎖的油漆桶形狀。然后移到其他區(qū)域進行單擊，將其他對象填充成相同的效果。三、圖形的編輯三、圖形的編輯（一）Flash中矢量對象的組成特點Flash中的矢量對象的組成與一般的矢量繪圖或動畫制作軟件不同。在Flash中，矢量對象的筆觸和填充是分離的，如圖。三、圖形的編輯（二）選取舞臺上的全部對象選取舞臺上的全部圖形可以使用以下兩種操作步驟：執(zhí)行“編輯”“全選”命令或按Ctrl+A組合鍵。使用工具箱中的指針工具 ，對所有對象進行框選。在框選時要注意，指針工具所拉出的選框必須完全框住所有對象。三、圖形的編輯（三）選取對象的局部在Flash中對圖形的局部進行選取，有以

11、下幾種方法：選擇指針工具 ，然后拖動鼠標，繪制出一個選框，選框中包含要選取圖形的一部分。釋放鼠標左鍵，即可選中框住的部分。使用套索工具 和多邊形套索工具 ，可以選擇圖形的不規(guī)則區(qū)域。使用魔棒工具 ，可以選取圖形中相同顏色的不連續(xù)區(qū)域。三、圖形的編輯（四）群組及解散群組對象組成群組的方法是，將舞臺需要組合在一起的對象全都選中，然后執(zhí)行“修改”“組合”命令或按Ctrl+G組合鍵即可。對于已群組后的對象，可以使用部分選取工具 對群組中的某個對象進行選取，然后將其從群組中分離出來，單獨進行編輯。如果要將群組對象解散，只需先使用指針工具將目標群組對象選中，然后執(zhí)行“修改”“解散組合”命令或CtrlShi

12、ftG組合鍵即可。三、圖形的編輯（五）圖形的縮放在Flash CS4中可以使用任意變形工具 對選擇的對象進行縮放、旋轉(zhuǎn)、壓縮、伸展或傾斜線條和改變形狀等操作。選擇“任意變形”工具，單擊對象，對象周圍出現(xiàn)一個黑色的控制框，如圖。三、圖形的編輯（六）調(diào)整圖形的外觀選擇指針工具，將鼠標指針移動到圖形的邊緣時，鼠標指針變成 形狀，此時拖動鼠標就可以將直線變形曲線；如果將鼠標指針移動到圖形的邊角時，會變成 形狀，拖動鼠標可以拖放圖形的邊角，改變圖形的形狀；當鼠標指針變成 形狀時，按下Ctrl鍵，可以添加一個角。使用任意變形工具選項區(qū)內(nèi)的扭曲工具 對選擇的對象進行任意的扭曲操作，；使用封套工具 對選擇的對

13、象進行復雜的扭曲操作。第四節(jié) 創(chuàng)建文本一、Flash CS4中的文本類型一、Flash CS4中的文本類型Flash CS4為用戶提供了靜態(tài)文本、動態(tài)文本和輸入文本3種文本類型。靜態(tài)文本用于一般的文本，如文檔中的標題、標簽或其他普通文本內(nèi)容。動態(tài)文本用于顯示根據(jù)用戶指定的條件而變化的文本。例如，可以使用動態(tài)文本來添加存儲在其他文本中的值（如兩個數(shù)字的和）。輸入文本允許用戶與Flash應用程序進行交互，例如，在表單中輸入其姓名或其他信息。二、創(chuàng)建文本二、創(chuàng)建文本選擇文本工具 后，在舞臺中單擊，在出現(xiàn)的文本框直接輸入文本即可。輸入的文本沒有寬度限制，也就是說，文本有多長文本框就會延伸多長，不能自動

14、換行，因此不適合輸入大段文本。要輸入大段文本，在選擇文本工具后，鼠標指針變?yōu)?形狀時，在舞臺上拖出一個文本框，然后再將鼠標指針移入該框內(nèi)單擊，輸入大段文本，此時文本有了寬度限制，就可以實現(xiàn)自動換行。三、設置文字屬性三、設置文字屬性創(chuàng)建了文本后，可以通過屬性面板對舞臺上選中的文本的屬性，如字體、顏色、樣式等進行設置。第五節(jié) Flash動畫基礎一、圖層與幀一、圖層與幀（一）圖層Flash中的圖層主要有3種類型，即普通圖層、引導圖層和遮罩圖層。普通圖層主要用于放置動畫對象，如圖形、元件、文字、視頻等，F(xiàn)lash中使用圖層來管理動畫中的對象，因此，在動畫制作過程中，要將各個對象分別放到各個圖層，讓這些

15、對象不會相互影響，便于動畫的創(chuàng)作效率與日后的修改。在時間軸的圖層區(qū)中，它引導下方圖層中的對象按照本圖層繪制的路徑運動，但路徑并不會出現(xiàn)在最終效果中。在遮罩圖層中創(chuàng)建的對象具有透明效果，被遮罩圖層中相同位置的內(nèi)容將顯示出來，其他部分則被遮蓋。一、圖層與幀（二）幀幀是動畫中的基本元素，F(xiàn)lash動畫是由幀構(gòu)成的。幀有普通幀、關鍵幀和空白關鍵幀3種類型。關鍵幀普通幀空白關鍵幀二、元件與實例二、元件與實例元件有三種類型分別為“影片剪輯”、“圖形”和按鈕，作用如下：“影片剪輯”：可以在“影片剪輯”元件中制作一段動畫。將該元件放在主場景中應用后，主場景動畫在播放的同時，“影片剪輯”元件內(nèi)的動畫也將播放，除

16、此之外，“影片剪輯”元件也是制作ActionScript動畫主要的對象?！鞍粹o”，該類型是將對象轉(zhuǎn)成按鈕，用于響應鼠標。 “圖形”，該類型的元件，一般用于制作反復使用的靜態(tài)對象。將元件從庫中取出，拖放到舞臺上，就生成了該元件的一個實例，作為元件的引用。第六節(jié) 動畫制作一、逐幀動畫一、逐幀動畫逐幀動畫是指將動畫的所有內(nèi)容一幀一幀地逐步制作出來，這也是最原始的動畫表現(xiàn)形式和制作方法。通過對每一幀上對象的顏色、形狀、大小、數(shù)量等進行編輯，來完成動畫。缺點是生成的文件體積大。逐幀動畫實例揮動翅膀的蜻蜓二、補間動畫二、補間動畫（一）形狀補間動畫形狀補間動畫是指形狀逐漸發(fā)生變化的動畫。主要是通過改變首尾兩

17、幀上對象的外部形狀，也可改變對象的位置、尺寸、顏色等來產(chǎn)生動畫。形狀補間動畫的制作要點是，首尾幀上的對象必須是分離的矢量圖形，如果是文字或位圖，必須先執(zhí)行“修改”“分離”命令或按Ctrl+B組合鍵進行分離后，才能制作形狀補間動畫。形狀補間動畫實例旋轉(zhuǎn)立方體動畫二、補間動畫（二）動作補間動畫動作補間動畫也稱為運動動畫，可以制作出位置移動、縮放和旋轉(zhuǎn)等動畫效果。它適用于文字、位圖和實例，對于被打散的對象不能直接設置動畫補間，需要將其轉(zhuǎn)換為元件或組合后才能產(chǎn)生動畫效果。通過確認首尾兩幀上的對象狀態(tài)，中間的運動過程不需要手動設置，F(xiàn)lash自動完成。動作補間動畫實例跑馬燈動畫三、路徑引導動畫三、路徑引

18、導動畫對象的運動過程不僅可以按直線方向運動，還按照指定的路徑運動，可以使對象沿不規(guī)則路徑運動的動畫，就是路徑引導動畫。路徑引導動畫實例氣泡效果四、制作遮罩動畫四、制作遮罩動畫遮罩動畫的制作就是建立遮罩圖層，在該圖層上繪制圖形，以確定顯示的形狀，顯示的內(nèi)容則由它下面的圖層提供，即被遮罩層，只有被遮罩圖層的對象上被遮罩層上圖形遮蔽的部分才能顯示出來。遮罩動畫實例流邊汽車第七節(jié) 聲音的應用一、為動畫添加聲音一、為動畫添加聲音為動畫添加聲音的操作步驟如下：（1）用鼠標拖動聲音文件到場景中。需要注意的是，添加聲音后，場景中并無任何變化，此時在時間軸中只能看到一點聲音波形圖，當在時間軸中插入幀后，時間軸中才可以看到聲音的波形曲線。圖9-73 為動畫添加聲音（2）繼續(xù)在時間軸中插入幀，直到聲音結(jié)束為止。按Ctrl