網(wǎng)頁設(shè)計(jì)與制作第九章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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