1、第6課 形狀補間動畫本課素材下載形狀補間動畫是Flash中非常重要的表現手法之一，運用它，你可以變幻出各種奇妙的、不可思議的變形效果。 本課從形狀補間動畫基本概念入手，帶你認識形狀補間動畫在時間幀上的表現，了解補間動畫的創建方法，學會應用“形狀提示”讓圖形的形變自然流暢。 學習目的u       創建形狀補間動畫 u       將文字轉變為形狀 u       添加形狀提示 課前熱身實例1慶祝國慶 國慶的夜空絢麗多

2、彩，朵朵禮花在天空中綻放，遠處傳來禮炮的轟鳴聲，讓我們來給這美麗的夜晚增加點喜慶，掛幾個大紅燈籠來慶祝祖國的生日吧！實例播放效果如下所示。制作步驟 步驟1 創建新文檔 執行【文件】|【新建】命令，在彈出的對話框中選擇【常規】|【Flash文檔】選項后，單擊【確定】按鈕，新建一個影片文檔，在【屬性】面板上設置文件大小為400×330像素，【背景色】為白色，如圖3-3-5所示。 圖3-3-5 文檔屬性 步驟2 創建背景圖層 執行【文件】|【導入】|【導入到舞臺】命令，將名為“節日夜空.jpg”圖片導入到場景中，選擇第80幀，按鍵盤上的F5鍵，增加一個普通幀，如圖3-3-6所示。

3、 圖3-3-6 插入背景圖片步驟3 創建燈籠形狀 我們先來畫燈籠，執行【窗口】|【設計面板】|【混色器】命令，打開【混色器】面板，設置各項參數，漸變的顏色為白色到紅色，如圖3-3-7所示。 圖3-3-7 【混色器】面板設置之一新建一個圖層，并將其重新命名為“燈籠一”。選擇工具箱中的【橢圓工具】，設置【筆觸顏色】為無，在場景中繪制出一個橢圓做燈籠的主體，大小為65×40像素。 接著我們來畫燈籠上下的邊，打開【混色器】面板，按照如圖3-3-8所示設置深黃色到淺黃色的【線性】漸變填充。從左到右三個填充色塊的顏色值分別為：#FF9900、#FFFF00、#FFCC00。 圖3-3-8 【混色

4、器】面板設置之二選擇工具箱上的【矩形工具】，設置【筆觸顏色】為無，繪制出一個矩形，大小為30×10像素，復制這個矩形，分別放在燈籠的上下方，再畫一個小的矩形，長寬為7×10像素，作為燈籠上面的提手。 最后用【線條工具】，在燈籠的下面畫幾條黃色線條做燈籠穗，一個漂亮的燈籠就畫好了。如圖3-3-9所示（為了能清楚的顯示燈籠，可暫時將背景色改為藍色）。圖3-3-9 畫好的燈籠步驟4 復制粘貼四個燈籠 復制剛畫好的燈籠，新建三個圖層，在每個圖層中粘貼一個燈籠，調整燈籠的位置，使其錯落有致地排列在場景中。 在第20、40幀處為各圖層添加關鍵幀，如圖3-3-10所示。 圖3-3-10

5、錯落有致的燈籠及時間軸面板步驟5 把文字轉為形狀取代燈籠 選取第一個燈籠，在第40幀處用文字“慶”取代燈籠，在【屬性】面板上，設置文本類型為【靜態文本】，字體為【隸書】，字體大小為60，顏色為紅色。 對“慶”字執行【修改】|【分離】命令，把文字轉為形狀。如圖3-3-11所示。 圖3-3-11 用“慶”字替換第一個燈籠依照以上步驟，在第40幀處的相應圖層上依次用“祝”、“國”、“慶”三個字取代另外三個燈籠，并執行【分散】操作，其效果如圖 3-3-12所示。圖3-3-12 用文字形狀取代燈籠形狀及文字打散步驟6 設置文字形狀到燈籠形狀的轉變。 在“燈籠”各圖層的第60幀及80幀處，分別添加關鍵幀，

6、現在，在80幀處各“燈籠”圖層中的內容為“文字圖形”，應該把它們換成“燈籠”。 具體辦法是分別復制第20幀中的“燈籠”圖形，再分別粘貼到第80幀中，當然，你應該先清除第80幀處4個“燈籠”圖層中的內容哦！ 步驟7 創建形狀補間動畫。 在“燈籠”各圖層的第20、60幀處單擊幀，在【屬性】面板上單擊【補間】旁邊的小三角，在彈出的菜單中選擇【形狀】，建立形狀補間動畫，如圖3-3-13所示。 圖3-3-13 創建形狀補間動畫步驟8 導入聲音和設置聲音 執行【文件】|【導入】|【導入到庫】命令，打開名為“sound.mp3”的文件，將其導入到庫中。 添加一層，在第20、60幀處按F6鍵，創建關鍵幀，在【

7、屬性】面板上單擊【聲音】旁邊的小三角，選擇sound.mp3，如圖3-3-14所示。 圖3-3-14 聲音設置 設置好的時間幀面板如圖3-3-15所示。圖3-3-15 設置好的時間幀面板 說明：有關聲音導入及應用的詳細內容請參閱本教程第12的相關內容。實例2添加形狀提示練習為得到流暢自然的形狀變形動畫，可以添加形狀提示，本例是專為此而設計的練習。 我們先看看下面的范例效果。這2個同樣是“形狀變形”，其中右邊的變形用了變形“參考點”，從中，我們可以看出變形效果有明顯的差異。 圖3-3-16 添加形狀提示實例界面步驟1 創建新文檔 執行【文件】|【新建】命令，新建一個

8、影片文檔，設置舞臺尺寸為300×200像素，設置【背景色】為藍色#0000FF。 步驟2 創建變形對象。 我們要在場景中寫二個數字“1”，讓它們同時變形，一個加形狀提示，一個不加形狀提示，看看這二個變形有什么不同。 先在【圖層1】的場景左邊輸入數字“1”，在【屬性】面板上，設置文本格式為【靜態文本】、字體為隸書、字號為100、【顏色】為白色。再建一個【圖層2】，在場景右邊輸入數字“1”，參數同上，此層是添加形狀提示層。然后在兩個圖層的第40幀處添加關鍵幀，各輸入數字“2”，在第60幀處添加普通幀，使變形后的文字稍做停留。步驟3 把字符轉為形狀 逐一選取各層數字的第1、40幀，執行【修

9、改】|【分離】命令，把數字打散，轉為形狀。步驟4 創建補間動畫 在【圖層1】和【圖層2】的第一幀處各自建立形狀補間動畫。步驟5 添加形狀提示 選擇【圖層2】的第1幀，執行【修改】|【形狀】|【添加形狀提示】命令2次，如圖3-3-17所示。 圖3-2-17 添加形狀提示菜單 確認工具箱中的【對齊對象】按鈕處于被按下狀態，調整第1、40幀處的形狀提示，如圖3-3-18所示。    圖3-3-18 添加形狀提示的第1、40幀步驟6 添加文字說明 新建一層，在兩個漸變的下面分別寫上“未加形狀提示”、“加用形狀提示”的說明。在第60幀處加普通幀。 至此，這個實例制

10、作完成，測試一下，看看效果，你能體會到添加形狀提示的巧妙之處了吧。課堂講解前面，我們制作了兩個形狀補間動畫的實例，對形狀補間動畫已經有了概括的認識，下面我們系統講解一下有關形狀補間動畫的知識。1形狀補間動畫的概念（1）形狀補間動畫的概念 在一個關鍵幀中繪制一個形狀，然后在另一個關鍵幀中更改該形狀或繪制另一個形狀，Flash 根據二者之間的幀的值或形狀來創建的動畫被稱為“形狀補間動畫”。 （2）構成形狀補間動畫的元素 形狀補間動畫可以實現兩個圖形之間顏色、形狀、大小、位置的相互變化，其變形的靈活性介于逐幀動畫和動作補間動畫二者之間，使用的元素多為用鼠標或壓感筆繪制出的形狀，如果使用圖形元件、按鈕

11、、文字，則必先“打散”才能創建變形動畫。 （3）形狀補間動畫在時間幀面板上的表現 形狀補間動畫建好后，時間幀面板的背景色變為淡綠色，在起始幀和結束幀之間有一個長長的箭頭，如圖3-3-1所示。 圖3-3-1 形狀補間動畫在時間幀面板上的標記（4）創建形狀補間動畫的方法 在時間軸面板上動畫開始播放的地方創建或選擇一個關鍵幀并設置要開始變形的形狀，一般一幀中以一個對象為好，在動畫結束處創建或選擇一個關鍵幀并設置要變成的形狀，再單擊開始幀，在【屬性】面板上單擊【補間】旁邊的小三角，在彈出的菜單中選擇【形狀】，此時，時間軸上的變化如圖3-3-1所示，一個形狀補間動畫就創建完畢。 2認識形狀補間動畫的屬性

12、面板Flash的【屬性】面板隨鼠標選定的對象不同而發生相應的變化。當我們建立了一個形狀補間動畫后，單擊幀，【屬性】面板如圖3-3-2所示。圖3-3-2 形狀補間動畫的【屬性】面板 形狀補間動畫的【屬性】面板上只有二個參數：（1）“簡易”選項 單擊其右邊的按鈕，會彈出滑動桿，拖動上面的滑塊可以調節參數值，當然也可以在文本框中直接輸入具體的數值，設置后，形狀補間動畫會隨之發生相應的變化。u       在1到 -100 的負值之間，動畫運動的速度從慢到快，朝運動結束的方向加速度補間。u   

13、0;   在1 到 100 的正值之間，動畫運動的速度從快到慢，朝運動結束的方向減慢補間。u       默認情況下，補間幀之間的變化速率是不變的。 （2）“混合”選項 “混合”選項中有二項供選擇：u       【角形】選項：創建的動畫中間形狀會保留有明顯的角和直線，適合于具有銳化轉角和直線的混合形狀。u       【分布式】選項：創建的動畫中間形狀比較平滑和不規則。 3使用形狀提示形狀補間動

14、畫看似簡單，實則不然，Flash在“計算”2個關鍵幀中圖形的差異時，遠不如我們想象中的“聰明”，尤其前后圖形差異較大時，變形結果會顯得亂七八糟，這時，“形狀提示”功能會大大改善這一情況。 （1）     形狀提示的作用 在“起始形狀”和“結束形狀”中添加相對應的“參考點”，使Flash在計算變形過渡時依一定的規則進行，從而較有效地控制變形過程。 （2）添加形狀提示的方法    先在形狀補間動畫的開始幀上單擊一下，再執行【修改】|【形狀】|【添加形狀提示】命令，該幀的形狀上就會增加一個帶字母的紅色圓圈，相應地，在結束幀形狀中也

15、會出現一個“提示圓圈”，用鼠標左鍵單擊并分別按住這2個“提示圓圈”，放置在適當位置，安放成功后開始幀上的“提示圓圈”變為黃色，結束幀上的“提示圓圈”變為綠色，安放不成功或不在一條曲線上時，“提示圓圈”顏色不變，如圖3-3-3所示。 圖3-3-3 添加形狀提示后各幀的變化說明：在制作復雜的變形動畫時，形狀提示的添加和拖放要多方位嘗試，每添加一個形狀提示，最好播放一下變形效果，然后再對變形提示的位置做進一步的調整。（3）添加形狀提示的技巧u       “形狀提示”可以連續添加，最多能添加26個。u       將變形提示從形狀的左上角開始按逆時針順序擺放，將使變形提示工作得更有效。u       形狀提示的擺放位置也要符合邏輯順序。例如，起點關鍵幀和終點關鍵幀上各有一個三角形，我們使用3個“形狀提示”，如果它們在起點關鍵幀的三角形上的順序為abc，那么在重點關鍵幀的三角形上的順序就不能是acb，也要是abc。u