課程講義

1. 課程講義

2. Flash 的多媒體世界 網路作品欣賞 想像無限延伸的Flash Flash與傳統網頁媒體的比較

3. Flash 的多媒體世界 • 無庸置疑Flash已經是目前網路動畫的標準式了，Flash Professional 8 提供互動式網站、數位體驗和行動內容製作環境，為網頁設計者提供了另一種製作動態網頁的新選擇，它結合了音效、影像、動畫，具備了高品質、體積小、互動性高的優點。 • 有了 Flash Professional 8，就可設計和製作多樣化的互動式內容，包括影片、圖片和動畫，以建立真正獨特、吸引人的網站、簡報或行動化內容。 • Flash Professional 8 是主要的 Macromedia 產品，具備許多全新功能，其中包括：令人歎為觀止的繪圖特效、整合式與可獨立執行的視訊編碼功能，加上支援 alpha 透明模式、提供進階抗鋸齒控制功能的高品質轉換文字效果、改良的文字工具，以及全新的視訊外掛程式，可從專業視訊產品匯出 Flash Video (FLV) 檔案。

4. 1-1.網路作品欣賞 • 以下我們先來欣賞一些網路上的Flash動畫作品

5. 1-2.想像無限延伸的Flash • 360度環景 • 視訊控制 • 產品簡報 • 賀卡 • 測驗 • 遊戲 • 螢幕保護 • 名片CD • CD Title

6. 1-3.Flash與傳統網頁媒體的比較 向量式繪圖軟體 • Flash 是屬於向量式的繪圖軟體，由 Flash 繪製輸出的畫面具有高畫質且檔案小的優點，其繪圖工具操作簡易，因此，它雖沒有一般向量式繪圖軟體複雜的工具指令，卻也能作出許多特殊效果。 普及性高 • 目前幾乎所有的電腦都可以直接透過瀏灠器看到Flash動畫，目前微軟作業系統裡預設已安裝了Flash Player，只要我們一打開IE就能播放Flash動畫；Netscape同樣的也在4.5以後的版本內鍵了Flash Player。 影音整合 • Flash 可以匯入視訊、音效檔，為整個電影加上影片、背景音樂及特殊音效，為了因應網路傳輸下載的需要，Flash 可壓縮音效輸出電影，使檔案體積變小。

7. 1-3.Flash與傳統網頁媒體的比較 可匯入、匯出多種檔案格式 • 可輸入音效檔 (wav) (mp3)、 及點陣、向量格式的圖形檔，如：wmf、ai、eps、dxf、bmp、jpg、png、gif 等多種圖檔、及數位影片格式，如mepg、mov、avi、flv；亦可輸出電影、音效、及各種格式的圖檔。 多種互動性的指令 (Actions指令) • Flash 不用寫複雜的程式語言，可以用 Actions 中的各種互動性指令來設定、編輯動畫。此外，其強大的Action Script也可透過自訂方式設計更複雜的程式內容。 Streaming 串流播放技術 • 所謂的〝Streaming〞串流播放技術就是網頁一邊下載就馬上一邊播放的效果，不像傳統網頁必須長時間等待下載才能看到內容。

8. 1-3.Flash與傳統網頁媒體的比較 動畫檔案體積小 • 網頁常用的 GIF 動畫，是利用 Frame By Frame 的原理，即一個影格放置一張圖，一段小小的動畫可能就需要多張相同大小的圖組合而成。而 Flash 是利用 Tweening 漸變的原理，模擬出物件移動變形的動畫，不需要像 GIF 一樣要放置很多張圖，因此同樣內容的 Flash 動畫檔和 GIF 動畫檔比較起來，前者檔案體積小很多，而且 Flash 的動畫還可以匯入音效，比起 GIF 動畫，效果更炫。 可模擬網頁動畫下載的情況 • Flash 提供電影的網路測試環境，讓使用者可以模擬網路上電影的下載播放情形，可得知電影檔案是否過大，來作為修改及是否要加入下載等待畫面的參考指標。 應用層面廣 • Flash動畫除了可以製作動畫之外，透過Action Script還可以開發Flash Game、CD Title、簡報、行動內容；整合網路資料庫可以做成Flash留言版、Flash聊天室；加上外掛程式就可以做成螢幕保護程式…. 等。

9. Flash 動畫首部曲 動畫原理 SWISHmax介紹 SWISHmax內建罐頭特效製作 SWISHmax路徑動畫製作 SWISHmax日月潭花火節廣告製作 SWISHmax聲音的匯入與使用 SWISHmax精靈角色概念與製作 SWISHmax Action動作指令的使用 • Flash軟體介面介紹 • Flash繪圖工具特性及使用 • Alpha Channel影像的匯入與使用 • Frame by Frame 的動畫製作 • 移動漸變的原理 • 移動漸變的製作 • 形狀漸變的原理 • 形狀漸變的製作

10. 2-1.動畫原理 • 影格 Frame • 播放速率 FPS (Frame per Second) • 關鍵影格 KeyFrame

11. 2-2.SWISHmax介紹 • SWiSHmax是SWiSHzone 公司功能最強的Flash 快速設計工具，具有230超強特效，SWiSHscript提供先進的腳本功能，可輕鬆完成動作設定，完全相容Flash的載入與輸出 ， SWiSHmax 可讓您快速製作Flash 動畫與選單、按鈕、展示及簡報。 效果、腳本區 時間軸 圖層 屬性標籤區

12. 2-3.SWISHmax內建罐頭特效製作(一) • 230 種內建特效，可讓文字、影像、圖形及音效快速及簡易地產生動畫 • 學習重點： • 決定影片大小與背景顏色 • 文字設定 • 加入與編輯效果 • 認識按鈕事件類型 • 設定播放與停止的腳本

13. 2-3.SWISHmax內建罐頭特效製作(二) • E媽咪數位學習活動 • 學習重點： • JPG影像檔案加入 • 淡入、淡出效果套用 • 移動、放置效果套用 • 物件複製 • 場景超連結設定

14. 2-4.SWISHmax內建罐頭特效製作(三) • 攝影比賽 • 學習重點： • 用PhotoImpact擷取影像 • PNG透明影像檔案匯入 • 物件時間差動畫概念 • 比例波浪發射效果套用 • 脈衝效果套用

15. 2-5.日月潭花火節廣告製作 • 日月潭花火節廣告製作 • 學習重點： • PhotoImpact影像裁切 • 淡入、淡出效果套用 • 直線繪製與透明度設定 • 滑動效果套用 • 比例字母套用 • 子彈-向內波紋效果套用 • 場景超連結設定

16. 2-6.SWISHmax路徑動畫製作 • 寫字動畫 • 學習重點： • 變形工具的應用 • PNG透明影像檔案匯入 • 打字效果套用 • 以插入關鍵影格方式製作動畫 • (亦可使用 [動作路徑] 工具)

17. 2-7.SWISHmax精靈角色概念與製作 • 遮罩動畫 • 學習重點： • 曲線工具的應用 • 將兩個以上物件「群組合為精靈」 • 精靈中的「遮罩」設定 • 遮罩內的動畫製作

18. 2-8.SWISHmax聲音的匯入與使用 • 音效資源網站 • www.flashkit.com • www.flash8.net • 學習重點： • 以音軌方式匯入音樂 • 以Action在影格上播放音樂 • 音效效果設定循環次數 • 按鈕上的音效設定

19. 2-9.SWISHmax Action動作指令的使用 • Loading動畫 onFrame (1) { if (sceneFrameLoaded("Scene_1",1)) { gotoSceneAndPlay("Scene_1",1); } } onFrame (12) { gotoSceneAndPlay("<current scene>",1); } • 學習重點： • 插入場景 • 調整場景順序 • 設定條件式Action

20. 2-10.Flash 8 介面介紹 • Flash 8 介面介紹 工具箱 圖層 時間軸 舞台 元件庫 屬性面板

21. 2-11.Flash繪圖工具特性及使用(一) • 選取工具 • 選取細部工具 • 線段工具 • 楕圓形工具 • 認識物件繪製模式

22. 2-11.Flash繪圖工具特性及使用(二) • 鋼筆工具 (配合 Alt 鍵可決定轉角類型或增減節點) • 選取細部工具 (配合 Alt 鍵可控制單邊折角) • 鉛筆工具 • 墨水瓶工具 • 油漆桶工具 • 漸層設定與保存

23. 2-12.Frame by Frame 的動畫製作(一) • 人物動畫 • 符號字型資源 • www.windstudio.net • 在Google搜尋關鍵字「免費字型」 • 學習重點： • Swifty符號字型的使用 • Onion Skin描圖紙的使用 • 影格速率設定 • 投影濾鏡的使用(僅能用於文字、影片片段、按鈕上)

24. 2-12.Frame by Frame 的動畫製作(二) • 寫字動畫 • 學習重點： • 寫字筆劃順序 • 導引線圖層的使用 • Onion Skin描圖紙的使用

25. 2-13.移動補間動畫原理 Tweening補間動畫是由Flash自動產生兩個關鍵影格間的動畫 • 移動補間動畫在製作時有以下幾點注意事項： • 最少需要二個關鍵影格 • 關鍵影格內必需為群組或元件，且關鍵影格內只可有一個群組或元件 • 二個關鍵影格必須是同一個群組或元件 • 一個圖層只做一個物件的動畫，若需多個動畫時，則在不同圖層中分別完成 • 只能編輯關鍵影格，由Flash自動產生的一般影格並無法編輯 • 設定移動補間動畫後，動畫影格會以藍紫色表示 • 移動補間動畫可製作動畫方式： • Position位置移動 • Rotation旋轉 • Scale縮放 • Alpha透明度(必須是元件)

26. 2-14.移動補間動畫製作(一) • 螃蟹移動 • 學習重點： • 移動補間動畫的設定 • 轉換為元件的方法 • 進階加減速的設定 • 影格複製與貼上 • 元件的Alpha屬性設定

27. 2-14.移動補間動畫製作(二) • 開場動畫 • 學習重點： • 移動補間動畫的設定 • 進階加減速的設定 • 空白關鍵影格的使用 • 元件的Alpha屬性設定

28. 2-14.移動補間動畫製作(三) • 夜景動畫 • 學習重點： • 移動補間動畫的設定 • 進階加減速的設定 • 空白關鍵影格的使用 • 元件的Alpha屬性設定 • 聲音的匯入與使用 • 聲音同步設定

29. 2-15.Motion Guide導線動畫 經由路徑的指定，讓元件或群組物件沿著該路徑移動，以創造出較複雜的動畫。 • 導線動畫在製作時有以下幾點注意事項： • 二個關鍵影格必須是同一個群組或元件 • 導線必須是連續的線段，且必須有起始點與結束點 • Tweening漸變方式必須使用「移動補間動畫」 • 必須將工具列上的 「貼齊物件」鈕按下 • 群組或元件必須將中心點「貼附」在導引線上，才能沿導線移動 • 製作導引線圖層完成後，建議將它鎖定，避免動到路徑 • 導引線圖層中只可為線條形狀，不可以是群組或元件 • 被導引圖層的圖層圖示會向內縮，代表被導引

30. 2-16.Motion Guide導線動畫製作(一) • 飛機 • 學習重點： • 移動補間動畫的設定 • 進階加減速的設定 • 空白關鍵影格的使用 • 元件的Alpha屬性設定 • 聲音的匯入與使用 • 聲音同步設定

31. 2-16.Motion Guide導線動畫製作(二) • 果凍動畫 • 學習重點： • 移動補間動畫的設定 • 進階加減速的設定 • 空白關鍵影格的使用 • 聲音的匯入與使用

32. 2-16.Motion Guide導線動畫製作(三) • 飛機繞圓 • 學習重點： • 移動補間動畫的設定 • 圓形路徑的起點與終點 • 沿向路徑的設定 • 圖層順序的調整

33. 2-16.Motion Guide導線動畫製作(四) • 魚兒水中游 • 學習重點： • 移動補間動畫的設定 • 導線動畫移動過程中若有翻轉時，旋轉選項需設為「無」

34. 2-17.形狀補間動畫原理 Tweening補間動畫是由Flash自動產生兩個關鍵影格間的動畫 • 形狀補間動畫在製作時有以下幾點注意事項： • 最少需要二個關鍵影格 • 關鍵影格中一定要是形狀，不可為群組或元件 • 不可直接在影格上按滑鼠右鍵，建立移動補間動畫 • 一個圖層只做一個物件的動畫，若需多個動畫時，則在不同圖層中分別完成 • 只能編輯關鍵影格，由Flash自動產生的一般影格並無法編輯 • 設定移動補間動畫後，動畫影格會以藍紫色表示 • 移動補間動畫可製作動畫方式： • Position位置移動 • Rotation旋轉 • Scale縮放 • 顏色變化動畫 • 形狀改變動畫(可設定Hint形狀提示點做指定位置的形狀變化)

35. 2-18.形狀補間動畫製作(一) • 形狀變化 • 學習重點： • 形狀補間動畫的設定

36. 2-18.形狀補間動畫製作(二) • 白天與黑夜 • 學習重點： • 移動補間動畫的設定 • 旋轉圈數設定 • 形狀補間動畫的設定

37. 2-19.Mask遮色片動畫 使用遮色片圖層可以很方便地選擇性顯示該圖層或其下方圖層的某些部分。 • 遮色片動畫在製作時有以下幾點注意事項： • 必須用一個圖層作為遮色片圖層，然後讓它下方的圖層成為被遮色的圖層。 • 遮色片可以是形狀、文字、群組或元件，但是不能使用線條或外框筆畫。 • 不可直接在影格上按滑鼠右鍵，建立移動補間動畫 • 遮色片圖層或被遮圖層的物件都可以是動畫

38. 2-20.Mask遮色片動畫製作(一) • 哈姆太郎 • 學習重點： • 遮色片的設定 • 真假遮色片概念

39. 2-２０.Mask遮色片動畫製作(二) • Spotlight聚光燈 • 學習重點： • 遮色片的設定 • 真假遮色片概念

40. 2-20.Mask遮色片動畫製作(三) • 建築輪廓炫光 • 學習重點： • 用鋼筆工具繪製建築輪廓 • 如何將線段轉換成填色 • 炫光漸層與動畫設定

41. 2-20.Mask遮色片動畫製作(四) • 汽車炫光 • 學習重點： • 使用筆刷工具繪製炫光線條 • 炫光漸層與動畫設定 • 遮色片設定

42. Flash 動畫二部曲 Symbol元件角色概念 Graphic圖像、Button按鈕與Movie Clip影片片段應用 Library元件庫面板的操作

43. 3-1.Symbol元件概念(一) • Symbol元件共同特性 • 可在「元件庫」中顯示，並可重複使用，不會增加檔案大小 • 在屬性面板有「顏色」屬性，可設定「Alpha」、「亮度」…等 • 元件擁有自己獨立的時間軸，就像主時間軸一樣 • 變更元件內容時，動畫內所使用的「實體Instance」將一併改變 • 各個元件間可各自再組合成新的元件，如同積木般可任意組合ps.按鈕內不可包含另一按鈕 • 使用元件可加快SWF播放速度，因為元件只需下載到 Flash Player 一次 • 在製作或執行階段，可以將元件當作共享元件庫資源，在文件之間共享

44. 3-1.Symbol元件概念(二) Symbol元件主要分為「圖像」、「影片片段」與「按鈕」三種類型： • Graphic圖像 • 若是要當作靜態影像使用，或是要建立與主時間軸相結合、並可重複使用的動畫片段時，請使用圖像元件。 • 圖像元件會與主時間軸同步運作，即主時間軸停止，圖像元件也會停止。 • 互動式控制項及聲音無法在圖像元件的連續動畫中作用。 • Movie Clip影片片段 • 若要建立可重複使用的動畫片段，請使用影片片段元件。 • 影片片段有自己的多影格時間軸，且獨立於主時間軸之外，即主時間軸停止，影片片段元件會繼續動作，不受主時間軸影響。 • 可以包含互動式控制項、聲音、甚至是其它影片片段實體。 • 您也可以將影片片段實體放在按鈕元件的時間軸中，以建立動畫按鈕。 • Button按鈕 • 使用按鈕元件可以建立對按下滑鼠鈕、滑鼠滑過或其它動作產生回應的互動式按鈕。

45. 3-1.Symbol元件概念(三) 「圖像」與「影片片段」的差異

46. 3-2.圖像、按鈕與影片片段應用(一) • 毛毛蟲動畫製作 • 學習重點： • 毛毛蟲運動影片片段製作 • 毛毛蟲移動漸變製作 • 投影濾鏡的使用 • Alpha透明度動畫製作

47. 3-2.圖像、按鈕與影片片段應用(二) • 火焰動畫製作 • 學習重點： • Gif動畫匯入 • Library元件庫的管理 • 火焰影片片段製作 • 鏤空字效果 • 遮色片的使用

48. 3-2.圖像、按鈕與影片片段應用(三) • 聖誕卡製作 • 學習重點： • 雪的漸層顏色設定 • 下雪導引線動畫 • 時間差的下雪效果 • 背景音樂的使用

49. 3-2.圖像、按鈕與影片片段應用(四) • 蝴蝶飛舞 • 學習重點： • Illustrator向量檔案匯入 • 蝴蝶翅膀動畫影片片段製作 • 蝴蝶飛舞導引線動畫製作

50. 3-2.圖像、按鈕與影片片段應用(五) • 北海道單車之旅 • 學習重點： • Swish 與 Flash 檔案整合 • Library 元件庫的操作