形狀補間動畫制作(精)(共17頁)

1、形狀補間動畫制作學(xué)習(xí)目標(biāo)：1、認(rèn)識形狀補間的動畫原理2、會制作形狀補間的動畫重、難點：認(rèn)識形狀補間的動畫的動畫原理,，會制作形狀補間的動畫教學(xué)方法：演示法、講授法、練習(xí)法學(xué)時：1課時教學(xué)過程：一、 引入由演示形狀動畫的實例引入二、 新課學(xué)習(xí)1. 形狀補間動畫在一個關(guān)鍵幀中繪制一個形狀，然后在另一個關(guān)鍵幀中更改該形狀或繪制另一個形狀，F(xiàn)lash 根據(jù)二者之間的幀的值或形狀來創(chuàng)建的動畫被稱為“形狀補間動畫”。2. 構(gòu)成形狀補間動畫的元素形狀補間動畫可以實現(xiàn)兩個圖形之間顏色、形狀、大小、位置的相互變化，其變形的靈活性介于逐幀動畫和動作補間動畫二者之間，使用的元素多為用鼠標(biāo)或壓感筆繪制出的形狀，如果使

2、用圖形元件、按鈕、文字，則必先“打散”才能創(chuàng)建變形動畫。3. 形狀補間動畫在時間幀面板上的表現(xiàn)形狀補間動畫建好后，時間幀面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有一個長長的箭頭。4. 創(chuàng)建形狀補間動畫的方法在時間軸面板上動畫開始播放的地方創(chuàng)建或選擇一個關(guān)鍵幀并設(shè)置要開始變形的形狀，一般一幀中以一個對象為好，在動畫結(jié)束處創(chuàng)建或選擇一個關(guān)鍵幀并設(shè)置要變成的形狀，再單擊開始幀，在【屬性】面板上單擊【補間】旁邊的小三角，在彈出的菜單中選擇【形狀】，此時，時間軸上的變化如圖3-3-1所示，一個形狀補間動畫就創(chuàng)建完畢。三、 學(xué)生練習(xí)任務(wù)：熟悉形狀補間動畫的制作1. 根據(jù)老師所提供的學(xué)習(xí)資料制作形狀補間

3、動畫2. 從網(wǎng)上搜索更多的教程學(xué)習(xí)四、 課堂小結(jié)小結(jié)本節(jié)的主要內(nèi)容和學(xué)生中存在的問題附：學(xué)生資料形狀補間動畫形狀補間動畫是Flash中非常重要的表現(xiàn)手法之一，運用它，你可以變幻出各種奇妙的、不可思議的變形效果。本節(jié)從形狀補間動畫基本概念入手，帶你認(rèn)識形狀補間動畫在時間幀上的表現(xiàn)，了解補間動畫的創(chuàng)建方法，學(xué)會應(yīng)用“形狀提示”讓圖形的形變自然流暢，最后，提供了二個實例，幫助你更深地理解形狀補間動畫。1形狀補間動畫的概念（1）形狀補間動畫的概念 在一個關(guān)鍵幀中繪制一個形狀，然后在另一個關(guān)鍵幀中更改該形狀或繪制另一個形狀，F(xiàn)lash 根據(jù)二者之間的幀的值或形狀來創(chuàng)建的動畫被稱為“形狀補間動畫”。（2）

4、構(gòu)成形狀補間動畫的元素形狀補間動畫可以實現(xiàn)兩個圖形之間顏色、形狀、大小、位置的相互變化，其變形的靈活性介于逐幀動畫和動作補間動畫二者之間，使用的元素多為用鼠標(biāo)或壓感筆繪制出的形狀，如果使用圖形元件、按鈕、文字，則必先“打散”才能創(chuàng)建變形動畫。（3）形狀補間動畫在時間幀面板上的表現(xiàn)形狀補間動畫建好后，時間幀面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有一個長長的箭頭，如圖3-3-1所示。圖3-3-1 形狀補間動畫在時間幀面板上的標(biāo)記（4）創(chuàng)建形狀補間動畫的方法在時間軸面板上動畫開始播放的地方創(chuàng)建或選擇一個關(guān)鍵幀并設(shè)置要開始變形的形狀，一般一幀中以一個對象為好，在動畫結(jié)束處創(chuàng)建或選擇一個關(guān)鍵幀并設(shè)

5、置要變成的形狀，再單擊開始幀，在【屬性】面板上單擊【補間】旁邊的小三角，在彈出的菜單中選擇【形狀】，此時，時間軸上的變化如圖3-3-1所示，一個形狀補間動畫就創(chuàng)建完畢。2認(rèn)識形狀補間動畫的屬性面板Flash的【屬性】面板隨鼠標(biāo)選定的對象不同而發(fā)生相應(yīng)的變化。當(dāng)我們建立了一個形狀補間動畫后，單擊幀，【屬性】面板如圖3-3-2所示。圖3-3-2 形狀補間動畫的【屬性】面板 形狀補間動畫的【屬性】面板上只有二個參數(shù)：（1）“簡易”選項單擊其右邊的按鈕，會彈出滑動桿，拖動上面的滑塊可以調(diào)節(jié)參數(shù)值，當(dāng)然也可以在文本框中直接輸入具體的數(shù)值，設(shè)置后，形狀補間動畫會隨之發(fā)生相應(yīng)的變化。 &

6、#160;     在1到 -100 的負(fù)值之間，動畫運動的速度從慢到快，朝運動結(jié)束的方向加速度補間。       在1 到 100 的正值之間，動畫運動的速度從快到慢，朝運動結(jié)束的方向減慢補間。       默認(rèn)情況下，補間幀之間的變化速率是不變的。（2）“混合”選項“混合”選項中有二項供選擇：       【角形】選項：創(chuàng)建的動畫中間形狀會保留有明顯的角和直線，適合于具有銳

7、化轉(zhuǎn)角和直線的混合形狀。       【分布式】選項：創(chuàng)建的動畫中間形狀比較平滑和不規(guī)則。3使用形狀提示形狀補間動畫看似簡單，實則不然，F(xiàn)lash在“計算”2個關(guān)鍵幀中圖形的差異時，遠不如我們想象中的“聰明”，尤其前后圖形差異較大時，變形結(jié)果會顯得亂七八糟，這時，“形狀提示”功能會大大改善這一情況。（1）     形狀提示的作用在“起始形狀”和“結(jié)束形狀”中添加相對應(yīng)的“參考點”，使Flash在計算變形過渡時依一定的規(guī)則進行，從而較有效地控制變形過程。（2）添加形狀提示的方法 

8、0;  先在形狀補間動畫的開始幀上單擊一下，再執(zhí)行【修改】|【形狀】|【添加形狀提示】命令，該幀的形狀上就會增加一個帶字母的紅色圓圈，相應(yīng)地，在結(jié)束幀形狀中也會出現(xiàn)一個“提示圓圈”，用鼠標(biāo)左鍵單擊并分別按住這2個“提示圓圈”，放置在適當(dāng)位置，安放成功后開始幀上的“提示圓圈”變?yōu)辄S色，結(jié)束幀上的“提示圓圈”變?yōu)榫G色，安放不成功或不在一條曲線上時，“提示圓圈”顏色不變，如圖3-3-3所示。圖3-3-3 添加形狀提示后各幀的變化說明：在制作復(fù)雜的變形動畫時，形狀提示的添加和拖放要多方位嘗試，每添加一個形狀提示，最好播放一下變形效果，然后再對變形提示的位置做進一步的調(diào)整第三節(jié) 形狀補間動畫(

9、2（3）添加形狀提示的技巧       “形狀提示”可以連續(xù)添加，最多能添加26個。       將變形提示從形狀的左上角開始按逆時針順序擺放，將使變形提示工作得更有效。       形狀提示的擺放位置也要符合邏輯順序。例如，起點關(guān)鍵幀和終點關(guān)鍵幀上各有一個三角形，我們使用3個“形狀提示”，如果它們在起點關(guān)鍵幀的三角形上的順序為abc，那么在重點關(guān)鍵幀的三角形上的順序就不能是acb，也要是abc。 

10、0;     形狀提示要在形狀的邊緣才能起作用，在調(diào)整形狀提示位置前，要打開工具欄上【選項】下面的【吸咐開關(guān)】，這樣，會自動把“形狀提示”吸咐到邊緣上，如果你發(fā)覺“形狀提示”仍然無效，則可以用工具欄上的【縮放工具】單擊形狀，放大到足夠大，以確?！靶螤钐崾尽蔽挥趫D形邊緣上。       另外，要刪除所有的形狀提示，可執(zhí)行【修改】|【形狀】|【刪除所有提示】命令。刪除單個形狀提示，可用鼠標(biāo)右鍵單擊它，在彈出菜單中選擇【刪除提示】。至此，“形狀補間動畫”的相關(guān)知識我們已都介紹給大家了，下面來一起動手制

11、作二個實例，體會一下形狀補間動畫的奇妙。4實例1慶祝國慶實例簡介    國慶的夜空絢麗多彩，朵朵禮花在天空中綻放，遠處傳來禮炮的轟鳴聲，讓我們來給這美麗的夜晚增加點喜慶，掛幾個大紅燈籠來慶祝祖國的生日吧！實例播放效果如圖3-3-4所示。圖3-3-4 慶祝國慶實例畫面知識提要       創(chuàng)建矢量圖形       創(chuàng)建形狀補間動畫       將文字轉(zhuǎn)變?yōu)樾螤?#160; 

12、60;    用混色器設(shè)置顏色       在場景中導(dǎo)入聲音 制作步驟步驟1 創(chuàng)建新文檔執(zhí)行【文件】|【新建】命令，在彈出的對話框中選擇【常規(guī)】|【Flash文檔】選項后，單擊【確定】按鈕，新建一個影片文檔，在【屬性】面板上設(shè)置文件大小為400×330像素，【背景色】為白色，如圖3-3-5所示。圖3-3-5 文檔屬性 步驟2 創(chuàng)建背景圖層執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到舞臺】命令，將配套光盤中的名為“節(jié)日夜空.jpg”圖片導(dǎo)入到場景中，（“節(jié)日夜空”圖片位置：光盤exampl

13、epart3*圖片節(jié)日夜空.jpg），選擇第80幀，按鍵盤上的F5鍵，增加一個普通幀，如圖3-3-6所示。第三節(jié) 形狀補間動畫(3步驟3 導(dǎo)入聲音文件    執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到庫】命令，打開配套光盤中的名為“sound.mp3”的文件，將其導(dǎo)入到庫中。步驟4 創(chuàng)建燈籠形狀   我們先來畫燈籠，執(zhí)行【窗口】|【設(shè)計面板】|【混色器】命令，打開【混色器】面板，設(shè)置各項參數(shù)，漸變的顏色為白色到紅色，如圖3-3-7所示。圖3-3-7 【混色器】面板設(shè)置之一新建一個圖層，并將其重新命名為“燈籠一”。選擇工具箱中的【橢圓工具】，設(shè)置【筆觸顏色

14、】為無，在場景中繪制出一個橢圓做燈籠的主體，大小為65×40像素。接著我們來畫燈籠上下的邊，打開【混色器】面板，按照如圖3-3-8所示設(shè)置深黃色到淺黃色的【線性】漸變填充。從左到右三個填充色標(biāo)的顏色值分別為：#FF9900、#FFFF00、#FFCC00。圖3-3-8 【混色器】面板設(shè)置之二選擇工具箱上的【矩形工具】，設(shè)置【筆觸顏色】為無，繪制出一個矩形，大小為30×10像素，復(fù)制這個矩形，分別放在燈籠的上下方，再畫一個小的矩形，長寬為7×10像素，作為燈籠上面的提手。最后用【線條工具】，在燈籠的下面畫幾條黃色線條做燈籠穗，一個漂亮的燈籠就畫好了。如圖3-3-9所

15、示（為了能清楚的顯示燈籠，可暫時將背景色改為藍色）。圖3-3-9 畫好的燈籠步驟5 復(fù)制粘貼四個燈籠復(fù)制剛畫好的燈籠，新建三個圖層，在每個圖層中粘貼一個燈籠，調(diào)整燈籠的位置，使其錯落有致地排列在場景中。在第20、40幀處為各圖層添加關(guān)鍵幀，如圖3-3-10所示。圖3-3-10 錯落有致的燈籠及時間軸面板第三節(jié) 形狀補間動畫(4步驟6 把文字轉(zhuǎn)為形狀取代燈籠選取第一個燈籠，在第40幀處用文字“慶”取代燈籠，在【屬性】面板上，設(shè)置文本類型為【靜態(tài)文本】，字體為【隸書】，字體大小為60，顏色為紅色。對“慶”字執(zhí)行【修改】|【分離】命令，把文字轉(zhuǎn)為形狀。如圖3-3-11所示。圖3-3-11 用“慶”字

16、替換第一個燈籠依照以上步驟，在第40幀處的相應(yīng)圖層上依次用“祝”、“國”、“慶”三個字取代另外三個燈籠，并執(zhí)行【分散】操作，其效果如圖 3-3-12所示。圖3-3-12 用文字形狀取代燈籠形狀及文字打散步驟7 設(shè)置文字形狀到燈籠形狀的轉(zhuǎn)變。在“燈籠”各圖層的第60幀及80幀處，分別添加關(guān)鍵幀，現(xiàn)在，在80幀處各“燈籠”圖層中的內(nèi)容為“文字圖形”，應(yīng)該把它們換成“燈籠”。具體辦法是分別復(fù)制第20幀中的“燈籠”圖形，再分別粘貼到第80幀中，當(dāng)然，你應(yīng)該先清除第80幀處4個“燈籠”圖層中的內(nèi)容哦！步驟8 創(chuàng)建形狀補間動畫。在“燈籠”各圖層的第20、60幀處單擊幀，在【屬性】面板上單擊【補間】旁邊的小

17、三角，在彈出的菜單中選擇【形狀】，建立形狀補間動畫，如圖3-3-13所示。圖3-3-13 創(chuàng)建形狀補間動畫步驟9 設(shè)置聲音添加一層，在第20、60幀處按F6鍵，創(chuàng)建關(guān)鍵幀，在【屬性】面板上單擊【聲音】旁邊的小三角，選擇sound.mp3，如圖3-3-14所示。圖3-3-14 聲音設(shè)置設(shè)置好的時間幀面板如圖3-3-15所示。圖3-3-15 設(shè)置好的時間幀面板說明：有關(guān)聲音導(dǎo)入及應(yīng)用的詳細(xì)內(nèi)容請參閱本書第五章的相關(guān)內(nèi)容。5實例2添加形狀提示練習(xí)實例簡介上面我們曾談到，為得到流暢自然的形狀變形動畫，可以添加形狀提示，本例是專為此而設(shè)計的練習(xí)。請你在光盤的相關(guān)目錄中找到“添加形狀提示練習(xí).swf”文件

18、，如圖3-3-16所示。這2個同樣是“形狀變形”，其中右邊的變形用了變形“參考點”，從中，我們可以看出變形效果有明顯的差異。圖3-3-16 添加形狀提示實例界面知識提要       添加形狀提示       創(chuàng)建形狀補間動畫步驟1 創(chuàng)建新文檔執(zhí)行【文件】|【新建】命令，新建一個影片文檔，設(shè)置舞臺尺寸為300×200像素，設(shè)置【背景色】為藍色#0000FF。步驟2 創(chuàng)建變形對象。我們要在場景中寫二個數(shù)字“1”，讓它們同時變形，一個加形狀提示，一個不加形狀提示，看看這二個變形有什么不同。先在【圖層1】的場景左邊輸入數(shù)字“1”，在【屬性】面板上，設(shè)置文本格式為【靜態(tài)文本】、字體為隸書、字號為100、【顏色】為白色。再建一個【圖層2】，在場景右邊輸入數(shù)字“1”，參數(shù)同上，此層是添加形狀提示層。然后在兩個圖層的第40幀處添加關(guān)鍵幀，各輸入數(shù)字“2”，在第60幀處添加普通幀，使變形后的文字稍做停留。第三節(jié) 形狀補間動畫(5步驟3 把字符轉(zhuǎn)為形狀逐一選取各層數(shù)字的第1、40幀，執(zhí)行【修改】|【分離】命令，把數(shù)字打散，轉(zhuǎn)為形狀。步驟4 創(chuàng)建補間動畫在【圖層1】和【圖層2】的