CG 數位學習網 > Flash 教學



動畫的製作原理

傳統動畫的製作是使用一種稱為賽璐珞 ( Celluloid ) 的透明膠片繪製連續的單格畫面,經過拍攝、剪輯,以一定的速率播放時,由於眼晴的視覺暫留現象,讓觀眾體驗到動態的畫面。由於傳統動畫的繪製工作量很大,所以在製作上是相當費時的工程。

動畫的製作方式

Flash 使用時間軸編輯動畫,時間軸記錄時間的經過,並使用關鍵影格來記錄物件的狀態。 Flash 製作動畫的方式,可分為移動補間動畫、形狀補間動畫與逐格動畫。

空白關鍵影格 - 空心圓形表示空白關鍵影格,此影格內沒有任何的物件。

關鍵影格 - 實心圓形表示關鍵影格。

關鍵影格。

移動補間動畫 - 加入移動補間動畫的時間軸顯示藍色背景。

傳統補間動畫。

形狀補間動畫 - 加入形狀補間動畫的時間軸顯示綠色背景。

動作指令影格 - 小寫的字母 a 表示此影格包含了動作指令。

標籤影格 - 紅色旗桿圖示表示此影格為標籤。

註解影格 - 綠色的雙斜線表示此影格包含了註解。

錨點影格。

錯誤的傳統補間動畫。

錯誤的形狀補間動畫。

範例 1.移動的飛碟

1. 使用繪圖工具製作飛碟,先畫一個圓形,再畫一個橢圓形,並刪除多餘的線段。注意若開啟了 [ 物件繪製 ] 的功能,將無法直接刪除線段,請務必先將物件繪製的功能取消。

2. 製作移動補間動畫的圖形必須先轉換成元件或群組,選取繪製完成的飛碟後,點選功能表 [ 修改 > 轉換成元件 ] ,在對話框的名稱輸入 [ UFO ] ,類型選擇 [ 影片片段 ] ,按一下確定將圖形轉成元件。

使用群組物件製作移動補間動畫,稍後的編輯會比較費時,也無法調整亮度、色調、透明度,以及加上 ActionScript 程式製作互動的效果,因此將圖形轉成元件是比較好的選擇。

3. 在 Flash 動畫是使用關鍵影格來記錄物件的狀態,物件必須有位置的改變、尺寸的改變,或是形狀的改變等,且至少需要 2 個關鍵影格,才能產生動態的效果。

4. 飛碟的動畫完成了!因為現在只有兩個關鍵影格,所以飛碟是直線飛行的,我們將在時間軸上自動產生關鍵影格,讓飛碟沿著 N 形的路線移動。點選時間軸第 12 個影格,並且拖曳飛碟往上移動,您可以看到時間軸上自動產生了關鍵影格。同樣的在第 24 格,將飛碟拖曳到下方的位置產生關鍵影格,最後按 Enter 鍵觀看動畫播放的效果。

5. 現在練習讓飛碟還原到由左到右的直線飛行,只要清除剛才新增的關鍵影格,保留第一格與最後一格的關鍵影格即可,請點選要刪除的關鍵影格,按滑鼠右鍵再選擇 [ 清除關鍵影格 ] ,或按鍵盤的 Shift + F6 來清除關鍵影格。

 

範例 2.彈跳的藍球

這個範例將以籃球彈跳動畫探討動畫加速∕減速的觀念,以及循環播放動畫的製作。

首先畫出籃球的形狀,選擇橘色畫一個圓形,再選取圓形的筆畫,點選功能表[ 編輯 > 複製 ] 以複製到剪貼簿,再點選 [ 編輯 > 在原地貼上 ] ,貼上的圖形會與原本的圖形重疊,接著使用方向鍵往左邊移動,按著 Shift 再按方向鍵可以一次移動 10 個像素的距離。再點選功能表 [ 編輯 > 在原地貼上」,這次將圓形向右移到對稱的位置,再加一條垂直線與水平弧線,最後將這些多餘的線段刪除。

假設動畫的影格速率是 30 fps,製作一段 2 秒鐘的動畫,換算後時間軸的長度是 60 格,籃球在第 0 格時往下掉落,並在 30 格時碰到地面並往上彈起,第60格時回到原點。

首先,以橢圓形工具繪製籃球,並將繪製好的籃球轉換成元件。接著在第 30 格與第 60 格插入關鍵影格,再將第 30 格的籃球往下方移動。

現在籃球的彈跳動畫已經出現,不過實際上,籃球往下掉落時應有重力加速,往上彈起時也會受引力影響,速度應會逐漸變慢,並不是目前呈現的等速運動,現在調整動畫的加速∕減速。點選第 0 格到第 30 格之間的時間軸,在「屬性」面板進行設定。

 

範例3.紙摺飛機沿徑動畫

當物件移動的路線比較複雜時,使用很多關鍵影格來記錄,編輯起來相當費時。使用導引線製作沿徑動畫,製作的過程比較簡單,而且移動的效果也會比較自然平順。

導引線在輸出的影片不會顯示,若您希望編輯時不要顯示導引線,請點選圖層的眼睛圖示以隱藏導引線。

1. 使用直線工具繪製紙摺飛機的形狀,再刪除多餘的線段。

2. 使用油漆桶工具為紙摺飛機填入顏色。

3. 選取紙摺飛機並轉換成元件。

製作路徑動畫。導引線。沿向路徑

描圖紙

描圖紙外框

修改描圖紙標記

編輯多個影格

預設的情況下,Flash 編輯的對象是單一影格,若需要同時編輯多個影格,也可以避免不同的影格修改時,產生物件寸尺或位置不同的情況。