1第13章創(chuàng)建形狀補(bǔ)間動畫形狀補(bǔ)間動畫是Flash中非常重要的表現(xiàn)手法之一，運(yùn)用它可以變幻出各種奇妙的不可思議的變形效果，如圖13-1所示。下面從形狀補(bǔ)間動畫基本概念入手，帶領(lǐng)讀者認(rèn)識形狀補(bǔ)間動畫的各種特性，了解補(bǔ)間動畫的創(chuàng)建方法，學(xué)會應(yīng)用“形狀提示”讓圖形的形變自然流暢，最后制作一個(gè)完整的形狀補(bǔ)間動畫實(shí)例，幫助讀者更深入地了解形狀補(bǔ)間動畫。213.1創(chuàng)建形狀補(bǔ)間動畫形狀補(bǔ)間動畫可以實(shí)現(xiàn)兩個(gè)圖形之間顏色、形狀、大小、位置的相互變化，其變形的靈活性介于逐幀動畫和動作補(bǔ)間動畫之間，使用的元素多為用鼠標(biāo)或壓感筆繪制出的形狀。如果使用圖形元件、按鈕、文字，則必先“打散”再變形，如圖13-2所示。形狀補(bǔ)間動畫創(chuàng)建好后，【時(shí)間軸】面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有箭頭表示；如果創(chuàng)建失敗則為虛線表示，如圖13-3所示。313.1創(chuàng)建形狀補(bǔ)間動畫1.在時(shí)間軸中創(chuàng)建2.在命令菜單中創(chuàng)建413.2形狀提示的運(yùn)用形狀提示的作用是解決形狀補(bǔ)間動畫在形成的過程中，場景中的對象出現(xiàn)糾結(jié)的情況，如圖13-12所示。想要控制更加復(fù)雜的形狀變化，可以使用形狀提示。形狀提示會標(biāo)識起始形狀和結(jié)束形狀中的相對應(yīng)的點(diǎn)，以幫助制我們更準(zhǔn)確地掌握動畫的變形過程。513.2.1形狀提示的效果我們通過一個(gè)練習(xí)來演示形狀提示的效果。(1)首先繪制出場景中的圖形，如圖13-13所示。(2)可以看到一個(gè)“星形”的形狀補(bǔ)間動畫在播放的過程中，對象糾結(jié)到一起，出現(xiàn)圖形錯(cuò)亂，沒有達(dá)到我們想要制作的效果，如圖13-14所示。613.2.1形狀提示的效果(3)我們通過為動畫添加“形狀提示”來規(guī)范形狀補(bǔ)間動畫在播放過程中圖形變化的位置和大小等因素，如圖13-15所示。(4)播放動畫，發(fā)現(xiàn)形狀補(bǔ)間動畫的運(yùn)動過程發(fā)生了變化，如圖13-16所示。(5)添加“形狀提示”后的形狀補(bǔ)間動畫結(jié)束幀效果如圖13-17所示。713.2.2形狀提示的添加方法添加“形狀提示”的具體操作步驟如下。(1)打開剛才用過的那個(gè)場景文件，如圖13-18所示。(2)選擇【變形】圖層的第1幀，選擇【修改】|【形狀】|【添加形狀提示】菜單命令，如圖13-19所示。圖13-20形狀提示a(3)添加“形狀提示”后，在圖形的中央位置出現(xiàn)了紅色的“a”標(biāo)注，如圖13-20所示。813.2.2形狀提示的添加方法(4)“形狀提示”圖形中有三種表現(xiàn)形式，第一種是紅色，表示調(diào)整形狀提示后沒有對位置進(jìn)行調(diào)整。第二種是黃色，表示調(diào)整位置后開始幀變化的顏色。第三種是綠色，表示調(diào)整位置后結(jié)束幀變化的顏色，如圖13-21所示。(5)在圖層的開始幀，使用鼠標(biāo)拖曳“形狀提示a”到圖形的左上角，如圖13-22所示。(6)在圖層的結(jié)束幀，使用鼠標(biāo)拖曳“形狀提示a”到圖形的左上角，如圖13-23所示。913.2.2形狀提示的添加方法(7)播放補(bǔ)間動畫，觀察形狀補(bǔ)間動畫的變形過程，如圖13-24所示。(8)圖像還是發(fā)生了糾結(jié)的情況，看來添加一個(gè)“形狀提示”還是不夠的。返回圖層的第1幀，選擇【變形】圖層的第1幀，選擇【修改】|【形狀】|【添加形狀提示】命令，如圖13-25所示。(9)為形狀補(bǔ)間動畫添加“形狀提示b”，如圖13-26所示。1013.2.2形狀提示的添加方法(10)在圖層的第1幀，用鼠標(biāo)拖曳“形狀提示b”到圖形的左側(cè)，如圖13-27所示。(11)選擇圖層的第40幀，用鼠標(biāo)拖曳“形狀提示b”到圖形的左側(cè)，如圖13-28所示。(12)播放補(bǔ)間形狀動畫，觀察補(bǔ)間形狀動畫的變形過程，在添加了兩個(gè)“形狀提示”后，最終獲得了我們滿意的形狀補(bǔ)間動畫效果，如圖13-29所示。1113.3上機(jī)實(shí)踐操作本范例完成文件：\13\書翻頁效果.fla。多媒體教學(xué)路徑：光盤→多媒體教學(xué)→第13章。1213.3.1實(shí)例介紹和展示通過以上的學(xué)習(xí)，我們學(xué)會了創(chuàng)建形狀補(bǔ)間動畫，以及為補(bǔ)間動畫添加“形狀提示”，最后我們通過創(chuàng)建一個(gè)實(shí)例來綜合地運(yùn)用之前所學(xué)習(xí)的知識點(diǎn)。本例通過運(yùn)用【新建】命令、【繪圖工具】、【選擇工具】、【顏色】面板、【顏料桶工具】、【創(chuàng)建補(bǔ)間形狀】命令等繪制圖書翻頁的效果，如圖13-30所示。1313.3.2繪制書頁(1)新建一個(gè)空白文件，保持默認(rèn)設(shè)置。(2)按Ctrl+F8組合鍵，打開【創(chuàng)建新元件】對話框，新建一個(gè)圖形元件，如圖13-31所示。(3)選擇元件的【類型】為【圖形】，單擊【確定】按鈕，進(jìn)入圖形元件的編輯界面，如圖13-32所示。1413.3.2繪制書頁(4)選擇【工具】面板中的【矩形工具】，在工作區(qū)中繪制一個(gè)矩形，如圖13-33所示。(5)選擇【工具】面板中的【選擇工具】，調(diào)整矩形上下邊框的形狀，如圖13-34所示。(6)選擇【窗口】|【顏色】菜單命令，如圖13-35所示。1513.3.2繪制書頁(7)打開【顏色】面板，選擇【類型】為【線性漸變】，設(shè)置左側(cè)指針的顏色為“#3399cc”，右側(cè)指針的顏色設(shè)置為“#fFFFFFF”，如圖13-36所示。(8)使用【工具】面板中的【顏料桶工具】按鈕，為調(diào)整后的矩形填充顏色，如圖13-37所示。(9)使用【工具】面板中的【線條工具】按鈕，在矩形的側(cè)面繪制幾條直線，如圖13-38所示。1613.3.3制作書本(1)返回場景中，將圖形元件【元件1】拖曳到工作區(qū)中，在工作區(qū)中創(chuàng)建一個(gè)實(shí)例，如圖13-39所示。(2)單擊時(shí)間軸下面的【新建圖層】按鈕，新建一個(gè)圖層，如圖13-40所示。(3)選中【圖層1】中的圖形元件“元件1”并右擊，在彈出的快捷菜單中選擇【復(fù)制】命令，如圖13-41所示。1713.3.3制作書本(4)單擊【圖層2】的第1幀并右擊，在彈出的快捷菜單中選擇【粘貼】命令，如圖13-42所示。此時(shí)，“元件1”實(shí)例復(fù)制到了場景中，如圖13-43所示。1813.3.3制作書本(5)選擇【修改】|【變形】|【水平翻轉(zhuǎn)】菜單命令，如圖13-44所示。再運(yùn)用【工具】面板中的【選擇工具】調(diào)整圖形的位置，翻轉(zhuǎn)后的圖形效果如圖13-45所示。1913.3.4制作翻頁效果(1)單擊【圖層1】的第50幀，按Shift鍵的同時(shí)單擊【圖層2】的第50幀，然后按F5鍵，延長圖層的幀數(shù)，如圖13-46所示。(2)單擊時(shí)間軸下方的【新建圖層】圖標(biāo)，新建一個(gè)圖層，如圖13-47所示。(3)單擊【圖層3】的第1幀，選擇【工具】面板中的【矩形工具】，在工作區(qū)中繪制一個(gè)矩形并調(diào)整其形狀和位置，如圖13-48所示。2013.3.4制作翻頁效果(4)單擊【圖層3】的第50幀，按F6鍵，插入關(guān)鍵幀，如圖13-49所示。(5)選擇【工具】面板中的【修改】|【變形】|【水平翻轉(zhuǎn)】命令，調(diào)整圖形的位置，如圖13-50所示。(6)單擊【圖層3】的第12幀，按F7鍵，插入空白關(guān)鍵幀，然后繪制一個(gè)矩形并調(diào)整其形狀和位置，如圖13-51所示。2113.3.4制作翻頁效果(7)單擊【圖層3】的第37幀，按F7鍵，插入空白關(guān)鍵幀，繪制一個(gè)矩形并調(diào)整其形狀和位置，如圖13-52所示。(8)單擊【圖層3】的第24幀，按F7鍵，插入空白關(guān)鍵幀，選擇【工具】面板中的【矩形工具】，在工作區(qū)中繪制矩形，并調(diào)整位置和大小，如圖13-53所示。(9)單擊【圖層3】的第25幀，按F7鍵，插入空白關(guān)鍵幀，選擇【工具】面板中的【矩形工具】，在工作區(qū)中繪制矩形，并調(diào)整其位置和大小，如圖13-54所示。2213.3.4制作翻頁效果(10)在【圖層3】的第1幀到第12幀之間右擊，在彈出的快捷菜單中選擇【創(chuàng)建補(bǔ)間形狀】命令，如圖13-55所示。(11)按照上一步的方法，在第12幀到第24幀之間創(chuàng)建形狀補(bǔ)間動畫，如圖13-56所示。(12)按照前面學(xué)習(xí)過的方法，在第25幀到第37幀之間創(chuàng)建形狀補(bǔ)間動畫，如圖13-57所示。2313.3.4制作翻頁效果(13)按照上一步的方法，在第37幀到第5