《多媒體技術(shù)與應(yīng)用》第5章：二維動(dòng)畫制作技術(shù)課件

第五章二維動(dòng)畫制作技術(shù)本章主要介紹Flash軟件的特點(diǎn)和Flash8的基本操作方法；借助實(shí)例講解最常見的幾種動(dòng)畫的制作方法。第五章二維動(dòng)畫制作技術(shù)1第五章二維動(dòng)畫制作技術(shù)5.1Flash軟件的特點(diǎn)5.2Flash8的工作環(huán)境5.3逐幀動(dòng)畫的制作5.4動(dòng)作補(bǔ)間動(dòng)畫的制作5.5形狀補(bǔ)間動(dòng)畫制作5.6特殊層動(dòng)畫制作5.7本章小結(jié)第五章二維動(dòng)畫制作技術(shù)5.1Flash軟件的特點(diǎn)25.1Flash軟件的特點(diǎn)Flash軟件的發(fā)展Flash的前身是FutureSplash（Flash1），1996年被MSN全面使用；美國Macromedia公司收購了FutureSplash，改名為：Flash；到目前為止Flash已經(jīng)發(fā)展到8.0版，F(xiàn)lash已經(jīng)成為互聯(lián)網(wǎng)多媒體動(dòng)畫制作的主要工具。人們把善于使用Flash的網(wǎng)友冠以響亮地名字：“閃客”。5.1Flash軟件的特點(diǎn)Flash軟件的發(fā)展35.1Flash軟件的特點(diǎn)（續(xù)）Flash軟件的特點(diǎn)：1、矢量圖形系統(tǒng)：元素都是用矢量來描繪。其占用的存儲(chǔ)空間很小，并且可以任意縮放尺寸而不影響圖形的質(zhì)量。2、流式播放技術(shù)：使得動(dòng)畫可以邊播放邊下載，而不必等到影片全部下載完成再觀看。3、減小文件大?。和ㄟ^使用關(guān)鍵幀和元件使得所生成的動(dòng)畫文件(.swf)非常小。4、Flash插件方式：用戶只要安裝“FlashPlayer”插件，就可以直接觀看Flash動(dòng)畫。另外，F(xiàn)lash還支持多種動(dòng)畫導(dǎo)出格式，如GIF等。5.1Flash軟件的特點(diǎn)（續(xù)）Flash軟件的特點(diǎn)：45.1Flash軟件的特點(diǎn)（續(xù)）Flash軟件的特點(diǎn)：5、引入多媒體技術(shù)：可以把音樂、動(dòng)畫、聲效、交互方式融合在一起，自Flash4.0開始支持MP3音樂格式。6、強(qiáng)大的交互功能：具有獨(dú)特的動(dòng)作腳本語句來實(shí)現(xiàn)交互，可以設(shè)計(jì)出具有復(fù)雜交互性和互動(dòng)性的動(dòng)畫，語句使用簡便。7、方便的播放測試：動(dòng)畫制作完成后，測試方便。8、與其他軟件的配合：與Dreamweaver和Fireworks組合形成著名的網(wǎng)頁制作三劍客。5.1Flash軟件的特點(diǎn)（續(xù)）Flash軟件的特點(diǎn)：55.2Flash8的工作環(huán)境圖5-2-1Flash8的操作界面5.2Flash8的工作環(huán)境圖5-2-1Flash65.2Flash8的工作環(huán)境（續(xù)）1、標(biāo)題欄顯示當(dāng)前文件的名字等，如當(dāng)前文件的名稱后面如果帶有“*”號(hào)，表明該文件尚未保存。2、菜單欄包括創(chuàng)建和編輯文檔時(shí)的常用命令，還有在編輯和控制動(dòng)畫對象時(shí)用到的一些特殊命令。3、繪圖工具箱包含所有繪圖工具（詳見教材），其位置可以調(diào)整。5.2Flash8的工作環(huán)境（續(xù)）1、標(biāo)題欄75.2Flash8的工作環(huán)境（續(xù)）4、時(shí)間軸面板用來進(jìn)行動(dòng)畫創(chuàng)作和編輯的主要工具，包括圖層控制區(qū)和時(shí)間控制區(qū)兩部分。圖層控制區(qū)用于組織比較復(fù)雜的動(dòng)畫，將不同的元素放在不同的圖層上分別進(jìn)行修改、編輯，而不會(huì)影響其他層中的對象。時(shí)間控制區(qū)用于控制動(dòng)畫發(fā)生的時(shí)間。5.2Flash8的工作環(huán)境（續(xù)）4、時(shí)間軸面板85.2Flash8的工作環(huán)境（續(xù)）5、場景工作區(qū)繪制圖形和編輯圖形、圖像的矩形區(qū)域，也是創(chuàng)建動(dòng)畫的區(qū)域。場景中的白色區(qū)域是場景的工作區(qū)，只有在場景工作區(qū)內(nèi)的對象才能夠顯示和打印出來。單擊場景工作區(qū)，可以顯示場景屬性面板。5.2Flash8的工作環(huán)境（續(xù)）5、場景工作區(qū)95.2Flash8的工作環(huán)境（續(xù)）6、浮動(dòng)面板點(diǎn)擊【窗口】菜單中的相應(yīng)命令打開對應(yīng)的浮動(dòng)面板?！盎焐鳌泵姘澹嚎梢赃x擇自己需要的顏色模式、合適的調(diào)配顏色?！皩傩浴泵姘澹弘S著當(dāng)前選擇對象而變化，用于設(shè)置所選對象的各項(xiàng)屬性信息。“庫”面板：用于存放可以反復(fù)使用的Flash動(dòng)畫文件，包括聲音、按鈕和動(dòng)畫等，5.2Flash8的工作環(huán)境（續(xù)）6、浮動(dòng)面板105.3逐幀動(dòng)畫的制作影片中的每一個(gè)畫面稱為一幀(Frame)，動(dòng)畫實(shí)際上是由若干靜止的幀組成的。只要確定動(dòng)畫對象在運(yùn)動(dòng)過程中的關(guān)鍵狀態(tài)，中間各幀的動(dòng)畫效果就會(huì)由Flash自動(dòng)計(jì)算得出。使對象發(fā)生改變的關(guān)鍵狀態(tài)稱為關(guān)鍵幀，與關(guān)鍵幀保持相同內(nèi)容的畫面稱為普通幀，由Flash自動(dòng)計(jì)算得出的位于關(guān)鍵幀之間的畫面稱為中間幀。5.3逐幀動(dòng)畫的制作影片中的每一個(gè)畫面稱為一幀(Frame115.3逐幀動(dòng)畫的制作（續(xù)）1、空白關(guān)鍵幀：表示尚未繪制畫面。2、關(guān)鍵幀：表示已經(jīng)繪制了畫面，隨后的灰色背景所在的單元格以及結(jié)束時(shí)帶黑框灰背景的單元格是普通幀。3、兩個(gè)關(guān)鍵幀：兩個(gè)關(guān)鍵幀可以繪制不同的畫面，關(guān)鍵幀之間的黑色箭頭灰背景的單元格是Flash自動(dòng)計(jì)算得出的畫面，即中間幀。圖5-3-1不同狀態(tài)的幀5.3逐幀動(dòng)畫的制作（續(xù)）1、空白關(guān)鍵幀：表示尚未繪制畫面125.3逐幀動(dòng)畫的制作（續(xù)）逐幀動(dòng)畫是由多個(gè)連續(xù)的關(guān)鍵幀組成的動(dòng)畫。逐幀動(dòng)畫的制作是先創(chuàng)建內(nèi)容完全相同的關(guān)鍵幀，再按照動(dòng)畫的發(fā)展編輯和修改每個(gè)關(guān)鍵幀，使相鄰關(guān)鍵幀中的內(nèi)容稍微有一些變化。逐幀動(dòng)畫適合于制作復(fù)雜的動(dòng)畫，但其制作比較麻煩，生成的動(dòng)畫文件比較大。5.3逐幀動(dòng)畫的制作（續(xù)）逐幀動(dòng)畫是由多個(gè)連續(xù)的關(guān)鍵幀組成135.3逐幀動(dòng)畫的制作（續(xù)）【實(shí)例5-3-1】草原上的豹子（詳細(xì)制作過程見教材）5.3逐幀動(dòng)畫的制作（續(xù)）【實(shí)例5-3-1】草原上的豹子145.4動(dòng)作補(bǔ)間動(dòng)畫的制作動(dòng)作補(bǔ)間動(dòng)畫是指在動(dòng)畫的播放過程中，場景中的一個(gè)對象產(chǎn)生位置、形狀、大小、顏色、透明度、旋轉(zhuǎn)角度等屬性的改變，從而產(chǎn)生動(dòng)態(tài)效果。動(dòng)作補(bǔ)間動(dòng)畫只是單一對象的動(dòng)畫，如果需要制作多個(gè)對象同時(shí)運(yùn)動(dòng)的效果，需要建立多個(gè)層，分別進(jìn)行設(shè)置。構(gòu)成動(dòng)作補(bǔ)間動(dòng)畫的元素應(yīng)該是元件，不能是形狀。5.4動(dòng)作補(bǔ)間動(dòng)畫的制作動(dòng)作補(bǔ)間動(dòng)畫是指在動(dòng)畫的播放過程中155.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）圖5-4-2動(dòng)作補(bǔ)間動(dòng)畫的屬性面板5.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）圖5-4-2動(dòng)作補(bǔ)間動(dòng)畫165.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【緩動(dòng)】選項(xiàng)：在-1到-100的負(fù)值之間，動(dòng)畫運(yùn)動(dòng)的速度從慢到快，朝運(yùn)動(dòng)結(jié)束的方向加速運(yùn)動(dòng)。在1到100的正值之間，動(dòng)畫運(yùn)動(dòng)的速度從快到慢，朝運(yùn)動(dòng)結(jié)束的方向減慢運(yùn)動(dòng)。默認(rèn)情況下（0值），運(yùn)動(dòng)的速率是不變的。【旋轉(zhuǎn)】選項(xiàng)：【無】（默認(rèn)設(shè)置）：可禁止元件旋轉(zhuǎn)；【自動(dòng)】：可使元件在需要最小動(dòng)作的方向上旋轉(zhuǎn)對象一次；【順時(shí)針】或【逆時(shí)針】，并在后面輸入數(shù)字：可使元件在運(yùn)動(dòng)時(shí)順時(shí)針或逆時(shí)針旋轉(zhuǎn)相應(yīng)的圈數(shù)。5.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【緩動(dòng)】選項(xiàng)：175.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【調(diào)整到路徑】復(fù)選框：將補(bǔ)間元素的基線調(diào)整到運(yùn)動(dòng)路徑，此項(xiàng)功能主要用于引導(dǎo)線運(yùn)動(dòng)?！就健繌?fù)選框使圖形元件實(shí)例的動(dòng)畫和主時(shí)間軸同步?！緦R】選項(xiàng)可以根據(jù)其設(shè)定點(diǎn)將補(bǔ)間元素附加到運(yùn)動(dòng)路徑，此項(xiàng)功能主要用于引導(dǎo)線運(yùn)動(dòng)。5.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【調(diào)整到路徑】復(fù)選框：185.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【實(shí)例5-4-1】城市上空的飛機(jī)（詳細(xì)制作過程見教材）5.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【實(shí)例5-4-1】城市上空195.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【實(shí)例5-4-2】變換的文字（詳細(xì)制作過程見教材）5.4動(dòng)作補(bǔ)間動(dòng)畫的制作（續(xù)）【實(shí)例5-4-2】變換的文字205.5形狀補(bǔ)間動(dòng)畫制作形狀補(bǔ)間動(dòng)畫可以實(shí)現(xiàn)一個(gè)對象逐漸變化成另外一個(gè)對象，在變化的過程中也可以實(shí)現(xiàn)兩個(gè)對象之間顏色、大小、位置的相互變化，其變形的靈活性介于逐幀動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫二者之間。形狀補(bǔ)間主要針對圖形、打散的文字以及由導(dǎo)入的點(diǎn)位圖轉(zhuǎn)化而成的矢量圖。如果要對圖形元件、按鈕、文字進(jìn)行變形，則必須先執(zhí)行菜單【修改】|【分離】命令，將它們“打散”后才能創(chuàng)建變形動(dòng)畫。5.5形狀補(bǔ)間動(dòng)畫制作形狀補(bǔ)間動(dòng)畫可以實(shí)現(xiàn)一個(gè)對象逐漸變化215.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）設(shè)置兩個(gè)關(guān)鍵幀，其中分別放置變形前和變形后的對象，單擊開始幀，在【屬性】面板的【補(bǔ)間】中選擇【形狀】，完成形狀補(bǔ)間動(dòng)畫。當(dāng)建立了一個(gè)形狀補(bǔ)間動(dòng)畫后，單擊補(bǔ)間中的任意幀，此時(shí)【屬性】面板如圖5-5-2所示。5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）設(shè)置兩個(gè)關(guān)鍵幀，其中分別放置變225.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）圖5-5-2形狀補(bǔ)間動(dòng)畫的【屬性】面板5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）圖5-5-2形狀補(bǔ)間動(dòng)畫的【235.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）【緩動(dòng)】選項(xiàng)的功能與動(dòng)作補(bǔ)間動(dòng)畫相同?！净旌稀窟x項(xiàng)：角形：創(chuàng)建的動(dòng)畫中間形狀會(huì)保留有明顯的角和直線，適合于具有銳化轉(zhuǎn)角和直線的混合形狀。分布式：創(chuàng)建的動(dòng)畫中間形狀比較平滑和不規(guī)則。5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）【緩動(dòng)】選項(xiàng)的功能與動(dòng)作補(bǔ)間動(dòng)245.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）當(dāng)形狀補(bǔ)間前后圖形差異較大時(shí)，變形結(jié)果會(huì)顯得很亂，需要使用“形狀提示”進(jìn)行改善?！靶螤钐崾尽笔侵冈凇捌鹗夹螤睢焙汀敖Y(jié)束形狀”中添加相對應(yīng)的“參考點(diǎn)”，使Flash在計(jì)算變形過渡時(shí)依一定的規(guī)則進(jìn)行，從而較有效地控制變形過程。選中形狀補(bǔ)間動(dòng)畫的開始幀，執(zhí)行菜單【修改】|【形狀】|【添加形狀提示】命令，可以在開始幀和結(jié)束幀分別添加一個(gè)帶字母的紅色圓圈。用鼠標(biāo)左鍵分別拖動(dòng)兩個(gè)關(guān)鍵幀中的“提示圓圈”，放置在適當(dāng)位置。安放成功后開始幀上的“提示圓圈”變?yōu)辄S色，結(jié)束幀上的“提示圓圈”變?yōu)榫G色，安放不成功或兩個(gè)“提示圓圈”不在一條曲線上時(shí)，“提示圓圈”顏色仍為紅色。5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）當(dāng)形狀補(bǔ)間前后圖形差異較大時(shí)，255.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）使用“形狀提示”時(shí)應(yīng)該遵循以下原則：“形狀提示”可以最多能添加26個(gè)?！靶螤钐崾尽秉c(diǎn)從形狀的左上角開始按逆時(shí)針順序擺放，效果更好。開始和結(jié)束幀中“形狀提示”的擺放位置應(yīng)符合邏輯順序。“形狀提示”要在形狀的邊緣才能起作用，可以利用【繪圖工具箱】中的“吸咐開關(guān)”進(jìn)行自動(dòng)吸附。在復(fù)雜的變形動(dòng)畫中，最好創(chuàng)建中間幀，而不要只指定一個(gè)起始幀、一個(gè)結(jié)束幀。在制作復(fù)雜的變形動(dòng)畫時(shí)，“形狀提示”的添加和拖放要多方位嘗試和調(diào)整。5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）使用“形狀提示”時(shí)應(yīng)該遵循以下265.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）刪除所有的形狀提示，可執(zhí)行菜單【修改】|【形狀】|【刪除所有提示】命令。刪除單個(gè)形狀提示，可用鼠標(biāo)右鍵單擊它，在彈出菜單中選擇【刪除提示】。

5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）刪除所有的形狀提示，可執(zhí)行菜單275.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）【實(shí)例5-5-1】歡度國慶（詳細(xì)制作過程見教材）5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）【實(shí)例5-5-1】歡度國慶（詳285.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）【實(shí)例5-5-2】公雞變孔雀（詳細(xì)制作過程見教材）5.5形狀補(bǔ)間動(dòng)畫制作（續(xù)）【實(shí)例5-5-2】公雞變孔雀（295.6特殊層動(dòng)畫制作1、遮罩動(dòng)畫：遮罩動(dòng)畫就是通過遮罩層將普通圖層中的一部分遮擋，使另一部分可見而生成的動(dòng)畫。在遮罩層內(nèi)放置一個(gè)任意形狀的對象作為遮罩物，形成一個(gè)窗口，被遮罩層中，除了能夠從該窗口中看到的部分外，其他的所有部分都被隱藏。遮罩物在播放時(shí)是看不到的，5.6特殊層動(dòng)畫制作1、遮罩動(dòng)畫：305.6特殊層動(dòng)畫制作（續(xù)）遮罩物可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，可以將線條轉(zhuǎn)化為“填充”。遮罩層是由普通圖層轉(zhuǎn)化的。只要在某個(gè)普通圖層上單擊鼠標(biāo)右鍵，在彈出菜單中選擇【遮罩層】，該圖層就會(huì)生成遮罩層，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”，如果想讓更多普通層變?yōu)楸徽谡謱樱灰堰@些層拖到已有的被遮罩層下面即可。5.6特殊層動(dòng)畫制作（續(xù)）遮罩物可以是按鈕、影片剪輯、圖形315.6特殊層動(dòng)畫制作（續(xù)）使用遮罩時(shí)應(yīng)當(dāng)注意：能夠透過遮罩物看到“被遮罩層”中的對象及其屬性的變化，但是遮罩物的許多屬性卻是被忽略的。不能用一個(gè)遮罩層試圖遮蔽另一個(gè)遮罩層。在制作過程中，可以單擊遮罩層面板的顯示圖層輪廓按鈕，使遮罩物只顯示邊框形狀，以方便操作。在被遮罩層中不能放置動(dòng)態(tài)文本。5.6特殊層動(dòng)畫制作（續(xù)）使用遮罩時(shí)應(yīng)當(dāng)注意：325.6特殊層動(dòng)畫制作（續(xù)）2、引導(dǎo)層動(dòng)畫：引導(dǎo)層有普通引導(dǎo)層與運(yùn)動(dòng)引導(dǎo)層兩類。普通引導(dǎo)層起到輔助繪圖和定位的作用。在普通圖層上單擊鼠標(biāo)右鍵，選擇【引導(dǎo)層】命令，即可將普通圖層轉(zhuǎn)換為普通引導(dǎo)層。運(yùn)動(dòng)引導(dǎo)層可以設(shè)置補(bǔ)間動(dòng)畫的路徑（可以為曲線）。被引導(dǎo)層中對象就會(huì)沿著這條路徑移動(dòng)，引導(dǎo)路徑在播放的時(shí)候是看不見的。5.6特殊層動(dòng)畫制作（續(xù)）2、引導(dǎo)層動(dòng)畫：335.6特殊層動(dòng)畫制作（續(xù)）【實(shí)例5-6-1】探照燈文字效果（詳細(xì)制作過程見教材）5.6特殊層動(dòng)畫制作（續(xù)）【實(shí)例5-6-1】探照燈文字效果345.6特殊層動(dòng)畫制作（續(xù)）【實(shí)例5-6-2】燈光照射文字效果（詳細(xì)制作過程見教材）5.6特