Transcript 動畫快速上手

第2章
動畫快速上手
著作權所有 © 旗標出版股份有限公司
本章提要
2-1 快速建立移動動畫
2-2 製作逐一影格動畫
2
2-1 快速建立移動動畫
Flash 能讓製作網頁動畫的人趨之若鶩,
有大半功勞都要歸給補間動畫
(Tweened)。它是最方便又容易的一種
動畫製作方式, 我們只要製作連續動作
的開始和結束的內容, 中間的動畫過程
就交給 Flash 自動完成。
3
快速建立移動動畫
4
快速建立移動動畫
運用補間動畫可以輕易製作出具有移動、
縮放、旋轉、形狀漸變、色彩漸變等效
果的動畫, 還能控制移動速度變慢或變
快…等。
Flash 的補間動畫分為形狀補間動畫
(Shape Tweening) 和移動補間動畫
(Motion Tweening) 2 種, 此處我們先介
紹移動補間動畫的製作方法, 讓您搶先
體驗補間動畫的魅力。
5
快速建立移動動畫
請雙按範例檔 02.swf, 先看看已完成的
移動補間動畫是什麼樣子。
6
快速建立移動動畫
1. 請開啟練習檔 02-learn.fla, 我們來實
際體驗一下移動補間動畫的製作步驟。
7
快速建立移動動畫
2. 開啟檔案後, 我們要製作第 1 格影格的
內容。請先按一下時間軸面板上圖層
1 的影格 1 , 再執行『視窗/元件庫』
命令開啟元件庫面板, 其中小汽車是我
們準備好的圖形, 請從元件庫面板將小
汽車拉曳到舞台左邊的位置：
8
快速建立移動動畫
9
快速建立移動動畫
3. 接下來我們要製作結束影格的內容。
假設動畫共有 10 格影格, 請在時間軸
面板上圖層 1 的影格 10 處按下滑鼠
右鈕, 執行『插入關鍵影格』命令：
10
「播放磁頭」的作用
我們可由播放磁頭得知目前舞台上播放
的是哪一格影格的內容。請先按一下影
格 1 的位置, 將播放磁頭移至動畫的最
前面, 再按下 [Enter] 鍵, 此時播放磁頭
會依序由影格 1 移動至影格 10, 不過由
於我們尚未進行移動的設定, 因此舞台
上的小汽車沒有任何的移動或變化。
11
快速建立移動動畫
4. 選取圖層 1 的影格 10, 然後按下工具
箱的選取工具, 再將舞台左邊的小汽車
拉曳到舞台的右邊, 代表小汽車的行徑
路線。移動時請儘量保持水平移動, 如
果擔心無法維持在相同的水平位置, 請
在拉曳前先按下 [Shift] 鍵不放再進行
拉曳, 小汽車就會維持在相同的水平位
置囉！
12
快速建立移動動畫
13
快速建立移動動畫
請在影格 1 上按右鈕, 執行『建立移動
補間動畫』命令, 影格 1 到影格10 之間
便會顯示一個箭頭圖示, 箭頭穿過的影
格, 就是 Flash 幫我們完成的, 這些自動
完成的影格稱之為補間動畫影格：
14
快速建立移動動畫
15
快速建立移動動畫
動畫設定到此就完成了, 請按下時間軸
面板上的影格 1, 將播放磁頭移至影格 1
的位置, 再按下 [Enter] 鍵, 即可藉由播
放磁頭的移動來檢視小汽車的移動效果。
在此動畫中, 小汽車會從舞台左邊開往
右邊, 如果將影格 1 的小汽車移至舞台
外左邊的位置：
16
快速建立移動動畫
17
快速建立移動動畫
再將影格 10 的小汽車移至舞台外右邊
的位置：
18
快速建立移動動畫
如此一來當動畫重複播放時, 就會有穿
流不息的效果囉！你可以執行『控制/測
試影片』命令, 瀏覽完成的動畫效果。
19
快速建立移動動畫
特別提醒您, 執行『控制/測試影片』命
令後, Flash 將會自動建立一個相同檔名,
但格式為 .swf 的播放檔, 因此若是開啟
光碟中的練習檔來練習, 請務必將檔案
儲存至自己的硬碟中, 才能順利進行動
畫測試。
有關於動畫測試及發佈的完整說明, 可
參考第 17 章。
20
2-2 製作逐一影格動畫
除了補間動畫的製作方式, 我們也可以
一格一格的繪製影格內容, 這種類似傳
統卡通的繪製方法, 我們稱之為連續影
格動畫 (Frame by Frame)。
連續影格動畫所採用的製作方式, 是將
要表現動態的部份分解成多個動作, 然
後一個個的製作, 再將這些動作連續播
放, 就形成了動態效果。
21
製作逐一影格動畫
請雙按範例檔 02-01.swf, 瀏覽我們完成
的連續影格動畫：
22
製作逐一影格動畫
由範例來看, 連續影格動畫需要繪製很
多內容不同的影格, 適合用來表現細膩
的動作, 例如︰人物的跑步, 但它的缺點
主要是製作費時, 而且檔案體積較大, 所
以如果動畫要應用在網頁上的話, 最好
盡量減少使用連續影格動畫, 以免增加
網頁下載的時間。
23
製作逐一影格動畫
在 Flash 中製作連續影格動畫有 2 種方
式, 一種是在 Flash 中逐格地繪製分解
動作, 另一種是直接匯入由其它軟體
(如︰Illustrator、Photoshop、
PhotoImpact...) 所製作的分解動作連續
圖檔。
在此, 我們使用的是第 1 種方式, 在
Flash 中逐格繪製動作。
24
製作逐一影格動畫
為了方便您練習, 我們已在練習檔 02learn1.fla 準備好每個分解動作的圖檔,
請開啟練習檔 02-learn1.fla, 跟我們一
起進行如下的操作。
25
製作逐一影格動畫
1. 開啟檔案後, 即可在元件庫面板 (執行
『視窗/元件庫』命令可開啟元件庫面
板) 看到我們事先準備好的 7 個分解
動作圖檔。請拉曳動作 1 至舞台中靠
近右邊的位置：
26
製作逐一影格動畫
27
製作逐一影格動畫
2. 請點選時間軸面板圖層 1 的影格 2 再
按下 [F6] 鍵 (或在影格 2 上按右鈕, 執
行『插入關鍵影格』命令), 將影格 2
設定為關鍵影格。
此時影格 2 會延續影格 1 的內容, 而
影格 2 的內容原本應該由動作 1 的圖
形修改而成。
28
製作逐一影格動畫
但為了節省您繪製圖形的時間, 我們已
將每個影格的動作分解至元件庫面板中,
所以請按下 [Delete] 鍵, 將舞台上影格
2 中的動作 1 刪除。
29
製作逐一影格動畫
3. 按下時間軸面板下方的描圖紙鈕 , 再
將動作 2 由元件庫拉曳至舞台上動作
1 的左邊位置。啟動描圖紙的好處, 就
是可以參考影格 1 中動作 1 的位置來
安排影格 2 的內容, 使動作 2 的位置
能更準確, 動畫的效果更流暢。
30
製作逐一影格動畫
31
製作逐一影格動畫
4. 重覆步驟 2 及步驟 3 的操作, 一一設
定好每個影格的動作, 每設定一個影格
就要往左邊移動一點, 才會有走向左邊
的效果。請設定到動作 7, 整個動畫會
有 7 個影格。
32
製作逐一影格動畫
33
製作逐一影格動畫
完成後請在影格 1 的位置按一下, 將播
放磁頭移到影格 1 的位置, 即可按下
[Enter] 鍵瀏覽每個影格的設定結果, 並
檢查動畫的流暢度再做適當的調整；或
是先儲存檔案, 再執行『控制/測試動畫』
命令, 檢視動畫的播放效果。
34