制作连续影格动画.PPT

著作權所有 ? 旗標出版股份有限公司 第 11 章 連續影格動畫與移動補間動畫 ─ 跑步的狗狗 本章提要 動畫元件與 流程說明 繪製狗狗 建立元件 (Symbol) 製作連續影格動畫 製作移動補間動畫 (Motion Tweening) 舉一反三時間 － BE HAPPY 動畫元件與流程說明 元件介紹 動畫製作流程 重點說明 動畫元件與流程說明 所謂連續影格動畫 (Frame by Frame) 就是一個影格接著一個影格, 所以本範例的第一個重點就是要自己製作每格影格的內容, 再把這些影格串連起來成為連續的動畫。完成連續影格動畫後, 我們還要利用移動補間動畫 (Motion Tweening) 製作出移動的效果。 動畫元件與流程說明 首先, 請開啟範例檔 ch11.swf, 先來看看它的動畫效果： 元件介紹 這個範例主要是由狗狗和窗戶背景組合而成, 重點的狗狗則是由圓形、橢圓形、以及不規則的幾何圖形, 利用變換排列方式、尺寸大小製作而成： 動畫製作流程 在開始製作動畫之前, 我們先來看看本章動畫的製作流程, 好讓各位在製作時更能掌握重點： 重點說明 本章的狗狗是利用組合幾何圖形的方式完成的, 因此除了利用繪圖工具繪製圖形外, 還須利用群組 (Group) 的方式將每個幾何圖形的線條與填色區域群組在一起, 避免在組合的過程中, 因重疊圖形物件而產生分割或黏合的現象。 製作連續影格動畫時可搭配描圖紙功能來比照前後影格的內容, 以確保跑步的分解動作之間具有連貫性。 重點說明 本範例的跑步的狗狗影片片段元件本身即是一段連續影格動畫, 也就是在跑步的狗狗影片片段元件中將狗狗每個分解動作放置在不同影格中, 播放影片片段元件時就會產生狗狗在原地跑步的效果。 跑步的狗狗影片片段元件所製作的跑步效果, 只會讓狗狗在原地行進, 假如要讓狗狗一邊移動位置, 一邊跑步, 則需再搭配移動補間動畫使其產生移動的效果。 繪製狗狗 使用繪圖工具繪製幾何圖形 群組幾何圖形的線條與填色區 排列及組合幾何圖形 使用繪圖工具繪製幾何圖形 範例中的狗狗圖像元件是由多個幾何圖形組合而成, 只要利用橢圓形工具 (Oval Tool)、鉛筆工具 (Pencil Tool)、與油漆桶工具 (Paint Bucket Tool) 便可分別製作出狗狗的頭部、五官、身體、腳部、尾巴： 使用繪圖工具繪製幾何圖形 狗狗圖像元件的耳朵、身體與腳部就是利用鉛筆工具畫出線條, 接著再利用油漆桶工具填上顏 色而成： 至於頭部、眼睛、鼻子與手部就更簡單了, 只要按下工具面板的橢圓形工具鈕, 在顏色 (Color) 區中選擇線條及填色區的色彩, 再利用箭頭工具 (Arrow Tool) 調整外形便完成。 群組幾何圖形的線條與填色區 以下以群組耳朵的幾何圖形來做示範。請先選取耳朵 (咖啡色圖形的填色區與線條), 然後執行『修改 / 群組』命令群組物件： 排列及組合幾何圖形 完成群組的動作後, 便可以將這些幾何圖形組合成狗狗了。不過在組合的過程中可能會發生下列情形, 此時我們只要選取右前腳, 然後執行『修改 / 排列 / 下推一層』命令, 便可改變右手的排列順序了： 建立元件 (Symbol) 在 11-2 節中我們只完成了第一個動作, 接下來還需繪製其餘6 個分解動作。若利用剛才的方式一筆一筆繪製狗狗的話, 既麻煩又浪費時間, 因此我們決定將狗狗製作成元件。 請按下 + 鍵選取所有的圖像, 再按下 鍵, 將狗狗儲存為圖像元件。完成之後, 我們就可以利用這個狗狗圖像元件製作其他的分解動作了： 建立元件 (Symbol) 製作連續影格動畫 建立跑步的狗狗影片片段元件 圖層 (Layer) 配置 製作連續影格動畫 (Frame by Frame) 插入實體 (Instance) 製作陰影 將元件 (Symbol）恢復為圖像物件 (Shape) 建立跑步的狗狗影片片段元件 為了讓狗狗持續跑步的動作, 我們必須先建立一個包含連續影格動畫的影片片段元件。請執行『插入 / 新增元件』命令, 建立一個新的影片 片段元 件： 圖層 (Layer) 配置 建立跑步的狗狗影片片段元件後, 會進入該元件的編輯模式, 請先為此段連續影格動畫設置兩個圖層, 分別為跑步的狗狗和陰影, 圖層配製如右, 陰影圖 層必須放置於跑步的 狗狗圖層之下, 如此 才可避免陰影遮蔽 到狗狗本身： 製作連續影格動畫 (Frame by Frame) 首先在開始動畫製作前,我們先來看一下跑步的狗狗影片片段元件動作分解圖, 範例中的影片片段元件是由以下 7 個分解動作組合而成： 插入實體 (Instan