形狀補(bǔ)間動(dòng)畫(huà)制作(精)(共17頁(yè))

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16、替換第一個(gè)燈籠依照以上步驟，在第40幀處的相應(yīng)圖層上依次用“?！薄ⅰ皣?guó)”、“慶”三個(gè)字取代另外三個(gè)燈籠，并執(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個(gè)“燈籠”圖層中的內(nèi)容哦！步驟8 創(chuàng)建形狀補(bǔ)間動(dòng)畫(huà)。在“燈籠”各圖層的第20、60幀處單擊幀，在【屬性】面板上單擊【補(bǔ)間】旁邊的小

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

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