动画制作课程讲义

1動畫製作課程講義講師：廖述文Email：[e-mail]聯絡電話：[phone]部落格：tw.myblog.yahoo.com/harmonica802Flash的多媒體世界•網路作品欣賞•想像無限延伸的Flash•Flash與傳統網頁媒體的比較投影片3Flash的多媒體世界•無庸置疑Flash已經是目前網路動畫的標準式了，FlashProfessionalCS3提供互動式網站、數位體驗和行動內容製作環境，為網頁設計者提供了另一種製作動態網頁的新選擇，它結合了音效、影像、動畫，具備了高品質、體積小、互動性高的優點。•有了FlashProfessionalCS3，就可設計和製作多樣化的互動式內容，包括影片、圖片和動畫，以建立真正獨特、吸引人的網站、簡報或行動化內容。•FlashProfessionalCS3是主要的Macromedia產品，具備許多全新功能，其中包括：令人歎為觀止的繪圖特效、整合式與可獨立執行的視訊編碼功能，加上支援alpha透明模式、提供進階抗鋸齒控制功能的高品質轉換文字效果、改良的文字工具，以及全新的視訊外掛程式，可從專業視訊產品匯出FlashVideo(FLV)檔案。投影片41-1.網路作品欣賞•以下我們先來欣賞一些網路上的Flash動畫作品投影片51-2.想像無限延伸的Flash•360度環景•視訊控制•產品簡報•賀卡•測驗•遊戲•螢幕保護•名片CD•CDTitle投影片61-3.Flash與傳統網頁媒體的比較向量式繪圖軟體•Flash是屬於向量式的繪圖軟體，由Flash繪製輸出的畫面具有高畫質且檔案小的優點，其繪圖工具操作簡易，因此，它雖沒有一般向量式繪圖軟體複雜的工具指令，卻也能作出許多特殊效果。普及性高•目前幾乎所有的電腦都可以直接透過瀏灠器看到Flash動畫，目前微軟作業系統裡預設已安裝了FlashPlayer，只要我們一打開IE就能播放Flash動畫；FireFox則需要額外安裝FlashPlayer。影音整合•Flash可以匯入視訊、音效檔，為整個電影加上影片、背景音樂及特殊音效，為了因應網路傳輸下載的需要，Flash可壓縮音效輸出電影，使檔案體積變小。投影片71-3.Flash與傳統網頁媒體的比較可匯入、匯出多種檔案格式•可輸入音效檔(wav)(mp3)、及點陣、向量格式的圖形檔，如：wmf、ai、eps、dxf、bmp、jpg、png、gif等多種圖檔、及數位影片格式，如mepg、mov、avi、flv；亦可輸出電影、音效、及各種格式的圖檔。多種互動性的指令(Actions指令)•Flash不用寫複雜的程式語言，可以用Actions中的各種互動性指令來設定、編輯動畫。此外，其強大的ActionScript也可透過自訂方式設計更複雜的程式內容。Streaming串流播放技術•所謂的〝Streaming〞串流播放技術就是網頁一邊下載就馬上一邊播放的效果，不像傳統網頁必須長時間等待下載才能看到內容。投影片81-3.Flash與傳統網頁媒體的比較動畫檔案體積小•網頁常用的GIF動畫，是利用FrameByFrame的原理，即一個影格放置一張圖，一段小小的動畫可能就需要多張相同大小的圖組合而成。而Flash是利用Tweening漸變的原理，模擬出物件移動變形的動畫，不需要像GIF一樣要放置很多張圖，因此同樣內容的Flash動畫檔和GIF動畫檔比較起來，前者檔案體積小很多，而且Flash的動畫還可以匯入音效，比起GIF動畫，效果更炫。可模擬網頁動畫下載的情況•Flash提供電影的網路測試環境，讓使用者可以模擬網路上電影的下載播放情形，可得知電影檔案是否過大，來作為修改及是否要加入下載等待畫面的參考指標。應用層面廣•Flash動畫除了可以製作動畫之外，透過ActionScript還可以開發FlashGame、CDTitle、簡報、行動內容；整合網路資料庫可以做成Flash留言版、Flash聊天室；加上外掛程式就可以做成螢幕保護程式….等。9Flash動畫首部曲•動畫原理•SWISHmax介紹•SWISHmax內建罐頭特效製作•SWISHmax路徑動畫製作•SWISHmax日月潭花火節廣告製作•SWISHmax聲音的匯入與使用•SWISHmax精靈角色概念與製作•SWISHmaxAction動作指令的使用•Flash軟體介面介紹•Flash繪圖工具特性及使用•AlphaChannel影像的匯入與使用•FramebyFrame的動畫製作•移動漸變的原理•移動漸變的製作•形狀漸變的原理•形狀漸變的製作投影片102-1.動畫原理•影格Frame•播放速率FPS(FrameperSecond)•關鍵影格KeyFrame投影片112-2.SWISHmax介紹•SWiSHmax是SWiSHzone公司功能最強的Flash快速設計工具，具有230超強特效，SWiSHscript提供先進的腳本功能，可輕鬆完成動作設定，完全相容Flash的載入與輸出，SWiSHmax可讓您快速製作Flash動畫與選單、按鈕、展示及簡報。圖層效果、腳本區時間軸屬性標籤區投影片122-3.SWISHmax內建罐頭特效製作(一)•230種內建特效，可讓文字、影像、圖形及音效快速及簡易地產生動畫學習重點：•決定影片大小與背景顏色•文字設定•加入與編輯效果•認識按鈕事件類型•設定播放與停止的腳本投影片132-3.SWISHmax內建罐頭特效製作(二)•E媽咪數位學習活動學習重點：•JPG影像檔案加入•淡入、淡出效果套用•移動、放置效果套用•物件複製•場景超連結設定投影片142-4.SWISHmax內建罐頭特效製作(三)•攝影比賽學習重點：•用PhotoImpact擷取影像•PNG透明影像檔案匯入•物件時間差動畫概念•比例波浪發射效果套用•脈衝效果套用投影片152-5.日月潭花火節廣告製作•日月潭花火節廣告製作學習重點：•PhotoImpact影像裁切•淡入、淡出效果套用•直線繪製與透明度設定•滑動效果套用•比例字母套用•子彈-向內波紋效果套用•場景超連結設定投影片162-6.SWISHmax路徑動畫製作•寫字動畫學習重點：•變形工具的應用•PNG透明影像檔案匯入•打字效果套用•以插入關鍵影格方式製作動畫(亦可使用[動作路徑]工具)投影片172-7.SWISHmax精靈角色概念與製作•遮罩動畫學習重點：•曲線工具的應用•將兩個以上物件「群組合為精靈」•精靈中的「遮罩」設定•遮罩內的動畫製作投影片182-8.SWISHmax聲音的匯入與使用•音效資源網站••學習重點：•以音軌方式匯入音樂•以Action在影格上播放音樂•音效效果設定循環次數•按鈕上的音效設定投影片192-9.SWISHmaxAction動作指令的使用•Loading動畫學習重點：•插入場景•調整場景順序•設定條件式ActiononFrame(1){if(sceneFrameLoaded(Scene_1,1)){gotoSceneAndPlay(Scene_1,1);}}onFrame(12){gotoSceneAndPlay(currentscene,1);}投影片202-10.FlashCS3介面介紹•FlashCS3介面介紹屬性面板工具箱時間軸元件庫舞台圖層投影片212-11.Flash繪圖工具特性及使用(一)•選取工具•選取細部工具•線段工具•楕圓形工具•認識物件繪製模式投影片222-11.Flash繪圖工具特性及使用(二)•鋼筆工具(配合Alt鍵可決定轉角類型或增減節點)•選取細部工具(配合Alt鍵可控制單邊折角)•鉛筆工具•墨水瓶工具•油漆桶工具•漸層設定與保存投影片232-12.FramebyFrame的動畫製作(一)•人物動畫•符號字型資源••在Google搜尋關鍵字「免費字型、符號字型」學習重點：•Swifty符號字型的使用•OnionSkin描圖紙的使用•影格速率設定•投影濾鏡的使用(僅能用於文字、影片片段、按鈕上)投影片242-12.FramebyFrame的動畫製作(二)•寫字動畫學習重點：•寫字筆劃順序•導引線圖層的使用•OnionSkin描圖紙的使用投影片252-13.移動補間動畫原理Tweening補間動畫是由Flash自動產生兩個關鍵影格間的動畫•移動補間動畫在製作時有以下幾點注意事項：1.最少需要二個關鍵影格2.關鍵影格內必需為群組或元件，且關鍵影格內只可有一個群組或元件3.二個關鍵影格必須是同一個群組或元件4.一個圖層只做一個物件的動畫，若需多個動畫時，則在不同圖層中分別完成5.只能編輯關鍵影格，由Flash自動產生的一般影格並無法編輯6.設定移動補間動畫後，動畫影格會以藍紫色表示•移動補間動畫可製作動畫方式：1.Position位置移動2.Rotation旋轉3.Scale縮放4.Alpha透明度(必須是元件)投影片262-14.移動補間動畫製作(一)•螃蟹移動學習重點：•移動補間動畫的設定•轉換為元件的方法•進階加減速的設定•影格複製與貼上•元件的Alpha屬性設定投影片272-14.移動補間動畫製作(二)•開場動畫學習重點：•移動補間動畫的設定•進階加減速的設定•空白關鍵影格的使用•元件的Alpha屬性設定投影片282-14.移動補間動畫製作(三)•夜景動畫學習重點：•移動補間動畫的設定•進階加減速的設定•空白關鍵影格的使用•元件的Alpha屬性設定•聲音的匯入與使用•聲音同步設定投影片292-15.MotionGuide導線動畫經由路徑的指定，讓元件或群組物件沿著該路徑移動，以創造出較複雜的動畫。•導線動畫在製作時有以下幾點注意事項：1.二個關鍵影格必須是同一個群組或元件2.導線必須是連續的線段，且必須有起始點與結束點3.Tweening漸變方式必須使用「移動補間動畫」4.必須將工具列上的「貼齊物件」鈕按下5.群組或元件必須將中心點「貼附」在導引線上，才能沿導線移動6.製作導引線圖層完成後，建議將它鎖定，避免動到路徑•導引線圖層中只可為線條形狀，不可以是群組或元件•被導引圖層的圖層圖示會向內縮，代表被導引投影片302-16.MotionGuide導線動畫製作(一)•飛機學習重點：•移動補間動畫的設定•進階加減速的設定•空白關鍵影格的使用•元件的Alpha屬性設定•聲音的匯入與使用•聲音同步設定投影片312-16.MotionGuide導線動畫製作(二)•果凍動畫學習重點：•移動補間動畫的設定•進階加減速的設定•空白關鍵影格的使用•聲音的匯入與使用投影片322-16.MotionGuide導線動畫製作(三)•飛機繞圓學習重點：•移動補間動畫的設定•圓形路徑的起點與終點•沿向路徑的設定•圖層順序的調整投影片332-16.MotionGuide導線動畫製作(四)•魚兒水中游學習重點：•移動補間動畫的設定投影片342-17.形狀補間動畫原理Tweening補間動畫是由Flash自動產生兩個關鍵影格間的動畫•形狀補間動畫在製作時有以下幾點注意事項：1.最少需要二個關鍵影格2.關鍵影格中一定要是形狀，不可為群組或元件3.一個圖層只做一個物件的動畫，若需多個動畫時，則在不同圖層中分別完成4.只能編輯關鍵影格，由Flash自動產生的一般影格並無法編輯5.設定形狀補間動畫後，動畫影格會以綠色表示•形狀補間動畫可製作動畫方式：1.Position位置移動2.Rotation旋轉3.Scale縮放4.顏色變化動畫5.形狀改變動畫(可設定Hint形狀提示點做指定位置的形狀變化)投影片352-18.形狀補間動畫製作(一)•形狀變化學習重點：•形狀補間動畫的設定投影片362-18.形狀補間動畫製作(二)•白天與黑夜學習重點：•形狀補間動畫的設定•旋轉圈數設定•形狀補間動畫的設定投影片372-19.Mask遮色片動畫使用遮色片圖層可以很方便地選擇性顯示該圖層或其下方圖