January 26, 2008
Page 67 January 26, 2008
本章提要
•
2-1 快速建立移動動畫•
2-2 製作逐一影格動畫Page 68 January 26, 2008
2-1 快速建立移動動畫
•
Flash 能讓製作網頁動畫的人趨之若鶩，有大半 功勞都要歸給補間動畫（Tweened）。它是最方 便又容易的一種動畫製作方式，我們只要製作連 續動作的開始和結束的內容，中間的動畫過程就 交給 Flash 自動完成。Page 69 January 26, 2008
快速建立移動動畫
Page 70 January 26, 2008
快速建立移動動畫
•
運用補間動畫可以輕易製作出具有移動、縮放、旋轉、形狀漸變、色彩漸變等效果的動畫，還能 控制移動速度變慢或變快…等。
•
Flash 的補間動畫分為形狀補間動畫（Shape Tweening）和移動補間動畫（MotionTweening）2 種，此處我們先介紹移動補間動畫 的製作方法，讓您搶先體驗補間動畫的魅力。
Page 71 January 26, 2008
快速建立移動動畫
1.
開啟檔案 Sample02.fla；2.
我們要製作第 1 格影格的內容。請先按一下時 間軸面板上圖層 1 的影格 1 ，再執行『視窗/元 件庫』命令開啟元件庫面板，其中小汽車是我 們準備好的圖形，請從元件庫面板將小汽車拉 曳到舞台左邊的位置：Page 72 January 26, 2008
快速建立移動動畫
Page 73 January 26, 2008
快速建立移動動畫
3.
接下來我們要製作結束影格的內容。假設動畫 共有 10 格影格，請在時間軸面板上圖層 1 的 影格 10 處按下滑鼠右鈕，執行『插入關鍵影 格』命令（快速鍵：F6）：
關鍵影格：影格 10 的動作會延續影格 1 的動作Page 74 January 26, 2008
「播放磁頭」的作用
•
我們可由播放磁頭得知目前舞台上播放的是哪一 格影格的內容。請先按一下影格 1 的位置，將播 放磁頭移至動畫的最前面，再按下 [Enter] 鍵，此時播放磁頭會依序由影格 1 移動至影格 10，不 過由於我們尚未進行移動的設定，因此舞台上的 小汽車沒有任何的移動或變化。
Page 75 January 26, 2008
快速建立移動動畫
4.
選取圖層 1 的影格 10，然後按下工具箱的選取 工具，再將舞台左邊的小汽車拉曳到舞台的右 邊，代表小汽車的行徑路線。移動時請儘量保 持水平移動，如果擔心無法維持在相同的水平 位置，請在拉曳前先按下 [Shift] 鍵不放再進行 拉曳，小汽車就會維持在相同的水平位置囉！Page 76 January 26, 2008
快速建立移動動畫
Page 77 January 26, 2008
快速建立移動動畫
•
請在影格 1 上按右鈕，執行『建立移動補間動畫』命令，影格 1 到影格10 之間便會顯示一個箭頭圖 示，箭頭穿過的影格，就是 Flash 幫我們完成的，
這些自動完成的影格稱之為補間動畫影格：
Page 78 January 26, 2008
快速建立移動動畫
•
動畫設定到此就完成了，請按下時間軸面板上的 影格 1，將播放磁頭移至影格 1 的位置，再按下 [Enter] 鍵，即可藉由播放磁頭的移動來檢視小汽 車的移動效果。Page 79 January 26, 2008
調整影格速率
•
預設影格播放速率為 12 fps（frame per second，每秒影格）•
在時間軸下方顯示影格數字的欄位雙擊，即可開 啟文件屬性視窗，修改影格播放速率使動畫達到 最佳表現效果。Page 80 January 26, 2008
2-2 製作逐一影格動畫
•
除了補間動畫的製作方式，我們也可以一格一格 的繪製影格內容，這種類似傳統卡通的繪製方法，我們稱之為連續影格動畫（Frame by Frame）。
•
連續影格動畫所採用的製作方式，是將要表現動 態的部份分解成多個動作，然後一個個的製作，再將這些動作連續播放，就形成了動態效果。
Page 81 January 26, 2008
製作逐一影格動畫
•
Smaple03.flaPage 82 January 26, 2008
製作逐一影格動畫
•
連續影格動畫需要繪製很多內容不同的影格，適 合用來表現細膩的動作，例如︰人物的跑步各階 段動作（Sample04.fla）•
缺點▫
製作費時▫
檔案體積較大•
如果動畫要應用在網頁上，最好盡量減少使用連 續影格動畫，以免增加網頁下載時間。Page 83 January 26, 2008
製作逐一影格動畫
•
在 Flash 中製作連續影格動畫有 2 種方式▫
在 Flash 中逐格地繪製分解動作 或▫
直接匯入由其它軟體（如︰Illustrator、Photoshop...）所製作的分解動作連續圖檔。
•
在此，我們使用的是第 1 種方式，在 Flash 中逐 格繪製動作。Page 84 January 26, 2008
製作逐一影格動畫
1.
開啟檔案 Sample03.fla 後，即可在元件庫面板（執行『視窗/元件庫』命令可開啟元件庫面板）
看到我們事先準備好的 7 個分解動作圖檔。請 拉曳動作 1 至舞台中靠近右邊的位置：
Page 85 January 26, 2008
製作逐一影格動畫
Page 86 January 26, 2008
製作逐一影格動畫
2.
請點選時間軸面板圖層 1 的影格 2 再按下 [F7]鍵（或在影格 2 上按右鈕，執行『插入空白關 鍵影格』命令），將影格 2 設定為空白關鍵影 格。
Page 87 January 26, 2008
製作逐一影格動畫
3.
按下時間軸面板下方的描圖紙，再將動作 2 由 元件庫拉至舞台上動作 1 的左邊位置。
啟動描圖紙的好處，就是可以參考影格 1 中動作1
的位置來安排影格 2 的內容，使動作2
的位置 能更準確，動畫的效果更流暢。Page 88 January 26, 2008
製作逐一影格動畫
4.
重覆步驟 2 及步驟 3 的操作，一一設定好每個 影格的動作，每設定一個影格就要往左邊移動一點，才會有走向左邊的效果。請設定到動作 7，
整個動畫會有 7 個影格。
Page 89 January 26, 2008
製作逐一影格動畫
•
完成後請在影格 1 的位置按一下，將播放磁頭移 到影格 1 的位置，即可按下 [Enter] 鍵瀏覽每個 影格的設定結果，並檢查動畫的流暢度再做適當 的調整；或是先儲存檔案，再執行『控制/測試動 畫』命令，檢視動畫的播放效果。Page 90 January 26, 2008