本週課程內容簡介 Flash Professional動畫軟體簡介 Flash操作介面簡介 動畫類別簡介及範例實做.

Presentation on theme: "本週課程內容簡介 Flash Professional動畫軟體簡介 Flash操作介面簡介 動畫類別簡介及範例實做."— Presentation transcript:

0 Adobe Flash Professional 手機影音動畫設計(二) -大仁科技大學 數位多媒體設計系
手機動畫影音設計 Adobe Flash Professional 手機影音動畫設計(二) -大仁科技大學 數位多媒體設計系 授課講師: 施伯宜 博士 授課時間:第十二週(5/8), A309教室 Facebook Group:

1 本週課程內容簡介 Flash Professional動畫軟體簡介 Flash操作介面簡介 動畫類別簡介及範例實做

2 1. Flash Professional動畫軟體簡介

3 檔案的存取與文件設定

4

5 繪圖工具

6 物件的編輯

7 元件的建立與編輯 製作動畫時，將物件轉成元件，可以減少動畫的大小、改變 亮度/色調/透明度，並加上AcitonScript來建立互動效果。
新增元件 點選[插入->新增元件] ，輸入元件名稱並選擇元件類型。 轉換元件 選取繪製好的圖形或匯入的圖片，點選[修改->轉換成元 件] ，

8 圖層的編輯與管理 圖層與時間軸編輯動畫，關鍵影格可以記錄物件的狀態(位 置、大小、顏色效果) ，或是插入媒體(影像、聲音、視 訊) 。此外撰寫的ActionScript程式也是放在關鍵影格上。 插入圖層，點選[插入圖層]圖示，即可在目前的圖層上新增 一個空白圖層。

9

10

11 B. 動畫類別及範例實做 Flash使用時間軸編輯動畫，時間軸紀錄時間的經 過，並使用關鍵影格來記錄物件的狀態。Flash製作 動畫的方式，可分為移動補間動畫、形狀補間動 畫、逐格動畫。

12 移動補間動畫

13 關鍵影格動畫製作–文字動畫 先在[圖層一][影格1]繪製一文字背景。 在[圖層一]按右鍵選擇[插入圖層]，產生圖層二。
在[圖層二][影格1]利用文字工具輸入文字，例如:”輕鬆吃餅 乾”。輸入後在文字物件上，合按【Ctrl+B】打散群組物件， 把每個字拆開。 接著預計每4個影格按順序各出現下一個字，因此在[圖層 二]的[影格4]、[影格8]、[影格12]、[影格16]按右鍵選擇 [插入關鍵影格] 。 接著在各關鍵影格刪除不要出現的字。 在[圖層一][影格16]按右鍵選擇[插入影格]，延長背景出現 至文字完整顯示。 在[圖層二]按右鍵選擇[插入圖層]，產生圖層三。 [圖層三]主要是製造文字輸入的底線效果，在[圖層三]的 [影格4]、[影格8]、[影格12]、[影格16]按右鍵選擇[插入 關鍵影格]，並在各文字旁繪製一底線。

14 導引線動畫製作 Flash可以給元件一個特定的移動路徑，讓元件隨著該路徑 移動；亦即先『增加移動導引線圖層』，並繪製導引線，再 將『元件圖層』之元件分別拖曳至導引線的起點及終點，如 此圖層內的元件才會根據導引線的路徑移動。 先點選「圖層1」的「影格1」，再將圖案轉換成元件，接著 點選「影格15」並按功能鍵【F5】新增影格。 在「圖層1」上按右鍵選擇「增加移動導引線」，畫面立即 在「圖層1」的上方增加一個「導引線圖層」。 先點選「導引線圖層」的第1個影格，再選取「工具列」的 「鉛筆工具」，接著在編輯區中元件移動之路徑（鉛筆的粗 細及顏色並不會影響元件的移動，測試動畫結果時，導引線 會自動隱藏不顯示，亦可利用筆刷工具建立路徑）。 按「選取工具」並按下選項的「貼齊物件」鈕，再選取「圖 層1」的第1個影格，並拖曳編輯區圖像元件之中心點至路徑 的起點。然後再選取「圖層1」的「影格15」， 先按下 【F6】插入關鍵影格，再拖曳編輯區該影格中的元件之中心 點至另一端導引線路徑的終點。

15 實際操作 請利用關鍵影格動畫製作方式實做一範例。 請利用導引線動畫製作方式實做一個範例。 文字圖片不拘 操作時間：30分鐘 參考範例:

16 動畫製作 - 遮色片圖層應用 若要建立動態特效，可以將遮色片圖層製成動畫。對於當成 遮色片使用的填色形狀，請使用形狀補間動畫；對於文字物 件、圖像實體或影片片段，請使用移動補間動畫。在將影片 片段實體當成遮色片使用時，可以沿著移動路徑將遮色片製 成動畫。 建立遮色片圖層 選取或建立圖層，其中含有要在遮色片內顯示的物件。 選取「插入 > 時間軸 > 圖層」，建立其上的新圖層。遮色 片圖層一定會遮蓋正下方的圖層，所以請在適合的位置建立 遮色片圖層。 在遮色片圖層上放置填色形狀、文字或元件實體。Flash Professional 會忽略遮色片圖層中的點陣圖、漸層、透明 度、顏色和線段樣式。遮色片中的任何填色區域都是完全透 明的，而任何沒有填色的區域則是不透明的。

17 將遮色片圖層上的填色形狀、文字物件或圖像元件 實體製成動畫
在「時間軸」中的遮色片圖層名稱上按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「遮色 片」。遮色片圖層圖示即表示遮色片圖層。正下方的圖層會 連結到遮色片圖層，其內容則會透過遮色片上的填色區域顯 示。此外，會將被遮色的圖層名稱縮排，其圖示也會變更為 被遮色的圖層圖示。 若要在 Flash Professional 中顯示遮色片特效，可以鎖定 遮色片圖層和被遮色的圖層。 中斷圖層和遮色片圖層之間的連結 選取要中斷連結的圖層，並執行下列其中一項：將圖層拖曳 到遮色片圖層上方。 選取「修改 > 時間軸 > 圖層屬性」，然後選取「一般」。 將遮色片圖層上的填色形狀、文字物件或圖像元件 實體製成動畫 在「時間軸」中選取遮色片圖層。 若要解除鎖定遮色片圖層，可以按一下「鎖定」欄。

18 在動畫作業完成後，對遮色片圖層按一下「鎖定」 欄，以便重新鎖定圖層。
請執行下列其中一項： 如果遮色片物件為填色形狀，請將形狀補間動畫套用到此物 件。 如果遮色片物件為文字物件或圖像元件實體，請將移動補間 動畫套用到此物件。 在動畫作業完成後，對遮色片圖層按一下「鎖定」 欄，以便重新鎖定圖層。

19 範例-利用Flash遮色片製作卷軸動畫效果
(教學資料來源:

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37