天天看點

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)。

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

圖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檔案顯示使用形狀提示來控制字母變形的動畫。

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

圖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的其他章節.