Flash8制作形狀補(bǔ)間動(dòng)畫

1、FLASH8學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 第第8 8章章 制作形狀補(bǔ)間動(dòng)畫 l掌握形狀補(bǔ)間動(dòng)畫的原理和創(chuàng)建方法掌握形狀補(bǔ)間動(dòng)畫的原理和創(chuàng)建方法 。l使用形狀補(bǔ)間動(dòng)畫表現(xiàn)事物變化的過程使用形狀補(bǔ)間動(dòng)畫表現(xiàn)事物變化的過程 。l掌握形狀提示點(diǎn)的原理和使用方法掌握形狀提示點(diǎn)的原理和使用方法 。 l使用形狀提示點(diǎn)動(dòng)畫表現(xiàn)舌頭擺動(dòng)效果的方法使用形狀提示點(diǎn)動(dòng)畫表現(xiàn)舌頭擺動(dòng)效果的方法 。 5.1 形狀補(bǔ)間動(dòng)畫原理 5.2 形狀提示點(diǎn)原理 5.3 課后作業(yè)本章大綱本章大綱5.1 形狀補(bǔ)間動(dòng)畫原理 5.1.1 知識(shí)點(diǎn)講解 形狀補(bǔ)間動(dòng)畫是動(dòng)畫制作中一種常用的動(dòng)畫制作方法，它可以補(bǔ)間形狀的位置、大小和顏色等，使用形狀補(bǔ)間可以制作

2、出千變?nèi)f化的動(dòng)畫效果。 一、形狀補(bǔ)間動(dòng)畫的原理。一、形狀補(bǔ)間動(dòng)畫的原理。 形狀補(bǔ)間動(dòng)畫可以實(shí)現(xiàn)兩個(gè)矢量圖形之間顏色、形狀、位置的變化，如圖5-1所示 。 圖圖5-1 形狀補(bǔ)間動(dòng)畫原理形狀補(bǔ)間動(dòng)畫原理 綠色漸變紅色漸變舞臺(tái)左邊舞臺(tái)右邊小蘋果大蘋果顏色補(bǔ)間位置補(bǔ)間形狀補(bǔ)間二、創(chuàng)建形狀補(bǔ)間動(dòng)畫二、創(chuàng)建形狀補(bǔ)間動(dòng)畫 。 同一圖層上，在繪制著不同矢量圖形的兩關(guān)鍵幀之間任選同一圖層上，在繪制著不同矢量圖形的兩關(guān)鍵幀之間任選1幀幀，然后再在，然后再在【屬性屬性】面板上的面板上的【補(bǔ)間補(bǔ)間】下拉列表中選擇下拉列表中選擇【形狀形狀】選選項(xiàng)，如圖項(xiàng)，如圖5-2所示，就可創(chuàng)建一個(gè)形狀補(bǔ)間動(dòng)畫所示，就可創(chuàng)建一個(gè)形狀補(bǔ)

3、間動(dòng)畫 。圖圖5-2 創(chuàng)建形狀補(bǔ)間動(dòng)畫創(chuàng)建形狀補(bǔ)間動(dòng)畫 三、認(rèn)識(shí)形狀補(bǔ)間動(dòng)畫的屬性面板。三、認(rèn)識(shí)形狀補(bǔ)間動(dòng)畫的屬性面板。 Flash 8的的【屬性屬性】面板隨選定的對(duì)象不同而發(fā)生相應(yīng)的變化面板隨選定的對(duì)象不同而發(fā)生相應(yīng)的變化。當(dāng)建立了一個(gè)形狀補(bǔ)間動(dòng)畫后，單擊時(shí)間軸，其。當(dāng)建立了一個(gè)形狀補(bǔ)間動(dòng)畫后，單擊時(shí)間軸，其【屬性屬性】面板如面板如5-2所示。所示。 其中經(jīng)常使用的選項(xiàng)有如下兩種其中經(jīng)常使用的選項(xiàng)有如下兩種 ： （1）【緩動(dòng)緩動(dòng)】選項(xiàng)選項(xiàng) 。在。在【緩動(dòng)緩動(dòng)】選項(xiàng)中輸入相應(yīng)的數(shù)值，形選項(xiàng)中輸入相應(yīng)的數(shù)值，形狀補(bǔ)間動(dòng)畫則會(huì)隨之發(fā)生相應(yīng)的變化狀補(bǔ)間動(dòng)畫則會(huì)隨之發(fā)生相應(yīng)的變化 。（。（2）【混合混

4、合】選項(xiàng)選項(xiàng) 。在。在【混合混合】選項(xiàng)中包含選項(xiàng)中包含“角形角形”和和“分布式分布式”兩個(gè)參數(shù)。兩個(gè)參數(shù)。 5.1.2 范例解析（一）創(chuàng)建形狀補(bǔ)間動(dòng)畫練習(xí) 請(qǐng)同學(xué)們?cè)诶蠋煹膸ьI(lǐng)下對(duì)形狀補(bǔ)間動(dòng)畫的創(chuàng)建方法和原理請(qǐng)同學(xué)們?cè)诶蠋煹膸ьI(lǐng)下對(duì)形狀補(bǔ)間動(dòng)畫的創(chuàng)建方法和原理進(jìn)行進(jìn)一步的熟悉，并跟隨以下要求進(jìn)行操作訓(xùn)練進(jìn)行進(jìn)一步的熟悉，并跟隨以下要求進(jìn)行操作訓(xùn)練 。1、新建一個(gè)、新建一個(gè)Flash文檔，然后利用文檔，然后利用【橢圓橢圓】工具在舞臺(tái)上繪制一個(gè)工具在舞臺(tái)上繪制一個(gè)圓形，并在圓形，并在【屬性屬性】面板中設(shè)置圓的顏色為面板中設(shè)置圓的顏色為“#00FF00”，寬高，寬高為為“7px7px”，如圖，如圖5

5、-3所示所示 。2、在第、在第20幀處插入關(guān)鍵幀，然后以圓為基點(diǎn)繪制一片樹葉，如圖幀處插入關(guān)鍵幀，然后以圓為基點(diǎn)繪制一片樹葉，如圖5-4所示。所示。圖圖5-3 繪制圓形繪制圓形 圖圖5-4 繪制樹葉繪制樹葉 3、在第、在第20幀處，首先刪除幀處，首先刪除“圓圓”，然后填充樹葉，效果如圖，然后填充樹葉，效果如圖5-5所示。所示。 #FFFFFF#339900【顏色顏色】面板面板 樹葉效果樹葉效果 圖圖5-5 填充樹葉填充樹葉4、在第、在第40幀處插入關(guān)鍵幀，然后調(diào)節(jié)樹葉的顏色效果如圖幀處插入關(guān)鍵幀，然后調(diào)節(jié)樹葉的顏色效果如圖5-6所示所示 【顏色顏色】面板面板 樹葉效果樹葉效果 #FFFFFF#

6、CC99005、在第、在第60幀處將樹葉移出舞臺(tái)。幀處將樹葉移出舞臺(tái)。6、選中第、選中第1幀，然后在幀，然后在【屬性屬性】面板的面板的【補(bǔ)間補(bǔ)間】下拉列表中選擇下拉列表中選擇“形狀形狀”選項(xiàng)，如圖選項(xiàng)，如圖5-7所示。則創(chuàng)建出第所示。則創(chuàng)建出第1幀第幀第20幀之間的形狀幀之間的形狀補(bǔ)間動(dòng)畫補(bǔ)間動(dòng)畫 。圖圖5-7 創(chuàng)建補(bǔ)間動(dòng)畫創(chuàng)建補(bǔ)間動(dòng)畫 7、使用相同的方法，在第、使用相同的方法，在第20幀、第幀、第40幀兩處分別創(chuàng)建形狀補(bǔ)間動(dòng)幀兩處分別創(chuàng)建形狀補(bǔ)間動(dòng)畫。畫。8、按、按Ctrl+Enter 快捷鍵測(cè)試播放影片，觀看這個(gè)由小圓成長為一快捷鍵測(cè)試播放影片，觀看這個(gè)由小圓成長為一片綠葉，再枯黃，再凋零

7、的動(dòng)畫。片綠葉，再枯黃，再凋零的動(dòng)畫。9、關(guān)閉測(cè)試播放器，選中第、關(guān)閉測(cè)試播放器，選中第40幀，然后在屬性面板中分別設(shè)置幀，然后在屬性面板中分別設(shè)置【緩動(dòng)緩動(dòng)】為為“100100”之間不同的值，然后分別測(cè)試影片，觀之間不同的值，然后分別測(cè)試影片，觀看樹葉凋落動(dòng)畫的速率變化看樹葉凋落動(dòng)畫的速率變化 。5.1.3 范例解析（二）制作“浪漫綻放” 花是帶給人們幸福與浪漫的精靈。本例將使用形狀補(bǔ)間動(dòng)畫來制花是帶給人們幸福與浪漫的精靈。本例將使用形狀補(bǔ)間動(dòng)畫來制作一個(gè)作一個(gè)“浪漫的綻放浪漫的綻放”動(dòng)畫，帶領(lǐng)讀者來一同體驗(yàn)自己繪制出的浪漫動(dòng)畫，帶領(lǐng)讀者來一同體驗(yàn)自己繪制出的浪漫感覺，其設(shè)計(jì)思路及效果如圖感

8、覺，其設(shè)計(jì)思路及效果如圖5-8所示所示 。圖圖5-8 制作思路及效果制作思路及效果 1、制作葉片的生長、制作葉片的生長 。（1）打開教學(xué)資源中“素材第5講浪漫的綻放浪漫的綻放-模板.fla”文件，場景效果如圖5-9所示。（2）在“背景”圖層之上新建并重命名圖層，直至圖層效果如圖5-10所示。圖圖5-9 模板場景模板場景 圖圖5-10 圖層效果圖層效果 （3）選擇【矩形】工具，在【屬性】面板中設(shè)置【筆觸顏色】為“無”，【填充顏色】為“#37C030”，在“葉片1”圖層上繪制一個(gè)寬高為“5px5px”的矩形，并將其置于花盆的后面，效果如圖5-11所示。（4）在“葉片1”圖層的第10幀處插入關(guān)鍵幀，

9、利用【選擇】工具調(diào)整第10幀處“矩形”的形狀如圖5-12所示。（5）在“葉片1”圖層的第20幀處插入關(guān)鍵幀，利用【選擇】工具調(diào)整第20幀處“矩形”的形狀如圖5-13所示。 矩形圖圖5-11 第第1幀葉片形狀幀葉片形狀 圖圖5-12 第第10幀葉片形狀幀葉片形狀 圖圖5-13 第第20幀葉片形狀幀葉片形狀 （6）在第）在第1幀第幀第10幀之間、第幀之間、第10幀第幀第20幀之間創(chuàng)建形狀補(bǔ)間動(dòng)幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，這樣一片葉子的生長過程就制作完成。畫，這樣一片葉子的生長過程就制作完成。（7）使用同樣的方法在圖層）使用同樣的方法在圖層“葉片葉片2”、“葉片葉片3”、“葉片葉片4”、“葉葉片片5”、

10、“葉片葉片6”上分別制作其他上分別制作其他5片葉子的生長，完成葉片的生片葉子的生長，完成葉片的生長動(dòng)畫。此時(shí)的場景效果如圖長動(dòng)畫。此時(shí)的場景效果如圖5-14所示，所示，【時(shí)間軸時(shí)間軸】效果如圖效果如圖5-15所示。所示。 葉片6葉片2葉片4葉片5葉片3葉片1圖圖5-14 完成葉片制作完成葉片制作 在制作葉片生長動(dòng)畫效果時(shí)，注意調(diào)整葉在制作葉片生長動(dòng)畫效果時(shí)，注意調(diào)整葉片生長的先后順序，盡量使葉片生長看起來貼片生長的先后順序，盡量使葉片生長看起來貼近自然。每個(gè)葉片的生長時(shí)間也可根據(jù)葉片大近自然。每個(gè)葉片的生長時(shí)間也可根據(jù)葉片大小有所不同。建議將制作完成的圖層進(jìn)行鎖定小有所不同。建議將制作完成的圖

11、層進(jìn)行鎖定，以免產(chǎn)生誤操作。，以免產(chǎn)生誤操作。圖圖5-15 【時(shí)間軸時(shí)間軸】效果一效果一 2、制作花梗的生長。、制作花梗的生長。（1）在）在“葉片葉片6”圖層之上新建一個(gè)圖層并重命名為圖層之上新建一個(gè)圖層并重命名為“花?；ü！眻D層圖層。（2）在）在“花?；ü！眻D層的第圖層的第65幀處插入關(guān)鍵幀。幀處插入關(guān)鍵幀。（3）選擇）選擇【矩形矩形】工具，在工具，在【屬性屬性】面板中設(shè)置面板中設(shè)置【筆觸顏色筆觸顏色】為為“無無”，【填充顏色填充顏色】為為“#CCE492”，在，在“花?；ü！眻D層的第圖層的第65幀處繪制一個(gè)寬高為幀處繪制一個(gè)寬高為“5px5px”的矩形，而后將其置于花的矩形，而后將其置于花

12、盆的后面，效果如圖盆的后面，效果如圖5-16所示。所示。（4）利用）利用【選擇選擇】工具調(diào)整矩形的形狀如圖工具調(diào)整矩形的形狀如圖5-17所示。所示。（5）在）在“花梗花?！眻D層的第圖層的第105幀處插入關(guān)鍵幀，利用幀處插入關(guān)鍵幀，利用【選擇選擇】工具工具調(diào)整第調(diào)整第105幀處幀處“花梗花?！钡男螤钊鐖D的形狀如圖5-18所示。所示。（6）在第）在第65幀第幀第105幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，這樣花梗的生長幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，這樣花梗的生長過程就制作完成了過程就制作完成了 ?；üD圖5-16 原始矩形原始矩形 圖圖5-17 花梗的原始形狀花梗的原始形狀 圖圖5-18 第第105幀花梗形狀幀花梗形

13、狀 3、制作花瓣的生長、制作花瓣的生長 。（1）在）在“花?；ü！眻D層之上新建并重命名圖層，直至圖層效果如圖圖層之上新建并重命名圖層，直至圖層效果如圖5-19所示。所示。（2）在）在“花瓣花瓣1”圖層的第圖層的第105幀處插入關(guān)鍵幀。幀處插入關(guān)鍵幀。（3）選擇）選擇【橢圓橢圓】工具，在工具，在【屬性屬性】面板中設(shè)置面板中設(shè)置【筆觸顏色筆觸顏色】為為“無無”，【填充顏色填充顏色】為為“#F997DC”，在，在“花瓣花瓣”圖層的第圖層的第105幀處繪制一個(gè)寬高為幀處繪制一個(gè)寬高為“1.3px1.1px”的橢圓，并將其置于的橢圓，并將其置于花梗頂端花苞的上面，效果如圖花梗頂端花苞的上面，效果如圖5-

14、20所示所示 。橢圓圖圖5-19 圖層效果圖層效果 圖圖5-20 第第105幀花瓣形狀幀花瓣形狀 在繪制花瓣的原始形狀時(shí)，需要將其放置在花苞在繪制花瓣的原始形狀時(shí)，需要將其放置在花苞上并適當(dāng)調(diào)整位置，使得花開得更自然，也達(dá)到掩蓋上并適當(dāng)調(diào)整位置，使得花開得更自然，也達(dá)到掩蓋花苞的目的花苞的目的 。（4）在）在“花瓣花瓣1”圖層的第圖層的第135幀處插入關(guān)鍵幀，利用幀處插入關(guān)鍵幀，利用【選擇選擇】工具工具調(diào)整第調(diào)整第135幀處幀處“花瓣花瓣”的形狀如圖的形狀如圖5-21所示。所示。（5）在第）在第105幀第幀第135幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，這樣一片花瓣幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，這樣一片花瓣的生長過

15、程就制作完成。的生長過程就制作完成。（6）使用同樣的方法在圖層）使用同樣的方法在圖層“花瓣花瓣2”、“花瓣花瓣3”、“花瓣花瓣4”、“花瓣花瓣5”、“花瓣花瓣6”上分別制作其他上分別制作其他5片花瓣的生長，完成花瓣的片花瓣的生長，完成花瓣的生長動(dòng)畫，效果如圖生長動(dòng)畫，效果如圖5-22所示。所示。 圖圖5-21 第第135幀花瓣形狀幀花瓣形狀 花瓣4花瓣5花瓣6花瓣3花瓣1花瓣2圖圖5-22 完成制作完成制作 （7）最終的場景效果如圖）最終的場景效果如圖5-23所示，時(shí)間軸效果如圖所示，時(shí)間軸效果如圖5-24所示所示 。圖圖5-23 最終場景效果最終場景效果 圖圖5-24 制作完成后的【時(shí)間軸】

16、效果 （8）保存測(cè)試影片，一株美麗的花兒浪漫綻放的動(dòng)畫效果制作完）保存測(cè)試影片，一株美麗的花兒浪漫綻放的動(dòng)畫效果制作完成成 。5.1.4 5.1.4 課堂練習(xí)制作“魔幻撲克” 請(qǐng)同學(xué)們自己動(dòng)手制作一個(gè)撲克變幻的動(dòng)畫，其效果如圖請(qǐng)同學(xué)們自己動(dòng)手制作一個(gè)撲克變幻的動(dòng)畫，其效果如圖5-25所示所示 。1、新建一個(gè)Flash文檔，設(shè)置文檔【尺寸】為“500px353px”，文檔其他屬性使用默認(rèn)參數(shù) 。圖圖5-25 魔幻撲克效果魔幻撲克效果 2、執(zhí)行、執(zhí)行【文件文件】/【導(dǎo)入導(dǎo)入】/【打開外部庫打開外部庫】菜單命令，將教學(xué)資源菜單命令，將教學(xué)資源中的中的“素材素材第第5講講魔幻撲克魔幻撲克魔幻撲克魔幻撲

17、克-素材素材.fla”文件打開，將文件打開，將外部庫里的元件和圖片復(fù)制到當(dāng)前庫中，效果如圖外部庫里的元件和圖片復(fù)制到當(dāng)前庫中，效果如圖5-26所示。所示。3、將、將【庫庫】面板中的面板中的“背景背景”位圖拖入場景中，設(shè)置其寬高為位圖拖入場景中，設(shè)置其寬高為“500px353px”，并相對(duì)舞臺(tái)居中對(duì)齊，效果如圖，并相對(duì)舞臺(tái)居中對(duì)齊，效果如圖5-27所示所示。圖圖5-26 【庫庫】面板面板 圖圖5-27 導(dǎo)入背景圖片導(dǎo)入背景圖片 4、將、將“背景背景”圖層鎖定，在圖層鎖定，在“背景背景”圖層上新建并重命名圖層，圖層上新建并重命名圖層，直到圖層效果如圖直到圖層效果如圖5-28所示，并在所有圖層的第所

18、示，并在所有圖層的第20幀處插入幀幀處插入幀。5、選擇、選擇“紅桃紅桃2參考參考”圖層，將圖層，將【庫庫】面板中的面板中的“紅桃紅桃2參考圖參考圖”圖形元件拖入到舞臺(tái)中，并相對(duì)舞臺(tái)居中對(duì)齊。在圖形元件拖入到舞臺(tái)中，并相對(duì)舞臺(tái)居中對(duì)齊。在【屬性屬性】面面板中設(shè)置其板中設(shè)置其【Alpha】參數(shù)為參數(shù)為“50%”，效果如圖，效果如圖5-29所示。所示。圖圖5-28 設(shè)置大小和位置設(shè)置大小和位置 圖圖5-29 拖入拖入“紅桃紅桃2參考圖參考圖” 6、根據(jù)參考圖在各個(gè)圖層上繪制花色為、根據(jù)參考圖在各個(gè)圖層上繪制花色為“紅桃紅桃2”紙牌各個(gè)部分的紙牌各個(gè)部分的形狀，如圖形狀，如圖5-30所示。所示。 圖圖

19、5-30 繪制紅桃繪制紅桃2 其中其中【字體字體】為為“Bookman Old Style”（讀者可以（讀者可以設(shè)置為自己喜歡的字體或者自行購買外部字體庫）。設(shè)置為自己喜歡的字體或者自行購買外部字體庫）。 7、在、在“花色上花色上”、“花色中花色中”、“花色下花色下”、“數(shù)字上數(shù)字上”、“數(shù)數(shù)字下字下”圖層的第圖層的第20幀處按幀處按F7 快捷鍵插入空白關(guān)鍵幀。使用同樣快捷鍵插入空白關(guān)鍵幀。使用同樣的方法繪制花色為的方法繪制花色為“黑桃黑桃A”的紙牌，效果如圖的紙牌，效果如圖5-31所示。所示。8、將、將“數(shù)字下數(shù)字下”、“數(shù)字上數(shù)字上”圖層的第圖層的第1幀和第幀和第20幀處的數(shù)字打散幀處的數(shù)

20、字打散。9、分別在、分別在“花色上花色上”、“花色中花色中”、“花色下花色下”、“數(shù)字上數(shù)字上”、“數(shù)字下數(shù)字下”圖層的第圖層的第1幀第幀第20幀之間創(chuàng)建幀之間創(chuàng)建“形狀補(bǔ)間形狀補(bǔ)間“動(dòng)畫動(dòng)畫，時(shí)間軸效果如圖，時(shí)間軸效果如圖5-32所示所示 。圖圖5-31 繪制黑桃繪制黑桃A 圖圖5-32 繪制傾斜為繪制傾斜為45的線條的線條 10、保存測(cè)試影片，一個(gè)簡單而又神奇的撲克變幻動(dòng)畫制作完成、保存測(cè)試影片，一個(gè)簡單而又神奇的撲克變幻動(dòng)畫制作完成 。5.2 形狀提示點(diǎn)原理 當(dāng)用形狀補(bǔ)間動(dòng)畫制作一些較為復(fù)雜的變形動(dòng)畫時(shí)，常常會(huì)使當(dāng)用形狀補(bǔ)間動(dòng)畫制作一些較為復(fù)雜的變形動(dòng)畫時(shí)，常常會(huì)使畫面變得混亂，根本達(dá)不

21、到用戶想要的變化過程，這時(shí)就需要使用形畫面變得混亂，根本達(dá)不到用戶想要的變化過程，這時(shí)就需要使用形狀提示點(diǎn)來進(jìn)行控制。狀提示點(diǎn)來進(jìn)行控制。5.2.1 知識(shí)點(diǎn)講解一、添加形狀提示。一、添加形狀提示。 單擊形狀補(bǔ)間動(dòng)畫的開始幀，執(zhí)行單擊形狀補(bǔ)間動(dòng)畫的開始幀，執(zhí)行【修改修改】/【形狀形狀】/【添加形狀添加形狀提示提示】菜單命令。這樣在形狀上就會(huì)增加一個(gè)帶字母的紅色圓圈菜單命令。這樣在形狀上就會(huì)增加一個(gè)帶字母的紅色圓圈，相應(yīng)地在結(jié)束幀的形狀上也會(huì)增加形狀提示符，如圖，相應(yīng)地在結(jié)束幀的形狀上也會(huì)增加形狀提示符，如圖5-33所示所示。 分別將這兩個(gè)形狀提示符安放到適當(dāng)?shù)奈恢脮r(shí)，起始關(guān)鍵幀上的分別將這兩個(gè)形

22、狀提示符安放到適當(dāng)?shù)奈恢脮r(shí)，起始關(guān)鍵幀上的形狀提示點(diǎn)為黃色，結(jié)束關(guān)鍵幀的形狀提示點(diǎn)為綠色，如圖形狀提示點(diǎn)為黃色，結(jié)束關(guān)鍵幀的形狀提示點(diǎn)為綠色，如圖5-34所示所示第第1幀幀 第第10幀幀 顯示為黃色顯示為黃色 顯示為綠色顯示為綠色 圖圖5-33 未調(diào)節(jié)未調(diào)節(jié) 圖圖5-34 調(diào)節(jié)成功調(diào)節(jié)成功 二、形狀提示原理二、形狀提示原理 。 繼續(xù)添加形狀提示點(diǎn)，并調(diào)節(jié)提示點(diǎn)位置，此時(shí)圖形變化的過繼續(xù)添加形狀提示點(diǎn)，并調(diào)節(jié)提示點(diǎn)位置，此時(shí)圖形變化的過程如圖程如圖5-35所示所示 。圖圖5-35 使用形狀提示使用形狀提示 圖圖5-36所示為未添加形狀提示點(diǎn)的變化過程，經(jīng)過觀察可以清所示為未添加形狀提示點(diǎn)的變化過

23、程，經(jīng)過觀察可以清楚的了解形狀提示的功能和原理，即形狀提示點(diǎn)用于識(shí)別起始形狀楚的了解形狀提示的功能和原理，即形狀提示點(diǎn)用于識(shí)別起始形狀和結(jié)束形狀中相對(duì)應(yīng)的點(diǎn)，并用字母和結(jié)束形狀中相對(duì)應(yīng)的點(diǎn)，并用字母a到到z來表示來表示 。圖圖5-36 未使用形狀提示未使用形狀提示 5.2.2 5.2.2 范例解析（一）使用形狀提示點(diǎn)練習(xí) 請(qǐng)同學(xué)們?cè)诶蠋煹膸ьI(lǐng)下對(duì)形狀提示點(diǎn)的創(chuàng)建方法和原理進(jìn)行進(jìn)請(qǐng)同學(xué)們?cè)诶蠋煹膸ьI(lǐng)下對(duì)形狀提示點(diǎn)的創(chuàng)建方法和原理進(jìn)行進(jìn)一步的熟悉，并跟隨以下要求進(jìn)行操作訓(xùn)練。一步的熟悉，并跟隨以下要求進(jìn)行操作訓(xùn)練。1、打開教學(xué)資源中、打開教學(xué)資源中“素材素材第第5講講形狀提示點(diǎn)練習(xí)形狀提示點(diǎn)練習(xí)飛

24、翔的蝙蝠飛翔的蝙蝠.fla”文文件。件。2、分別在第、分別在第1幀第幀第10幀之間，第幀之間，第11幀第幀第20幀之間，第幀之間，第21幀第幀第30幀之間，第幀之間，第31幀第幀第40幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，拖動(dòng)時(shí)間軸幀之間創(chuàng)建形狀補(bǔ)間動(dòng)畫，拖動(dòng)時(shí)間軸觀察圖形的漸變效果，如圖觀察圖形的漸變效果，如圖5-37所示。所示。 圖圖5-37 形狀補(bǔ)間效果形狀補(bǔ)間效果 3、選中、選中“圖層圖層1”的第的第1幀，執(zhí)行幀，執(zhí)行【修改修改】/【形狀形狀】/【添加形狀添加形狀提示提示】菜單命令添加一個(gè)形狀提示點(diǎn)，并將其拖動(dòng)到蝙蝠的菜單命令添加一個(gè)形狀提示點(diǎn)，并將其拖動(dòng)到蝙蝠的翅膀上，如圖翅膀上，如圖5-38所示

25、。選中第所示。選中第10幀，將提示點(diǎn)也拖動(dòng)到蝙幀，將提示點(diǎn)也拖動(dòng)到蝙蝠的翅膀上，此時(shí)形狀提示點(diǎn)變?yōu)榫G色，如圖蝠的翅膀上，此時(shí)形狀提示點(diǎn)變?yōu)榫G色，如圖5-39所示。所示。 通過觀察可以發(fā)現(xiàn)，此時(shí)的形狀補(bǔ)間動(dòng)畫效果并不理想通過觀察可以發(fā)現(xiàn)，此時(shí)的形狀補(bǔ)間動(dòng)畫效果并不理想，整個(gè)形狀補(bǔ)間動(dòng)畫效果顯的十分的雜亂無章，沒有達(dá)，整個(gè)形狀補(bǔ)間動(dòng)畫效果顯的十分的雜亂無章，沒有達(dá)到預(yù)期的效果到預(yù)期的效果 。圖圖5-38 添加形狀提示點(diǎn)一添加形狀提示點(diǎn)一 圖圖5-39 調(diào)整形狀提示點(diǎn)一調(diào)整形狀提示點(diǎn)一 4、使用同樣的方法添加、使用同樣的方法添加3個(gè)形狀提示點(diǎn)，并分別在第個(gè)形狀提示點(diǎn)，并分別在第1幀和第幀和第10幀調(diào)

26、整提示點(diǎn)的位置，效果如圖幀調(diào)整提示點(diǎn)的位置，效果如圖5-40和圖和圖5-41所示。所示。 圖圖5-40 添加形狀提示點(diǎn)二添加形狀提示點(diǎn)二 圖圖5-41 調(diào)整形狀提示點(diǎn)二調(diào)整形狀提示點(diǎn)二 5、使用同樣的方法為后續(xù)的形狀補(bǔ)間動(dòng)畫添加形狀提示點(diǎn)，圖、使用同樣的方法為后續(xù)的形狀補(bǔ)間動(dòng)畫添加形狀提示點(diǎn)，圖5-42所示為第所示為第31幀處的形狀提示點(diǎn)，圖幀處的形狀提示點(diǎn)，圖5-43所示為第所示為第40幀處的幀處的形狀提示點(diǎn)。形狀提示點(diǎn)。 圖圖5-42 添加形狀提示點(diǎn)三添加形狀提示點(diǎn)三 圖圖5-43 調(diào)整形狀提示點(diǎn)三調(diào)整形狀提示點(diǎn)三 6、此時(shí)再拖動(dòng)時(shí)間軸觀察這個(gè)形狀補(bǔ)間動(dòng)畫的變換效果，如圖、此時(shí)再拖動(dòng)時(shí)間軸

27、觀察這個(gè)形狀補(bǔ)間動(dòng)畫的變換效果，如圖5-44所示。所示。圖圖5-44 添加形狀提示點(diǎn)后的效果添加形狀提示點(diǎn)后的效果 5.2.3 范例解析（二）制作“旋轉(zhuǎn)的三棱錐” 本例將使用形狀提示點(diǎn)動(dòng)畫來制作一個(gè)旋轉(zhuǎn)的三棱錐效果，其本例將使用形狀提示點(diǎn)動(dòng)畫來制作一個(gè)旋轉(zhuǎn)的三棱錐效果，其設(shè)計(jì)思路及效果如圖設(shè)計(jì)思路及效果如圖5-45所示。所示。1、素材準(zhǔn)備。、素材準(zhǔn)備。（1）新建一個(gè)）新建一個(gè)Flash文檔，文檔所有屬性使用默認(rèn)參數(shù)文檔，文檔所有屬性使用默認(rèn)參數(shù) 。圖圖5-45 設(shè)計(jì)思路及效果設(shè)計(jì)思路及效果 （2）新建并重命名圖層，直至圖層效果如圖）新建并重命名圖層，直至圖層效果如圖5-46所示。所示。（3）執(zhí)

28、行）執(zhí)行【文件文件】/【導(dǎo)入導(dǎo)入】/【打開外部庫打開外部庫】菜單命令，將教學(xué)資源菜單命令，將教學(xué)資源中的中的“素材素材第第5講講旋轉(zhuǎn)的三棱錐旋轉(zhuǎn)的三棱錐.fla”文件打開，將外部庫里的元件文件打開，將外部庫里的元件和圖片復(fù)制到當(dāng)前和圖片復(fù)制到當(dāng)前【庫庫】面板中，效果如圖面板中，效果如圖5-47所示。所示。 圖圖5-46 圖層效果圖層效果 圖圖5-47 復(fù)制后的復(fù)制后的【庫庫】面板面板 2、設(shè)置主場景。、設(shè)置主場景。（1）選擇）選擇【矩形矩形】工具，在工具，在【屬性屬性】面板中設(shè)置面板中設(shè)置【筆觸顏色筆觸顏色】為為“無無”，【填充顏色填充顏色】的的【類型類型】為為“線性線性”，從左至右第，從左至

29、右第1個(gè)色塊顏個(gè)色塊顏色為色為“#00CCFF”，第，第2個(gè)色塊顏色為個(gè)色塊顏色為“#006666”，在，在“背景背景”圖圖層上繪制一個(gè)寬高為層上繪制一個(gè)寬高為“550px400px”的矩形，其位置坐標(biāo)的矩形，其位置坐標(biāo)x、y分別為分別為“0”、“0”，如圖，如圖5-48所示所示 。【顏色顏色】面板面板 矩形最終效果矩形最終效果 圖圖5-48 繪制背景繪制背景 （2）將）將【庫庫】面板中名為面板中名為“邊框邊框”的元件放置到的元件放置到“邊框邊框”圖層上圖層上，并與舞臺(tái)居中對(duì)齊，效果如圖，并與舞臺(tái)居中對(duì)齊，效果如圖5-49所示。所示。3、繪制輔助圖形、繪制輔助圖形 。（1）選擇）選擇【多角星形

30、多角星形】工具工具 ，在，在【屬性屬性】面板中設(shè)置面板中設(shè)置【筆觸高度筆觸高度】為為“1”，【筆觸顏色筆觸顏色】為為“紅色紅色”，設(shè)置，設(shè)置【填充顏色填充顏色】為為“無無”，單擊，單擊 按鈕打開按鈕打開【工具設(shè)置工具設(shè)置】對(duì)話框，并設(shè)置對(duì)話框，并設(shè)置【邊數(shù)邊數(shù)】為為“3”，單擊，單擊 按鈕完成設(shè)置。按鈕完成設(shè)置。 （2）在）在“輔助層輔助層”圖層上繪制一個(gè)寬高為圖層上繪制一個(gè)寬高為“242.9px213px”的三角形，其位置坐標(biāo)的三角形，其位置坐標(biāo)x、y分別為分別為“153.6”、“93.5”，效果如，效果如圖圖5-50所示所示 。圖圖5-49 布置上下邊框布置上下邊框 圖圖5-50 繪制三角

31、形繪制三角形 （3）選擇）選擇【線條線條】工具，在工具，在【屬性屬性】面板中設(shè)置面板中設(shè)置【筆觸高度筆觸高度】為為“1”，【筆觸顏色筆觸顏色】為為“紅色紅色”，在，在“輔助層輔助層”圖層上的三角圖層上的三角形右邊繪制兩條邊作為三棱錐的側(cè)邊，效果如圖形右邊繪制兩條邊作為三棱錐的側(cè)邊，效果如圖5-51所示所示 。在繪制兩條邊時(shí)，注意線段需要兩兩相交，為后面填充在繪制兩條邊時(shí)，注意線段需要兩兩相交，為后面填充圖形和對(duì)齊圖形做好準(zhǔn)備圖形和對(duì)齊圖形做好準(zhǔn)備 。圖圖5-51 繪制側(cè)邊繪制側(cè)邊 （4）選中步驟（）選中步驟（3）中繪制的兩條邊，按）中繪制的兩條邊，按Ctrl+T快捷鍵打開快捷鍵打開【變變形形】

32、面板，圖形旋轉(zhuǎn)的參數(shù)設(shè)置如圖面板，圖形旋轉(zhuǎn)的參數(shù)設(shè)置如圖5-52所示，然后單擊按鈕，所示，然后單擊按鈕，復(fù)制兩條邊，水平移動(dòng)到三角形的左側(cè)，效果如圖復(fù)制兩條邊，水平移動(dòng)到三角形的左側(cè)，效果如圖5-53所示所示。復(fù)制后的兩條邊圖圖5-52 【變形變形】面板面板 圖圖5-53 復(fù)制兩條邊復(fù)制兩條邊 （5）在所有圖層的第）在所有圖層的第60幀處插入幀，效果如圖幀處插入幀，效果如圖5-54所示所示 。4、制作旋轉(zhuǎn)三棱錐效果、制作旋轉(zhuǎn)三棱錐效果 。（1）將）將【庫庫】面板中名為面板中名為“圖片圖片1.jpg”的圖片放置到的圖片放置到“第一面第一面”圖圖層上，并與舞臺(tái)居中對(duì)齊，然后選中舞臺(tái)上的圖片按層上，

33、并與舞臺(tái)居中對(duì)齊，然后選中舞臺(tái)上的圖片按Ctrl+B快快捷鍵將圖片打散，效果如圖捷鍵將圖片打散，效果如圖5-55所示所示 打散圖片圖圖5-54 在第在第60幀處插入幀幀處插入幀 圖圖5-55 放置第一張圖片放置第一張圖片 （2）選中）選中“輔助層輔助層”圖層的第圖層的第1幀，按幀，按Ctrl+C快捷鍵復(fù)制當(dāng)前幀的快捷鍵復(fù)制當(dāng)前幀的圖形。圖形。 在復(fù)制當(dāng)前幀圖形前，先檢查圖形是否都被打散，如果存在復(fù)制當(dāng)前幀圖形前，先檢查圖形是否都被打散，如果存在沒有打散的圖形，需要先將圖形打散后才進(jìn)行復(fù)制操作在沒有打散的圖形，需要先將圖形打散后才進(jìn)行復(fù)制操作，這樣才能實(shí)現(xiàn)后面操作中分離圖的效果，這樣才能實(shí)現(xiàn)后面

34、操作中分離圖的效果 （3）選中）選中“第一面第一面”圖層的第圖層的第1幀，按幀，按Ctrl+Shift+V 快捷鍵將圖形快捷鍵將圖形粘貼到當(dāng)前位置，鎖定并隱藏粘貼到當(dāng)前位置，鎖定并隱藏“輔助層輔助層”圖層，效果如圖圖層，效果如圖5-56所所示。示。（4）選擇）選擇“第一面第一面”圖層上的圖形，將多余的線條和填充區(qū)域刪除圖層上的圖形，將多余的線條和填充區(qū)域刪除，只保留正面三角形區(qū)域的圖形，效果如圖，只保留正面三角形區(qū)域的圖形，效果如圖5-57所示。所示。 鎖定并隱藏圖層圖圖5-56 鎖定并隱藏鎖定并隱藏“輔助層輔助層”圖層圖層 圖圖5-57 分離后的圖形分離后的圖形 （5）在）在“第一面第一面”

35、圖層的第圖層的第20幀、第幀、第40幀和第幀和第60幀處插入關(guān)鍵幀幀處插入關(guān)鍵幀，然后在第，然后在第21幀處插入空白關(guān)鍵幀。幀處插入空白關(guān)鍵幀。（6）取消隱藏）取消隱藏“輔助層輔助層”圖層，選中圖層，選中“第一面第一面”圖層的第圖層的第20幀處幀處的圖形，將圖形下面兩個(gè)頂點(diǎn)移動(dòng)到如圖的圖形，將圖形下面兩個(gè)頂點(diǎn)移動(dòng)到如圖5-58所示的位置。然所示的位置。然后選擇后選擇【填充變形填充變形】工具，向左上移動(dòng)填充區(qū)域的中心點(diǎn)，效果如圖工具，向左上移動(dòng)填充區(qū)域的中心點(diǎn)，效果如圖5-59所示。所示。移 動(dòng) 兩個(gè)頂點(diǎn)圖圖5-58 改變圖形形狀改變圖形形狀 圖圖5-59 調(diào)節(jié)漸變的中心位置調(diào)節(jié)漸變的中心位置

36、（7）選中）選中“第一面第一面”圖層的第圖層的第40幀處的圖形，將圖形下面兩個(gè)頂點(diǎn)移幀處的圖形，將圖形下面兩個(gè)頂點(diǎn)移動(dòng)到如圖動(dòng)到如圖5-60所示的位置。然后選擇所示的位置。然后選擇【填充變形填充變形】工具，向右上移工具，向右上移動(dòng)填充區(qū)域的中心點(diǎn)，效果如圖動(dòng)填充區(qū)域的中心點(diǎn)，效果如圖5-61所示所示 。 移動(dòng)兩個(gè)頂點(diǎn)圖圖5-60 改變圖形形狀改變圖形形狀 圖圖5-61 調(diào)節(jié)漸變的中心位置調(diào)節(jié)漸變的中心位置 （8）隱藏）隱藏“輔助層輔助層”圖層，選擇圖層，選擇“第一面第一面”圖層，在第圖層，在第1幀和第幀和第20幀，幀，第第40幀和第幀和第60幀之間分別創(chuàng)建形狀補(bǔ)間動(dòng)畫，觀察它們的變化，效幀之間

37、分別創(chuàng)建形狀補(bǔ)間動(dòng)畫，觀察它們的變化，效果如圖果如圖5-62所示。所示。 第第10幀處的圖形幀處的圖形 第第50幀處的圖形幀處的圖形 圖圖5-62 變形對(duì)比變形對(duì)比 從圖5-62分析可知，第1幀到第20幀的變形是符合需要的動(dòng)畫效果，而第40幀到第60幀的變形是不符合需要的動(dòng)畫效果，這就需要添加形狀提示點(diǎn)，讓變形的效果達(dá)到這里需要的動(dòng)畫效果 。（9）選擇）選擇“第一面第一面”圖層的第圖層的第40幀，執(zhí)行幀，執(zhí)行【修改修改】/【形狀形狀】/【添添加形狀提示點(diǎn)加形狀提示點(diǎn)】菜單命令，為圖形添加菜單命令，為圖形添加3個(gè)形狀提示點(diǎn)，其分布如圖個(gè)形狀提示點(diǎn)，其分布如圖5-63所示。所示。（10）選擇）選擇

38、“第一面第一面”圖層的第圖層的第60幀，調(diào)整形狀提示點(diǎn)的分布，效幀，調(diào)整形狀提示點(diǎn)的分布，效果如圖果如圖5-64所示所示。圖圖5-63 第第40幀處提示點(diǎn)的分布幀處提示點(diǎn)的分布 圖圖5-64 第第60幀處提示點(diǎn)的分布幀處提示點(diǎn)的分布 在這里添加形狀提示點(diǎn)時(shí)，一定要將 “b”放到上面的頂點(diǎn)處，這樣變形才是動(dòng)畫需要的變形效果。同學(xué)們可以試一試其他的分布順序，并觀察它們的變形效果有何不同。（11）至此，第）至此，第1張圖片的動(dòng)畫制作已經(jīng)完成張圖片的動(dòng)畫制作已經(jīng)完成 。（12）制作）制作“第二面第二面”和和“第三面第三面”圖層上的動(dòng)畫效果的方法和制圖層上的動(dòng)畫效果的方法和制作作“第一面第一面”的方法相

39、同，這里給出相關(guān)信息如圖的方法相同，這里給出相關(guān)信息如圖5-65所示，從而所示，從而方便讀者完成余下工作方便讀者完成余下工作 。（13）刪除）刪除“輔助層輔助層”圖層。圖層。（14）保存測(cè)試影片，一個(gè)旋轉(zhuǎn)的三棱錐效果制作完成。）保存測(cè)試影片，一個(gè)旋轉(zhuǎn)的三棱錐效果制作完成。第二面信息第二面信息 第三面信息第三面信息 圖圖5-65 制作第二面和第三面信息制作第二面和第三面信息 5.2.4 課堂練習(xí)課堂練習(xí)制作制作“舌頭也搖舌頭也搖擺擺” 使用形狀提示點(diǎn)可以制作出各種復(fù)雜的形狀漸變動(dòng)，本例將使使用形狀提示點(diǎn)可以制作出各種復(fù)雜的形狀漸變動(dòng)，本例將使用形狀提示點(diǎn)制作一個(gè)可愛的卡通蛇吐著舌頭，呆呆的看著你的動(dòng)用形狀提示點(diǎn)制作一個(gè)可愛的卡通蛇吐著舌頭