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