动画快速上手幻灯片.ppt

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