簡介 2.5D

Flash 中的補間動畫雖然簡單, 但不代表光靠這個功能就能製作出有說服力的動畫。別誤會我的意思, 如果您只是要製作在「舞台」四處移動的簡單物件, 使用補間動畫便可快速製作出完美的成品。

如果說補間動畫可以發揮得更淋漓盡致, 讓人物更為寫實呢？如果說可以用這個簡單的功能, 開發出其他 Flash 使用者從未想過的功用呢？或者, 如果只要用上您所學的補間動畫知識的 10%, 就可以變些花樣呢？請想想看您可以達成什麼樣的效果。

我將在本課中揭露我的終極 Flash 動畫技巧妙招, 教您建出猶如 3D 效果般的寫實動畫。最棒的是, 您不必離開 Flash 環境, 只要在 2D 環境中就可完成。想像您在一個空間之中, 實際上是 2D 但是看起來像是 3D, 這到底是什麼樣的空間呢？

這就是 2.5D 的動畫世界。

您沒聽錯, 就是 2.5D 動畫。這個詞是我發明的。我不能說這個技巧完全是我自創的, 不過 2.5D 這個詞可是我先用的喔。

圖 28 是我個人網站 www.mudbubble.com* 的商標人物。

圖 28. 這個人物超可愛的吧？

圖 29 顯示出我將每個元件放在其專屬的圖層中。我開啟了外框功能, 您可以看出人物身體的各個組件都是分開的。由於移動補間動畫要求在補間動畫期間, 每個圖層只能有一個元件, 因此這點尤其重要。如果您在同一個移動補間動畫期間將兩個不同的元件放在相同圖層, 補間動畫就會中斷。

圖 29. 每個元件都有其專屬圖層。

我還花了一些時間為各圖層命名。這雖非必要動作, 不過有了圖層名稱可以方便您在時間軸加長後節省捲動時間。如果您在需要共用檔案的小組環境中工作, 為圖層命名更是項明智之舉。總之, 有條理地進行工作絕非壞事。

設定好時間軸後, 您可以開始對人物套用移動補間動畫了。在這個範例中, 我只要製作人物頭部元件的動畫, 所以我鎖住了其他所有圖層, 以免不小心更動了這些圖層。

轉頭 - 第 1 步

首先, 建立一個關鍵影格, 讓頭部從這裡開始和停止轉動。按一下滑鼠後, 從頂部圖層垂直拖曳到底部圖層, 然後轉換為關鍵影格 (F6)。重複這個動作兩次, 讓各關鍵影格之間保持 15 到 20 個左右的影格。在這個範例中, 我將關鍵影格放在第 15 和第 30 個影格上 (請見圖 30)。

圖 30. 準備套用移動補間動畫

將播放磁頭放在人物頭部停止轉動的影格上, 然後使用「自由變形」工具編輯「舞台」上的各個元件。

請照著我的說明做。先從其中一隻眼睛開始。請想像眼睛是繞著球體 (頭部) 轉動的。在實際的 3D 物件中, 隨著眼睛越靠近觀者, 眼睛會顯得越大, 且逐漸脫離蛋形。所以, 最好將眼睛寬度加大。由於範例人物的眼睛由三個不同元件組成, 只要按下 Shift 鍵再選取這三個元件 (請見圖 31), 然後使用「自由變形」工具就能一次將它們一起放大。您不必急著一次就達到完美的效果, 稍後隨時都可以再微調動畫。這項作業完全靠想像, 必須等到套用移動補間動畫後才看得到成果。

圖 31. 選取眼睛元件

接著來做鼻子。因為人物是轉向觀者的, 所以最靠近觀者的元件都應該從右邊移到左邊。在實際的 3D 物件中, 鼻子會從臉部突出。為了達到更真實的效果, 將鼻子從右往左移時, 順便將鼻子稍微往下移 (請見圖 32)。別忘了要稍微加大鼻子的大小, 因為鼻子也是逐漸靠近觀者的。

圖 32. 修改鼻子

接下來, 將另一個眼睛往左移, 同時將它放大並從橢圓形改成接近圓形。此外, 兩個眉毛也要往左移, 並且放大和稍微轉動 (請見圖 33)。

圖 33. 修改另一隻眼睛

現在, 對編輯過的圖層各別套用移動補間動畫。然後, 就可以看到實際的成果, 並決定是否要再進一步調整。

別擔心, 要獲得理想的效果勢必要進行許多修正。Figure 34 顯示人物頭部到此階段的轉動幅度。

圖 34. 轉動人物頭部

檢視 mudbubble_boy.swf 檔案, 觀看最後的動畫效果 (請見圖 35)。

 

圖 35. 轉頭的最後動畫效果

效果還不壞吧？只要使用「自由變形」工具進行幾個簡單的編輯動作, 就可以做出栩栩如生的動畫。雖然還不是很完美, 不過現在只要做到這樣就行了。您可以繼續修改元件的放大值、位置和傾斜度, 直到達成您想要的效果。

轉頭 - 第 2 步

接下來, 我要處理人物頭部的其餘部分, 來加強轉頭動作。

這個動畫最重要的地方就是要讓觀者相信這個平面的 2D 物件具有體積和質量。此外, 還要讓觀者感覺到動畫中的深度。請想像這個人物是在立體空間中使用各種 3D 物件製作而成的。如果人物真的是在 3D 空間中轉頭, 前景中的東西會朝著與背景相反的方向移動。為方便理解, 請想像在立體空間中繞著自轉軸旋轉的地球。地球是以逆時鐘方向旋轉的。也就是說, 最靠近我們的表面會從右移動到左。離我們最遠的表面則會從左移動到右。現在, 將這個規則套用到角色的頭部。

由於頭部元件本身只是扁平的橢圓形, 除了必須稍微傾斜一點, 我決定再往右推一些。這是因為, 當人物的頭轉向觀者時, 人物左眼右邊的臉部面積就會露出越多。此外, 由於臉部只佔了頭形的一小部分, 因此頭部往右移幾個像素就行了。這些動作都不需要太誇張。要達到最好的效果, 需要靠多個細微的動作組合而成, 單用幾個大動作反而不寫實。不要小看這些小動作, 它們是獲得整體戲劇效果的幕後功臣。

接下來, 將帽緣往人物頭部右側旋轉 (請見圖 36)。記住, 背景中的物件會與前景中的物件呈反方向移動。

圖 36. 旋轉帽緣

我還使用了方向鍵將帽緣輕輕往右推, 看起來就像是有更多部分隱藏在人物頸部後方。

這個原則也適用於整個帽子。我將帽子弄歪一點, 往右移幾個像素並減少一點寬度 (請見圖 37)。

圖 37. 調整帽子

耳朵在往左上方移動時, 角度也要斜一點 (請見圖 38)。

圖 38. 傾斜耳朵

別忘了還有頭髮。我用三個獨立元件設計頭髮, 以便分開編輯。在頭部朝觀者方向轉動時, 我讓頭髮朝人物眼睛往下傾斜, 長度也縮減了一些, 這樣看起來比較像是指向觀者 (請見圖 39)。這項調整可以欺騙觀者的透視感, 不過尺度有點難拿捏。將元件傾斜和放大時, 永遠有個尺度限制。切記, 適度且細微的動作可以達到較佳的效果。請適可而止, 貴精不貴多。

圖 39. 傾斜頭髮

接下來, 對剛剛編輯過的圖層套用移動補間動畫。如果您已經按照我的說明做到這一步, 就可以播放成果了。

還挺不錯的吧？轉頭的動作是不是頗有 3D 效果呢？當然啦, 人物大多有兩隻耳朵。隨著頭部轉動, 另一隻耳朵也應該會露出來。所以, 我們要在所有圖層下方建立一個新圖層。複製現有的耳朵, 貼到這個位於移動補間動畫之間空白關鍵影格內的新圖層 (在影格 22 附近)。然後選取「修改＞變形＞水平翻轉」將耳朵翻面。

將新耳朵放在頭部右後方, 大概只露出一半。耳朵最多只會露出這麼多 (請見圖 40)。

圖 40. 定位第二隻耳朵

在影格 30 (其他所有關鍵影格都在這裡) 新增第二個關鍵影格, 如圖 41 所示。

圖 41. 新增第二個關鍵影格

返回耳朵的第一個關鍵影格, 重新將耳朵放在頭後, 幾乎完全隱藏起來。我將其他一些圖層轉換為外框模式, 方便您看出耳朵的新位置 (請見圖 42)。

圖 42. 重新定位第二隻耳朵

現在只要套用移動補間動畫就行了。播放動畫, 耳朵應該會隨著頭部往觀者方向「轉動」而露出來 (請見圖 43)。這個小細節可以讓轉頭動作看起來更真實, 製造出頭部的確是球體的錯覺 (此功能需要 Flash Player 8)。

 

圖 43. 耳朵隨著轉頭動作而露出來的最後動畫效果

如果有哪裡不太對, 請放心拖曳時間軸來調整元件。調整時間需視您要求的完美程度和人物的複雜度而定。本範例中的人物包含許多物件, 算是比較複雜的設計。

自訂加/減速度面板 (僅限 Flash Professional 8)

我想對轉頭動作進行最後一項修飾。您應該也有發現, 移動補間動畫的速度一致, 所以看起來不夠動態, 而且一開始有點不自然。所幸 Flash Professional 8 提供了「加速和減速」新功能, 可以讓動作轉換更為流暢。訣竅在於如何在單一補間動畫中使用加速和減速效果。

首先要套用移動補間動畫。您可以使用下列兩種做法之一：

• 在兩個關鍵影格之間的影格上按一下滑鼠右鍵。從彈出式選單選取「建立移動補間動畫」。
• 使用選取工具按一下再拖曳, 將所有圖層反白選取。從「屬性檢測器」的「補間動畫」下拉式選單選取「移動」。

請注意「屬性檢測器」中的「編輯」按鈕 (請見圖 44)。

圖 44. 按一下「編輯」按鈕即可開啟「自訂加/減速度」面板。

按一下這個按鈕即可開啟新的「自訂加/減速度」面板 (請見圖 45)。

圖 45. 新的「自訂加/減速度」面板

比起舊版 Flash, 新的「自訂加/減速度」面板提供更多速度控制選項。「自訂加/減速度」面板會使用圖表來顯示動作隨時間移動的程度。水平軸代表影格, 垂直軸則代表物件的變動百分比。

圖表曲線可以表示物件的變動速率。當曲線呈水平 (沒有傾斜) 時, 速率就是 0；當曲線呈垂直時, 代表物件移動沒有任何速度或延遲。

選取「全部屬性使用單一設定」核取方塊後, 目前曲線便會套用到所有屬性 (「位置」、「旋轉」、「縮放」、「顏色」和「濾鏡」)。如果取消選取這個核取方塊, 您可以如下對各屬性套用個別曲線：

• 位置：針對動畫物件在舞台上的位置, 指定自訂加/減速設定。
• 旋轉：針對動畫物件的旋轉, 指定自訂加/減速設定。例如, 您可以針對舞台上的動畫人物, 微調它們轉向面對使用者時的轉動速度。
• 縮放：針對動畫物件的縮放, 指定自訂加/減速設定。例如, 您可以更輕鬆地自訂物件的縮放, 讓物件看起來像是先遠離觀者, 接著又靠近, 然後再遠離。
• 顏色：針對套用至動畫物件的顏色轉換效果, 指定自訂加/減速設定。
• 濾鏡：針對套用至動畫物件的濾鏡, 指定自訂加/減速設定。例如, 您可以控制投影的加/減速設定, 以模擬光源方向的變動。
• 「播放」與「停止」按鈕：讓您使用目前「自訂加/減速度」對話方塊中定義的所有速率曲線, 預覽舞台上的動畫。
• 「重設」按鈕：讓您重設速率曲線為預設狀態, 也就是線性狀態。

按一下對角線即可加入新控制點。只要拖曳控制點的位置, 就能精確地控制物件動作。

要使用影格指示器 (由方形控制點表示), 請按一下要物件加速或減速的地方。按一下控制點 (方形控制點) 上的控制點, 便會選取該控制點, 每一邊上也都會顯示正切點 (空心圓)。您可以使用滑鼠或鍵盤按鍵將控制點或正切點拖曳到新位置。

技巧：根據預設, 控制點會貼齊格線。您可以在拖曳控制點時按住 X 鍵, 暫時關閉此功能。

在曲線上任何控制點以外的地方按一下, 便會在該曲線上建立新控制點。按一下在該曲線和控制點以外的任何一處, 會取消選取目前在選取狀態中的控制點。

要讓動畫平滑地開始和結束, 請將曲線調整到近似圖 46 所示的曲線。我建議您先試著建立和編輯控制點與正切點, 然後使用面板左下角的「停止」與「播放」按鈕播放動畫。不用多少時間, 您就可以掌握曲線與動畫效果之間的關係。

圖 46. 使用這個加/減速度路徑

現在播放動畫。請注意轉頭動作會先加速, 然後在接近結束時減速。要製作頭部轉回原本位置的動畫, 只要從「影格 1」開始複製影格, 再將這些影格貼到您剛剛建立的補間動畫之後即可。新增一個移動補間動畫, 並重複相同的加速和減速程序, 您的人物就可以流暢地來回轉頭了。

套用濾鏡

沒錯, Flash 現在可以套用濾鏡了。Flash 8 引進了圖像濾鏡和轉換效果模式, 這是 Flash 社群引頸期盼已久的功能。現在, 您可以對任何影片片段實體套用「投影」、「模糊」、「光暈」、「斜角」、「漸層光暈」、「漸層斜角」和「調整顏色」等效果。那麼, 就來試試對人物套用「投影」效果吧！

首先, 將人物放在影片片段元件中。在時間軸中, 按一下再拖曳以便選取跨所有圖層的全部影格 (提示：從左上角的「影格 1」開始, 依對角方向拖曳到最底部圖層的最後一個影格即可)。您所選的影格和圖層全部都會反白標示。選取「編輯＞時間軸＞複製影格」(或按下 Ctrl+At+C), 將整個時間軸複製到「剪貼簿」(也可以在反白標示的影格任意處按一下滑鼠右鍵, 然後從內容選單選取「複製影格」)。執行下一步前, 先保持在這個狀態。

開啟元件庫 (Ctrl+L), 從右上角的下拉式選單選取「新增元件」, 然後選取「影片片段」行為, 再按一下「確定」。此時您會進入這個新元件的「編輯」模式。選取時間軸中的第一個影格, 然後選取「編輯＞時間軸＞貼上影格」(或按下 Ctrl+Alt+V) 如圖 47 所示般貼上所選影格 (也可以在「影格 1」上按一下滑鼠右鍵, 然後從內容選單選取「貼上影格」)。

圖 47. 在「影格 1」上按一下滑鼠右鍵再選取「貼上影格」

返回主舞台並建立新圖層。在元件庫中找出您剛剛建立的影片片段元件, 然後將該元件拖曳到新圖層的「舞台」中 (請見圖 48)。

圖 48. 將影片片段拖曳到「舞台」中

刪除包含原始人物的所有其他圖層。此時, 時間軸內應該會有一個圖層和一個影片片段元件, 其中包含您的人物動畫。

可供建立的陰影有兩種。標準投影會在實體底下建立陰影, 陰影位置會稍微偏離原始實體。這類陰影通常非常扁平, 而且效果非常接近投影在牆上或任何平面上的陰影。如果您要製造出投影在地面上的效果, 這種投影就不太合適。要做出較為真實的陰影效果, 只要加些簡單的步驟就行了。

複製影片片段實體, 再將它置於原始實體的後方。(您可以將複製的實體保留在同一個圖層上、並將它排放於原始實體的後方, 也可以將它貼到原始圖層下方的新圖層上)。

選取複製的實體, 然後在「屬性檢測器」的「濾鏡」索引標籤中, 選取加號 (+) 選單中的「投影」 (請見圖 49)。接著, 請將強度調整至 45% 左右, 然後選取「隱藏物件」。這麼做會將影片片段物件隱藏起來, 但仍會顯示「投影濾鏡」屬性。接著, 您還可以進行進一步的調整, 例如將「品質」設為「低」、「中」或「高」, 或是修改模糊化的程度、顏色、角度或是模糊效果和原始圖像之間的距離。

圖 49. 將「投影」濾鏡套用到複製的影片片段實體

為了避免這樣的效果看起來像是原始物件在後方平坦牆面上的投影, 您可以使用「自由變形」工具來傾斜套用濾鏡後的影片片段實體。需要一些磨練, 才能完美地應用這個技巧。請修正實體的高度和傾斜度, 直到它看起來像是地板上的投影為止 (請見圖 50)。您可能需要重新定位實體的位置, 看起來才不會怪怪的。

圖 50. 使用「自由變形」工具修正傾斜度的複製影片片段

現在可以測試影片片段了, 您將會看到栩栩如生的動畫投影效果。

將幾個重複播放的動畫結合在一起後, 就可以達到複雜的視覺效果, 如圖 51 所示 (需要 Flash Player 8)。

圖 51. 使用「投影」濾鏡的 2.5D 效果範例

在這個範例中, 您可以看到投影效果為動畫增添了立體感。這個動畫包含一連串影片片段, 而影片又是由重複播放的男孩和小狗角色動畫組合而成。日後我還會發表新的文章, 說明如何重複播放小型動畫, 為影片增添許多效果。

我希望這篇文章能夠幫助您加強您的 Flash 設計與動畫技巧。我尚未介紹的 Flash 動畫技巧還有很多種, 例如全動畫 (通常稱為逐格動畫) 、形狀補間動畫, 以及來自視訊或 3D 動畫程式的連續影像。此外, 還有許多其他設計人員和動畫人員提供的外掛程式不容錯過, 這些程式可以幫助您加快 Flash 工作流程。請期待日後有關這些技巧與工具的文章。

第 5 頁 共 5 頁

上一頁