Flash 教學使用 Flash CS3

1. Flash教學使用Flash CS3 交通大學電子工程系 劉昱賢

2. 何謂Flash • Flash是美國Adobe公司設計出品的動畫工具軟體，他可以在不同的平台播放。在網際網路上與網頁設計整合是一大主流，可以補強網頁動感不足的缺憾。 • 由小至按鈕、選單的製作，大到多場景動畫影片的設計，Flash皆可勝任。由於Flash有極佳的互動功能，強調互動機制的動畫設計，譬如遊戲、互動廣告、線上調查等等。

3. 如何知道這是Flash的動畫？ • 用滑鼠右鍵去點選動畫，如果看到彈出選單有[關於Flash Player…]字樣便是了

4. 動畫原理 • 動畫的基本原理，就是將數張靜止的圖片，以很快的速度連續播放(通常是每秒24~30張)，而由於人類眼睛有「視覺暫留」的特性，所以根本分辨不出上一張畫面與下一張畫面，於是連續播放的這些靜態圖片，看起來就變成連續的動畫了！

5. Flash動畫 • 用Flash做動畫，主要方式有兩種 • 影格動畫(Frame by Frame) • 類似傳統的卡通一格一格的製作 • 漸變動畫(Tweened) • 只要製作第一格及最後一格，中間就由flash來代勞，可以省去不少麻煩

6. Flash

7. 圖層 • 元件庫 • 場景 • 輸出檔案

8. 軟體特色 • 功能簡介 • 動畫製作概念 • 編輯環境介紹 • 繪圖工具介紹 • 繪圖基本要領 • 圖形與群組關係 • 繪圖實作 • 元件的使用

9. 軟體特色 • 簡單易用，容易學習 • 動畫檔案小 • 可使用MP3壓縮檔，減少檔案體積 • 下載速度快，不受頻寬影響 • 受到充分的支援 • 線上教學，互相討論技術

10. 功能簡介 檔案 時間軸 圖層 調色盤 場景元件 工具 元件庫 工作區 浮動版面

11. 工作區 • 就如同電影中的表演舞台，就看我們讓誰上台表演，也如同繪圖軟體中的畫紙，可見區域只有白色的地方哦。 • 時間軸 • 就好像電影中的底片數(時間)。電影播放時按照時間軸一格一格的放映。

12. 圖層 • 可以說是物件的上下，但每個圖層中也都有物件的上下之分。 • 工具 • 提供Flash最常用的工具。

13. 檔案切換區 • 可以在不同檔案切換，方便多了 • 場景元件 • 要修改那個場景、那個元件，或要切換到那個場景、那個元件就是在這裡 • 視野的大小切換也是在這裡

14. 浮動面板 • 所有的功能面版全部集中在這裡，可依個人的需求切換Tab • 修改物件屬性 • 調色盤 • 選擇填色相關參數 • 元件庫 • 元件重複使用

15. 工具箱

16. 工具箱 • 繪圖工具，與一般繪圖軟體的工具差不多，有各種鉛筆、筆刷、橡皮擦工具 • 用『工具』列可以挑選繪圖工具 • 用『檢視』列可以調整對物件的檢視 • 用『顏色』列可以設定工具相關的顏色 • 用『選項』列可以對工具做較細部的設定

17. 工具箱 • 箭頭工具：一般選取用工具 • 貝茲選取工具：用以編輯選取元件的線條，以編輯點為中心，編輯出曲線 • 線段工具：直線 • 套索工具：可以任意分割選取欲編輯的元件

18. 工具箱 • 鋼筆工具：貝茲曲線繪圖筆 • 文字工具：加入文字的工具 • 橢圓工具：畫圓的工具 • 矩形工具：畫方形的工具 • 鉛筆工具：自由畫線的工具

19. 工具箱 • 筆刷工具：自由上色的工具 • 墨水瓶工具：線條上色工具 • 油漆桶工具：範圍填色工具 • 滴管工具：取得畫面顏色 • 橡皮擦工具：清除工具

20. 繪圖技巧：基本工具的使用方式 • 當圖形物件重疊時 • 不同顏色有分割效果 • 相同顏色有黏合的效果

21. 為避免產生分割和黏合的現象 • 可以利用 • 建立群組物件 • 轉成元件 • 利用圖層

22. Flash物件的種類有三種 • 一般物件 • 群組物件 • 元件物件 • 影片片段 • 按鈕 • 圖像

23. 動畫 • 動態補間(Motion Tweening) • 形變動畫(Shape Tweening) • 影格動畫(frame by frame) • 導引動畫(Guide Motion) • 遮罩動畫(Mask Motion) • Alpha_動畫

24. 動態補間(Motion Tweening) • Layer1：(f1)畫出一個實心圓 • Layer1：(f30) • 插入關鍵影格 • 將該圓移至適當處 • Layer1：(f1)按右鍵 建立移動補間動畫 • Ctrl+Enter 測試影片

27. 形變動畫(Shape Tweening) • Layer1：(f1)畫出一個實心圓 • Layer1：(f30) • 插入關鍵影格 • 將該圓刪掉 • 插入方形 • Layer1：(f1)按右鍵 建立形狀補間動畫 • Ctrl+Enter 測試影片

28. 形變動畫(Shape Tweening)

29. 形變動畫(Shape Tweening)

30. 導引動畫(Guide Motion) • Layer1：(f1) • 從元件庫拿出元件

31. 導引動畫(Guide Motion) • Add Guide Layer 新增一個導引圖層 • 在導引圖層畫出要導引的線段

32. 導引動畫(Guide Motion) • Layer1及Guide Layer1 • 同步在(f30)插入關鍵影格 • Layer1： • (f1)將圓球移至線段的起點 • (f30)將圓球移至線段的終點

33. 導引動畫(Guide Motion)

34. 遮罩動畫(Mask Motion) • Layer1：(f1)輸入FLASH，大小100以上 • Layer2：(f1) • 在FLASH左邊繪製一圓，（探照燈作用），Group

35. Layer1、2同步(f30)插入關鍵影格

36. Layer2：(f30) • 將該圓移至FLASH字的右邊 • (f1)建立移動補間動畫

37. 在Layer2上按右鍵，選Mask，變成Layer1的遮罩(Mask)在Layer2上按右鍵，選Mask，變成Layer1的遮罩(Mask)

38. Group群組(1/3) • 當我們製作一個圓時，該圓包含二個物件， • 外框線 • 填色區塊

39. Group群組(2/3) • 如果沒有將此圓作「群組」的話，此二個物件可能因搬移而變形或分離 • 若要移動一個完整的圓時，必先要先將此圓作「群組」。 • 實際上，群組最大的作用再將零散的圖形或物件，組成一個群組物件，可以維持彼此間的相對關係，而且做變形處理的時候也比較方便。

40. Group群組(3/3) • 拖曳出一個圓形。 • 使用選取工具，將剛剛所畫的圓框住。 • [群組]或 Ctrl + G 即可。 • [解除群組 ] 或 Ctrl + shift + G 即可

41. Scale縮放 • 先點選欲縮放的物件，再選擇工具下方的縮放鈕，接著物件四周會出現控制點，只要調整控制點即可對物件縮放。

42. Break Apart 打散(1/2) • 打散的功能與解除群組有點類似 • 解除群組是將群組化的物件還原成原來的圖形或物件。而打散的功能除了也能執行解除群組外，還可以將物件、點陣圖、文字等轉成向量圖形的性質，即可執行繪圖功能的填色區域或線條等。

43. Break Apart 打散(2/2) • 全選欲打散的物件。 • 打散元件 • 打散文字（填色、變形）

44. 排列順序 • 選擇欲移動的物件，然後再執行Modify / Arrang 即可調整物件前後排列的順序 • Bring to front 移至最前 • Bring forward 置前 • Send backward 置後 • Send to back 移至最後

45. 元件庫 • 元件庫概念 • 製作Symbol元件簡介 • 元件特色 • 新增元件 • 匯入元件

46. 元件庫概念 • 在flash中，可以將重複使用的物件 • 如圖形物件、群組物件、文字物件…等等 • 製作成元件(symbol)，製作好的元件存放在元件庫(library)中，當你需要使用時，就從元件庫取出，放在編輯區中編輯，這時被放入編輯區的就是元件的分身：實體(Instance)

47. 製作Symbol元件簡介 • 相同的元件可能在影片中出現數次，因此，將重複使用的物件轉化為元件（Symbol），存至元件庫中（Library），不只可以節省檔案大小，亦可以加快檔案執行的速度

48. 元件特色 • 可讀入其他檔案的元件來使用。 • 圖形轉成元件，才能做動畫。 • 一個元件可以有許多實體。 • 實體刪除，元件還在。元件刪除，實體也被刪除。 • 實體改變整體的顏色、大小，形狀，不會影響元件。實體改變填色、線條顏色，元件及其他實體會跟著改變。

49. 製作Symbol元件簡介

50. 製作Symbol元件簡介 • 使用元件庫