Flash動畫學習指南十二: 形狀補間

轉自:http://bbs.9ria.com/thread-74979-1-1.html


本帖最後由 skyplan 於 2011-3-2 10:15 編輯

預備知識:Flash工作空間的基本知識。

受衆水平:初學者。

所需產品: Flash Professional CS4 (下載試用版




通過補間形狀,您可以創建一個類似的變形--隨着時間的推移一個形狀轉換成另一種形狀--或者顏色和漸變動畫效果。 FLASH也可以補間形狀的位置,大小,顏色和透明度。例如,您可以使用形狀補間,使一個圓形變成方形 , 或者使一條線擺動。
注意:形狀補間與關鍵幀或基於對象的漸變的概念不同。一個形狀補間是爲位於兩個關鍵幀上的兩個單獨形狀之間創建插值動畫。想了解這種類型的關鍵幀信息,請閱讀下一節內容。

創建形狀補間
一次補間一個形狀通常會產生最佳效果。如果您在同一時間補間多個形狀,並希望他們能夠變形在一起,所有的形狀必須在同一層。否則,對於一些特效,您需要分別在每個單獨的層上對每個形狀作形狀補間(如果您不希望它們互相影響)。在圖62中,每個矩形--背景中的窗簾效果,以及頂部的矩形---都在自己單獨的層上進行補間(見源文件中shape-tween.fla)。

tweens.jpg 
圖62 每個形狀都在自己的層上進行補間,所以形狀變化都是分開進行的。

爲了將形狀補間應用到組,實例或位圖圖像,您必須首先將這些元素打散(Modify > Break Apart)。爲了將形狀補間應用到文本,您必須將文本打散兩次使得文本轉成多個對象。
注意:要控制更加複雜的或不可能的形狀改變,您需要使用形狀提示,它控制如何將原來的形狀的部分變動到新的形狀。有關信息,請參閱下一節使用形狀補間形狀提示

要補間形狀:

1. 創建一個新文件,並將其命名爲 shapetween.fla。
2. 選擇圖層1的第1幀。這是動畫的開始。
3. 使用鋼筆,橢圓形,矩形,鉛筆或畫筆工具創建一個圖形。爲獲得最佳結果,當您開始時畫面應該只包含一個圖形(如單個橢圓形)。
4. 選擇圖層1的第10幀,創建第二個關鍵幀(F6)。
5. 選擇在第10幀舞臺上的藝術作品(artwork),並執行下列操作之一:
  .修改藝術品的形狀,顏色,透明度,或位置。
  .在第二個關鍵幀(它應該是原始圖形繪製),刪除藝術作品並放置新的藝術作品。
6. 右鍵單擊在1到10幀之間的時間軸上的任何一幀,然後從上下文菜單中選擇創建形狀補間(Create Shape Tween)。
7. 從屬性檢查器選擇一個Blend(Window > Properties)選項:
  . Distributive 創建一個動畫,使其中間形狀變化更順暢,更不規則。
  . Angular  創建一個動畫,使其在中間變化時,保留形狀明顯的角和直線。
注:角是適當的,尖銳的角和直線的混合形狀而已。如果您選擇的形狀沒有角,Flash恢復到Distributive類型的形狀補間。

當進行形狀補間時使用形狀提示(shape hints)

爲了控制更復雜的或不可能的形狀改變,您可以使用形狀提示。形狀提示可以找出對應點,用來對應在開始和結束形狀上。例如,如果您是漸變字母M到字母N,您可以使用形狀提示來標示字母的形狀角落。然後,在字母變形中每個字母仍可以清晰分辨,而不是成爲一個雜亂的線條形狀的變化。
提示:有時形狀提示可以產生意想不到的結果,或者您可能用形狀提示仍無法達到您想要的效果。您可能想嘗試使用inverse kinematics (IK)而不是一個形狀,即使用骨骼結構最爲動畫的對象。要了解如何做到這一點,請閱讀在Creating animation in ActionScript 3.0中的"Animating with the Bone tool"。

要使用形狀提示:
1. 創建形狀補間(參見上一節,“創建形狀補間“)。
2. 選擇第1幀和時間軸上的動畫層。
3. 選擇Modify > Shape > Add Shape Hint。
4. 將您要標記的形狀提示移動到形狀的邊或角落。
5. 選擇補間序列的下一個關鍵幀。
6. 將形狀提示移動到最終形狀的邊緣或角落,它應該對應於第一個形狀上的形狀提示標記位置。
重複此過程,添加剩下的形狀提示。新的提示出現在下面的字母上(b, c, 依此類推)。

圖63動畫的SWF文件顯示了字母M到字母N的動畫。最上面的SWF文件沒有用形狀提示來變形這兩個字母,而下面的SWF文件使用了形狀提示來改進這種變形。通過圖64(和源文件的shape-hints.fla)您可以看到每個形狀提示是如何放置的。




圖63。頂部的SWF文件顯示兩個字母之間的默認形狀補間。底部的SWF文件顯示使用形狀提示來控制字母變形的動畫。

mn.jpg 
圖64。增加了形狀提示來控制兩個字母之間的變形。您可以在圖63看到它的動畫。

形狀提示含有編號(a到z),它用來確定每個點在開始形狀和結束形狀對應的位置。您最多可以使用26個形狀提示。形狀提示在開始的那個關鍵幀上顯示黃色,在最後那個關鍵幀上顯示綠色,在填充區域內和形狀外顯示紅色(Flash忽略紅色形狀提示)。
爲獲得最佳結果,當進行形狀補間時,應遵循以下原則:
•        對於複雜的形狀補間,要創建中間形狀,並在它們之間進行補間,而不是僅僅定義一個開頭和結尾的形狀。
•        確保形狀提示是合乎邏輯的。例如,如果您是在一個三角形上設三個形狀提示,那麼它們在原三角形和被補間三角形上的順序必須是相同的。如果在第一個關鍵幀的順序是abc而在第二個關鍵幀上的順序是acb,這樣是不行的。
•        如果您將形狀提示在形狀的左上角按順時幀防放置,這樣它們能更好得工作。
要了解更多的關於形狀提示和形狀補間的信息,請參閱Flash產品文檔的Shape tweening節。有關使用IK做形狀動畫的信息,請閱讀Creating animation in ActionScript 3.0中Animating with the Bone tool節.

更多的內容請看 Animation Learning Guide for Flash的其他章節.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章