Flash8 ※補充：編輯圖形與繪圖輔助功能(課本第5章) ※第4章：動畫製作原理解析(課本第10章) ※形狀補間動畫(課本第11章) ※時間軸特效(課本第16章) ※第5章：元件與元件庫 授課教師：葉麗君.

Presentation on theme: "Flash8 ※補充：編輯圖形與繪圖輔助功能(課本第5章) ※第4章：動畫製作原理解析(課本第10章) ※形狀補間動畫(課本第11章) ※時間軸特效(課本第16章) ※第5章：元件與元件庫 授課教師：葉麗君."— Presentation transcript:

1 Flash8 ※補充：編輯圖形與繪圖輔助功能(課本第5章) ※第4章：動畫製作原理解析(課本第10章) ※形狀補間動畫(課本第11章) ※時間軸特效(課本第16章) ※第5章：元件與元件庫 授課教師：葉麗君

2 編輯圖形與繪圖輔助功能 1平滑化、直線化功能 ※平滑化：可將線段或是填色形狀變得更平滑。 ※直線化：可將繪製的線段修飾成直線、圓弧線。
2將線段轉換成填色：只對線段或外框有作用。 ※可將線段變成填色形狀，以便加上框線等變化。 (1)利用鉛筆繪製線段，並選取線段。 (2)按修改→形狀→將線段轉換成填色。 (3)利用墨水瓶工具，即可為填色形狀加上框線。

3 動畫製作原理解析 ※動畫的基本概念 利用人類視覺暫留的原理，來達成動畫的目的。 ※圖層的基本操作 ※圖層：
為使動畫製作方便，通常會將動畫的人物、背景…等分開製作，再依組合的方式重疊在一起，變成完整的畫面，這種層層交疊與分開製作的方式，就是FLASH的圖層觀念。 ※影格： 就像卡通中的一張張底片，依序串連起來，而成為動畫，所以可以根據影片的內容，依序在影片中安排角色的出現，而這些影片的內容將會出現在舞台(場景)中，影格就是用來控制內容的進行。

4 圖層的基本操作 ※新增圖層： (1)按插入→時間軸→圖層。 (2)按圖層面版上的插入圖層鈕。 ※刪除圖層：按圖層面版上的刪除圖層鈕。
※修改名稱：在圖層名稱上快按二下，更改圖層名稱。 ※調整順序：利用滑鼠拖曳順序。 ※分類及存放：新增、刪除圖層資料夾及移動圖層至圖層資料夾中。 ※當點選狀態欄上的圖示時，所有圖層都會同時作用。 ※不論有多少個圖層，作用中圖層都只有一個，即名稱右鍵會出現一支筆，若圖層遭隱藏或鎖定時，則筆上會出現無法使用的圖示，代表目前無法編輯。 ※顯示、鎖定、外框。

5 影格的基本操作 ※新增影格： (1)點選第5個影格，按F5鍵即可產生4個影格，共有5個影格。
(2)在第1個影格上加入一個圓形，則所有影格都會有相同內容。 (3)此時若再加一個圖層，則新的圖層也會有5個影格。 (3)選取5個影格，再按F5鍵，則會再產生5個新影格，且原來的影格會向後移動。 ※選取影格： (1)按SHIFT鍵來選取連續影格。 (2)以滑鼠拖曳來選取連續影格。 (3)直接點選圖層名稱，即會選取圖層中的所有影格。 (4)點選舞台中物件，則會自動選取該物件的所有影格。

6 影格的基本操作 ※移除影格： (1)選取影格→按右鍵→移除影格。
※影格速率(Frame Rate)：是指Flash動畫每秒鐘播放的影格數，預設是12fps，即每秒播放12格影格，影格速率會影格動畫的流暢性，若太低，則會有停格現象。 ※修改影格速率： (1)點選文件的屬性面版。 (2)按修改→文件→影格速率。

7 影格的種類 ※ Flash中的影格分為3種類型：一般影格、關鍵影格、空白關鍵影格。
※一般影格(Frame)：關鍵影格和空白關鍵影格之外的影格。 (1)利用F5鍵產生，會延續前一個關鍵影格或空白關鍵影格的內容。 (2)當前方有空白關鍵影格時，影格會呈現白色，當前方有關鍵影格，影格會呈現灰色。 (3)結束影格：影格中會標示空心小方格，其是關鍵影格與關鍵影格間動畫的最後一格。

8 影格的種類 ※關鍵影格(keyframe)：多用在動畫過程中產生變化的影格，是動畫的重心，可在關鍵影格中加入物件或特效、編輯圖像、編輯元件或是加入ActionScript。 (1)利用F6鍵產生。 (2)當關鍵中有圖形物件時，影格中會出現一個黑圓點。 (3)按右鍵→清除關鍵影格，會將影格轉變為一般影格。 ※空白關鍵影格(Blank keyframe)：是種特殊的關鍵影格，表示此關鍵影格中沒有任何物件其作用是清空前一關鍵影格中的物件，多半是用在關鍵影格之後。 (1)利用F7鍵產生。 (2)每個圖層的第1個影格都是空白關鍵影格。 (3)當加入物件，則空白關鍵影格會轉變為關鍵影格。

9 影格的編輯 ※搬移影格：選取影格後直接拖曳至目的地。 ※複製影格： (1)選取影格後，加按alt鍵，拖曳至目的地。
(2)不同檔案間的複製，利用右鍵→複製影格、右鍵→貼上影格指令。 ※反轉影格：反轉影格.fla (1)選取影格後，按右鍵→複製影格，接續影格，按右鍵→貼上影格，再選取貼上的影格數，按右鍵→反轉影格。 ※影格的檢視

10 製作基本動畫 逐格動畫 ※開啟範例：逐格動畫.fla，製作一逐格動畫-作業。 形狀補間動畫(課本第11章)
※補間動畫是Flash標準的動畫繪製方式，使用者只需要在關鍵影格中繪製好所需要的圖形，中間的畫面Flash會自動幫你補齊，補間動畫有許多的表現方式。 ※形狀補間動畫：將二個關鍵影格中的圖形，用漸變的方式串連起來。 ※練習：利用屬性中的補間動畫-形狀，製作一五角星形變為五邊形的動畫。 ※要製作形狀補間動畫時，一定要使用打散之後的圖形物件。

11 製作基本動畫 漸變控制 ※透過漸變控制的功能，可以讓圖形在執行動畫的過程中可以變得比較平順且更流暢。
※練習：利用屬性中的補間動畫-形狀，製作一字母由A至P的變化，記得將文字打散。 ※有些字的變化會顯得支離破碎，則可進一步的修改，首先先選擇第一個影格，按Ctrl+Shift+H鍵(或按修改→形狀→增加形狀提示點)，形狀提示點最多可以設26個。 移動補間動畫 ※如果動畫中只是同一個物件的移動及變化，則可以採用移動補間的方式來製作動畫。 ※移動補間動畫在同一個圖形中只能作用在一個圖形物件。 ※在製作移動補間動畫時，不可以用打散圖形物件，但可以是群組後的圖形物件。 ※練習：開啟「移動補間動畫.fla」。

12 時間軸特效(課本第16章) ※認識時間軸特效：助理、特效、變形/轉場。 ※特效設定：展開、投影、模糊、爆破。 ※變形與轉場特效：變形、轉場。
※助理特效：散佈複本、複製至格線。 ※編輯時間軸特效 ※練習：

13 元件與元件庫 產生元件的方法 ※開啟元件庫的方法： ※將現有圖形轉換成元件 ※註冊點的位置(可配合檢視→尺規及視窗→資訊來了解)。
法1：按視窗→元件庫。 法2：按Ctrl+L鍵。 法3：按F11。 ※將現有圖形轉換成元件 法1：將繪製好的圖形，按修改→轉換成元件。 法2：按F8鍵。 法3：將圖形直接拖曳至元件庫中。 ※註冊點的位置(可配合檢視→尺規及視窗→資訊來了解)。

14 元件與元件庫 重新繪製新元件 ※視窗中的+字，代表元件註冊點的位置。
法1：按插入→新增元件。 法2：按Ctrl+F8鍵。 ※視窗中的+字，代表元件註冊點的位置。 ※繪製完後可以按場景1或，回到場景區中，開啟元件庫可以將元件拖曳到場景區中。 ※由其他影片檔中置入元件 ※若在其他的動畫影片中已有繪製好的元件，可將它置入新的動畫影片中。 ※按檔案→匯入→開啟外部元件庫。可將外部元件加入目前的元件庫中。 ※為什麼要使用元件？ ※優點： 1可以重覆使用，2可以減少動畫影片中的大小。 3修改容易，4可以使用較多特效。

15 元件與元件庫 ※元件的色彩控制：在屬性面版中的顏色來修改亮度、色調、Alpha、進階。
※亮度及透明度很接近，但在背景色不是白色的情況下就可明顯的看出差別。 ※元件的類型： 一、影片片段(MOVIECLIP)元件：可以在只有一個影格的情況下顯示動畫。 ※練習：彈球 1.按Ctrl+F8新增元件，類型為影片片段，進入影片片段編輯視窗，建立一圓球。 2.在影格10及影格20上按F6，各新增一個關鍵影格。 3.在影格1將球上移50像素，在影格10將球下移50像素。 4.在影格1按右鍵→複製影格，在影格20按右鍵→貼上影格。 5.分別在影格1及影格10，按右鍵→建立移動補間動畫。 6.在影格10，將圓球利用自由變形工具，將其改為扁一點。 7.接著點選場景1的標籤回到場景中，按F11，將新增的彈球拖曳到舞台中，測試。

16 元件與元件庫 二、按鈕(BUTTON)元件：互動式的設計常用到的。 ※練習：
1.按Ctrl+F8新增元件，類型為按鈕，進入按鈕編輯視窗，點選一般影格，繪製一橢圓形。 2.點選滑入影格，按F6鍵加入一個關鍵影格，進入編輯視窗中，改變顏色。 3.點選按下影格，按F6鍵加入一個關鍵影格，進入編輯視窗中，改變顏色及做旋轉。 4.點選一般影格，按右鍵→複製影格，再點選感應區，按右鍵→貼上影格。 5.接著點選場景1的標籤回到場景中，按F11，將新增的按鈕拖曳到舞台中，測試。 三、圖像(GRAPHIC)元件：圖像元件無法被動作指令呼叫，也無法觸發滑鼠元件，但却是一切圖形的根本，也具有較小的檔案量。 ※練習：開啟圖像.fla，練習組合及分散到各個圖層中。 ※補間動畫在一個圖層中只能作用一個元件，所以許要將所有的元件分散在不同的圖層中始可完成所要的動作。

17 元件與元件庫 ※元件庫(LIBRARY)的使用 ※影片的播放控制 ※控制器：按視窗→工具列→控制器。 ※重複播放：按控制→重複播放。
※測試完整動畫內容：按Ctrl+Enter鍵。 ※測試某一個場景內容：先選擇要播放的場景，再按Ctrl+Alt+Enter鍵。 ※測試按鈕的動作：按控制→啟動簡易按鈕。

18 動手作作看--超級動態按鈕的製作 ※動態花-影片片段： ※會動的花-圖像： ※動態花按鈕-按鈕： ※整合：
1.按Ctrl+F8新增元件，類型為影片片段，名稱為動態花，進入影片片段編輯視窗，將靜態花拖曳至舞台中。 2.在影格10、20、30上按F6，各新增一個關鍵影格。 3.將影格10作旋轉45度，並更改顏色。將影格20作旋轉90度，並更改顏色。將影格30作旋轉135度，並更改顏色，分別在影格1、10、20建立移動補間動畫。 ※會動的花-圖像： 1.按Ctrl+F8新增元件，類型為圖像，名稱為會動的花，進入編輯視窗，將靜態花拖曳至舞台中，接著調整其色調。 2.新增一圖層，將動態花影片片段的元件拖曳至舞台中。 ※動態花按鈕-按鈕： 1.按Ctrl+F8新增元件，類型為按鈕，名稱為動態花按鈕，進入編輯視窗，將動態花影片片段拖曳至舞台中。 2.分別在影格滑入、按下中按F6，各新增一個關鍵影格，並點選滑入、按下改變圖形顏色。 ※整合： 1.回到場景中，點選花的圖層，依照畫面中元件的指示，將各種元件從元件庫中拖曳到舞台中。