Class1动画原理制作基本概念课件

1、Class1動畫原理製作基本概念介面介紹基本動畫製作檔案格式繪圖物件(一)時間軸的運用(一)補間動畫與逐格動畫Class1動畫原理製作基本概念介面介紹基本動畫製作Flash MX視窗 Flash MX視窗 面板的操作 面板的展開與收合 將滑鼠移到面板的標題上，直接按標題名稱就可以收合面板，當面板呈收合狀態時，再按一次標題名稱就可以將面板重新展開。 獨立的面板 使用拖曳的方式執行功能表中的視窗面板集預設版面，面板的關閉與開啟 建立並儲存個人的面板組合 視窗儲存面板版面， 視窗面板集 使用視窗工具列開啟常用功能工具列主要、狀態、控制器面板的操作 面板的展開與收合 認識時間軸面板 在製作動畫時，時間

2、軸是我們控制動畫播放時間的面板。時間軸面板上可包含圖層檢視列、時間軸、圖層名稱、影格、圖層工具、描圖紙工具等。 認識時間軸面板 在製作動畫時，時間軸是我們控制動畫播放時間的動畫文件編輯區 動畫文件編輯區是主要的動畫內容編輯場所，若只注意這部份的視窗，我們可以參考下列畫面（ch01-1.fla）： 動畫文件編輯區 動畫文件編輯區是主要的動畫內容編輯場所，若只屬性檢視器 當我們點選動畫文件中的某個物件時，屬性面板就會即時的顯示出該物件的相關屬性設定，在我們編輯動畫時，這項功能十分有用。屬性面板右下角有展開或收合資訊區域的按鈕，當展開資訊區域時，我們可以設定更多的物件屬性。 (ch01-1.fla)

3、 屬性檢視器 當我們點選動畫文件中的某個物件時，屬性面板就播放Flash影片 實作演練：ch01-3.fla學習如何播放及測試Flash影片。要播放目前畫面中的動畫，我們可以執行功能表中的控制播放，則影片會立即播放。或者，我們也可以直接按下Enter鍵來播放動畫。若要停止目前動畫的播放，可以再次按下Enter鍵，則播放中的動畫就會停止在播放時的影格上了。功能表中的控制重複播放， 功能表中的視窗工具列控制器， 播放Flash影片 實作演練：ch01-3.fla測試影片 很多情況下，我們無法直接按Enter鍵來預覽影片的播放內容，尤其是當影片中包含了ActionScript的語法設定時。但我們可以

4、執行功能表中的控制測試影片，或是直接按Ctrl+Enter鍵來預覽影片的輸出畫面，實際上，測試影片的畫面就如同我們將影片輸出成swf檔時的播放畫面。如果要在目前的測試環境中暫停影片的播放，可以按下Enter鍵使目前的影片停止或重新播放。功能表中的檢視頻寬設定可查看影片下載的瓶頸點 測試影片 很多情況下，我們無法直接按Enter鍵來預覽影修改影片內容 每當我們開啟一個新的Flash文件時，該文件的預設大小都是550 x400像素的大小，如果我們要修改影片的屬性，可以執行功能表中的修改文件，啟動文件屬性的對話方框，並進行影片預設值的修改。 修改影片內容 每當我們開啟一個新的Flash文件時，該文件

5、的編輯輔助工具的使用 實作演練：ch01-4.fla在製作動畫的過程中，可以使用尺規、格線等工具來將物件擺放至定位，以提高製作動畫的效率。 尺規：執行功能表中的檢視尺規 格線：執行功能表中的檢視格線顯示格線 編輯輔助工具的使用 實作演練：ch01-4.fla圖形的顯示模式 Flash的圖形顯示方式可以有外框、快速、消除鋸齒、消除文字鋸齒、強制齊行等五種模式，若以不同的模式來顯示圖形，則顯示的速度和圖形的品質會有所不同，但原圖形則不會有所改變。 功能表中的檢視預覽模式 實作演練：ch01-5.fla以不同的預覽模式檢視舞台中的物件圖形的顯示模式 Flash的圖形顯示方式可以有外框、快實作練習開啟

6、一份新的Flash文件，並依下列的屬性值設定文件屬性：寬度：400像素、高度：300像素；背景顏色：#CCCCFF設定完成後，將檔案儲存於桌面上，並命名為class1_test.fla。在目前的Flash視窗中，編排面板群組的顯示項目為對齊、混色器、顏色色票和資訊等四種面板，並將目前的版面儲存，並設定名稱為我的版面。 實作練習開啟一份新的Flash文件，並依下列的屬性值設定文件動畫製作基本概念 在Flash中用來製作動畫的物件我們一般稱為元件，但這並不是絕對的，因為動畫的物件也可以是繪圖物件或是群組之後的繪圖物件。 每個Flash動畫中所使用到的元件都可以在元件庫中找到，我們可以執行功能表中的

7、視窗元件庫或是按Ctrl+L(F11功能鍵)來開啟Flash文件的元件庫，並且將元件拖曳到舞台中來製作動畫。 動畫製作基本概念 在Flash中用來製作動畫的物件我們一般稱Flash製作動畫的四個步驟 利用Flash製作動畫的方式基本上可以歸納成四個步驟： 決定物件在動畫開始時在舞台中的位置或相關屬性。決定動畫持續的時間及物件在動畫結束時在舞台中的位置或相關屬性。設定動畫播放的類型。播放或測試動畫。 實作演練：ch02-1.fla製作一個動畫，在三秒鐘的時間中，讓元件由舞台右邊移到左邊 Flash製作動畫的四個步驟 利用Flash製作動畫的方式基元件的操作 實作演練：ch02-2.fla了解元件

8、的基本操作方式 在舞台中加入及刪除元件實體 在舞台中移動及複製元件實體 在舞台中改變元件實體的大小 當我們點選元件實體時，可以再按工具列上的自由變形工具鈕來改變元件實體的大小、旋轉角度、斜切程度。 執行功能表中的視窗變形 在舞台中改變元件實體的顏色 元件的操作 實作演練：ch02-2.fla設計大小漸變的動畫 實作演練：ch02-3.fla製作一個動畫，在三秒鐘的時間中，飛機元件由舞台左上角移到右下角，並在播放過中，飛機元件逐漸變小。 在動畫開始時，加入元件實體，並設定實體的屬性 設定動畫播放的時間及動畫結束時元件實體的屬性 設定動畫播放的方式 播放設定完成的動畫 設計大小漸變的動畫 實作演練

9、：ch02-3.fla利用屬性面板設定動畫效果 在Flash的屬性面板中，提供了加/減速的設定及旋轉效果的設定，但這兩項設定值必須在設定補間動畫類型後，才可以設定。 利用屬性面板設定動畫效果 在Flash的屬性面板中，提供速度變化 Flash除了提供等速移動的動畫功能之外，我們也可以利用它內建的功能來製作一個加速或減速的動畫。加/減速的設定必須在動畫起始點的關鍵影格上建立。我們可以屬性面板的加/減速中設定速度變化的變化。如果將數值設定為正數，動畫則呈現減速的效果，設定的數值最大可至100；反之，如果將數值設定為負數，則動畫呈現出加速的效果，設定的數值最大可至-100。 實作演練：ch02-4.

10、fla製作一個動畫，在三秒鐘的時間中，賽車元件實體由舞台左下角移到右上角，並在播放過中，賽車元件實體逐漸變小，並加速離去。 速度變化 Flash除了提供等速移動的動畫功能之外，我們也可旋轉變化 在Flash的內建功能中，它提供順時針和逆時針兩種旋轉的設定，可使元件產生等速旋轉的動畫效果。但我們也可以使用變形的功能將元件變形，來產生類似旋轉效果的變形動畫。元件實體的旋轉的設定可以在屬性面板中設定中，我們可以找到四個選項： 實作演練：ch02-5.fla製作一個動畫，將目前的動畫修改，設定文字元件實體由舞台中央依順時針的方式旋轉5次，並逐漸加速放大、消失 旋轉變化 在Flash的內建功能中，它提供

11、順時針和旋轉變化實作演練：ch02-5-1.fla設定元件實體的翻轉屬性，並產生動畫效果 旋轉變化實作演練：ch02-5-1.fla顏色變化除了使用移動或形狀漸變來製作動畫以外，您也可以改變元件的色調、透明度等數值，讓動畫有更多的變化。實作演練：ch02-5-2.fla製作文字顏色變化的動畫效果實作演練：ch02-5-3.fla製作元件淡入淡出的效果淡入：由透明而漸顯示淡出：由可見而變透明顏色變化除了使用移動或形狀漸變來製作動畫以外，您也可以改變元認識影格 準備動作：開啟 ch02-6.fla 檔案，按Enter鍵播放 各種影格的類型 影格(Frame) 在時間軸上按右鍵，選插入影格或按F5

12、關鍵影格(KeyFrame) 在時間軸上按右鍵，選插入關鍵影格或按F6 空白關鍵影格(Blank KeyFrame) 在時間軸上按右鍵，選插入空白關鍵影格或按F7 刪除影格 清除關鍵影格 在時間軸上按右鍵，選清除關鍵影格 認識影格 準備動作：開啟 ch02-6.fla 檔案，按E設計兩段式的動畫 實作演練：範例資料檔chap02ch02-7.fla修改動畫，將範例檔中的鴨子元件第1秒的動畫效果修改成由右上角移動至舞台正中央。並製作第2秒的動畫，鴨子必須由舞台正中央移動至左上角，停留1秒後，再換成鳥由左上角移動至右上角，持續1秒鐘。 設計兩段式的動畫 實作演練：範例資料檔chap02ch利用空白

13、關鍵影格設計動畫 實作演練：範例資料檔chap02ch02-7-1.fla學習加入關鍵影格及空白關鍵影格，並製作動畫，讓文字元件移至中央，再放大擴散 利用空白關鍵影格設計動畫 實作演練：範例資料檔chap0倒數計時的動畫效果 實作演練：範例資料檔chap02ch02-7-2.fla學習加入關鍵影格及空白關鍵影格，並製作動畫，讓文字元件顯示倒數計時的效果倒數計時的動畫效果 實作演練：範例資料檔chap02影格的檢視模式 我們可以根據需要來調整時間軸上影格的顯示模式。按時間軸右上角的模式按鈕，我們可以看到各種不同的檢視模式，其中包含了影格大小的調整和影格內容的預覽。 實作演練：ch02-8.fla

14、 影格的檢視模式 我們可以根據需要來調整時間軸上影格的顯示模式描圖紙的使用1/2 在動畫的編輯過程中，我們只能看到目前影格的內容，而無法參考到整個動畫的變化過程。Flash提供了描圖紙的功能，讓我們在編輯動畫時，能同時看到不同影格的物件內容，有助於我們調整動畫物件的位置。我們可以在時間軸面板下方找到相關的描圖紙按鈕。實作演練：ch02-13.fla使用目前製作完成的動畫，了解描圖紙工具的使用。 描圖紙置中影格修改描圖紙標籤編輯多個影格描圖紙外框描圖紙的使用1/2 在動畫的編輯過程中，我們只能看到目前影格描圖紙的使用2/2描圖紙工具 按下描圖紙工具鈕後，其他影格的內容也會顯示出來，但是是以較透明

15、的方式顯示，讓我們可以分辨出目前編輯的影格的影像。 描圖紙外框工具 按下描圖紙外框工具鈕後，其他影格的內容也會顯示出來，但是是以外框的方式顯示，讓我們可以分辨出目前編輯的影格的影像。 修改描圖紙標記工具 永久顯示標記設定為永久顯示標記時，即使沒有設定描圖紙的功能，時間軸上還是會有標記範圍。 鎖定描圖紙設定為鎖定描圖紙時，會將描圖紙的標記範圍固定，即使改變時間軸的指標位置，描圖紙的範圍都不會改變。 編輯多個影格工具 描圖紙的使用2/2描圖紙工具 Flash 的繪圖工具 Flash的工具箱中提供了一些功能讓我們可以對圖形進行操作，或是繪製圖形。大致上，工具箱可以區分為四個部份：繪圖工具 檢視工具

16、顏色工具 選項工具 如果要顯示或隱藏工具箱，可以利用功能表中的視窗工具來達成。 Flash 的繪圖工具 Flash的工具箱中提供了一些功使用繪圖工具 線段工具點選工具箱中的線段工具並利用拖曳的方式可以在舞台中繪製線段。 如果要繪製水平或垂直的線條，可以按下Shift鍵不放，再行繪製。 如果若要更改選取物件的筆畫顏色、樣式和寬度，我們可以使用屬性面板中的筆畫顏色控制項。 在屬性面板中按下自訂鈕，我們可以修改筆畫的樣式。在繪製直線時，如果需要繪製較精準長度或角度的直線時，可以考慮先執行功能表中的檢視格線顯示格線，將網格顯示在舞台中，再執行功能表中的檢視貼齊貼齊格線格線的功能，就可以畫出較精準的線條

17、了。 使用繪圖工具 線段工具使用繪圖工具線段工具當我們將線段繪製完成時，可以利用選取工具來選取線段，我們可以使用框選的方式來選取範圍內的圖形，或是在線段上點選。但是如果線條有交叉或是交接時，點選線段只能選取某一部份的線段，必須使用框選或是在線段上雙擊才可以選取所有交接的線段。 如果需要選取的線條不相鄰時，除了用框選的方式之外，還可以按下Shift鍵不放，再利用點選的方式，選取不相鄰的線條。 如果需要刪除線條時，可以利用點選或框選的方式選取我們要刪除的區域或是線條，再按Delete鍵，就可以刪除了。 如果我們點選了線段後，滑鼠指標移到線段上時的形狀如同，我們可以用來拖曳並移動線段；但是當線段未選

18、取時，如果將滑鼠指標移到線段上時，形狀會是或是，我們可以拖曳線段，並將它改變成弧線或是尖角線。 使用繪圖工具線段工具使用繪圖工具鉛筆工具點選工具箱中的鉛筆工具，並利用拖曳的方式也可以在舞台中繪製線段。繪製圖形之前，可以利用屬性面板修改相關的設定值，再於舞台中繪製圖形。如果在繪製時要將線段限制為垂直或水平方向，可以按住Shift鍵不放再拖曳。在點選鉛筆工具後，我們可以在工具箱的選項中選擇相關的繪圖模式： 如果繪製好線段後，我們還是可以重新再改變線段平滑的程度，點選選取工具並點選線段後，在工具列的選項部份，我們可以按直線化工具或平滑化工具來改變線段。同樣的功能也可再行功能表中的修改直線化或是修改平

19、滑化來達成。 使用繪圖工具鉛筆工具使用繪圖工具橢圓形工具 點選工具箱中的橢圓形工具，並在舞台中拖曳，可以用來繪製橢圓形或是圓形。繪製圖形前，可以利用屬性面板修改相關的設定值，再於舞台中繪製圖形。如果要繪製正圓形的圖形，可以按下Shift鍵不放，再行繪製。我們可以點選填色的內容，並直接拖曳出填色的部份。當然也可以在點選線條後，再將線條拖曳出來。 如果不點選線條，並將滑鼠置放在圖形的線條上，我們就可以利用拖曳的方式來改變圖形了 我們可以利用線條來分離填色，使用線條繪製在填色上，就可以使用選取工具將某一部份的填色拖曳出來。 我們也可以利用不同的填色來切割另一個填色 實作演練：利用變形工具繪製花 使用

20、繪圖工具橢圓形工具 使用繪圖工具矩形工具 點選工具箱中的矩形工具，並在舞台中拖曳，可以用來繪製長方形或是正方形。繪製圖形前，可以利用屬性面板修改相關的設定值。如果要繪製正四方形的圖形，可以按下Shift鍵，再行繪製。 在繪製矩形前，可以在工具箱中的選項區域找到圓角矩形的半徑的工具鈕，我們可以按下這個工具鈕，並在矩形設定的視窗中調整矩形的角度。 使用繪圖工具矩形工具 使用繪圖工具筆刷工具 我們可以利用筆刷工具來繪製出各種筆刷的線段，繪製的效果相當類似使用真正的繪筆繪畫。 在按下筆刷工具鈕後，我們可以在選項中選擇筆刷的大小和樣式，並於舞台中繪製圖形。在使用筆刷工具繪圖時，如果同時按下Shift鍵不

21、放，就可以將筆刷筆畫的繪圖效果限制為水平或是垂直的方向。使用筆刷工具所繪製的圖形也具有線條及填滿兩種物件，我們也可以利用選取工具拖曳圖形外圍的線條，將筆刷工具繪製的圖形做變形的處理。 實作演練：ch03-1.fla觀察使用筆刷的不同選項的繪圖效果 使用繪圖工具筆刷工具 使用繪圖工具墨水瓶工具 我們可以使用墨水瓶工具來變更線條的顏色、寬度和樣式。 我們可以在工具箱中按下墨水瓶工具，並在屬性面板中設定線條的屬性，再點選舞台上的物件的外框或是線條就可以套用新的線條樣式了。 使用繪圖工具墨水瓶工具 使用繪圖工具油漆桶工具 我們可以利用油漆桶工具將顏色填滿於一個封閉的區域之中，或是更改已繪製區域的顏色。

22、 在點選了油漆桶工具後，我們可以在選項中點選鎖定填色的選項，可以讓填色散佈在選取的繪圖物件上，在我們使用筆刷工具時，也可以使用相同的設定。 使用調色盤面板設定漸層色 在使用油漆桶工具時，我們可以使用調色盤面板來製作自已所需要的漸層色。先執行視窗混色器，顯示出所需要的面板，並選擇所需要的漸層種類。 使用繪圖工具油漆桶工具 填色變形工具滴管工具 使用滴管工具可以方便我們從物件中選取填色或是線條的顏色，並且可以立即刻將屬性套用到另一個物件上。 當我們點選滴管工具之後，就可以立刻點選繪圖物件，如果我們點選的是線條，工具會自動變成墨水瓶工具 而如果我們按的是填色區域，工具也會自動變成油漆桶工具，我們可以

23、直接將顏色套用在另一個繪圖物件上。 填色變形工具滴管工具 填色變形工具橡皮擦工具 橡皮擦工具可以用來擦除線條或是填色。點選橡皮擦工具後，利用拖曳的方式就可以擦除舞台上的繪圖物件。如果一次要擦除舞台上所有的物件，可以在橡皮擦工具上快速的按兩下左鍵。 我們可以自行挑選橡皮擦工具的形狀或是大小，橡皮擦工具可能是圓形或方形，各有有五種大小可以選擇。 我們也可以自行設定橡皮擦工具的擦除效果，可設為只擦除線條、填色，或只擦除單一填色區域。 實作演練：ch03-2.fla觀察使用橡皮擦工具的不同擦拭效果 填色變形工具橡皮擦工具 圖形的群組與解散群組 物件的群組 動畫元件通常是由多個物件所組合而成的，由於繪圖

24、物件的線條和填色是區分成不同的物件，為了方便編輯，我們通常將物件群組化。 要將物件群組時，我們可以選取需要群組的物件，再執行功能表中的修改群組或是按Ctrl+G。物件群組後，在點選之後，四週會出現淡藍色的外框線。 實作演練：ch03-3.fla將物件群組、取消群組、打散的練習 圖形的群組與解散群組 物件的群組 圖形的群組與解散群組編輯群組的物件 物件群組後，我們可以對這物件進行編輯，例如移動位置、或是改變顏色，但這些變化會對群組中的每一個物件做相同的變化。如果要單獨改變群組中的個別物件，那就要進入群組物件的編輯模式了。 在已群組的物件上快按兩下就可以進入群組的編輯模式 編輯完成後，如果要離開群

25、組的編輯模式，可以在空白處再快按兩下，就可以回到正常的編輯模式。 圖形的群組與解散群組編輯群組的物件 圖形的群組與解散群組解散群組 如果要取消物件的群組功能，可以在點選物件後，再執行功能表中的修改解散群組或是按Ctrl+Shift+G。 打散 打散功能也可以將群組化的物件解散群組，或是轉變成繪圖物件。要將群組化的物件打散，可以在點選物件後，再執行功能表中的修改打散或是按Ctrl+B。 圖形的群組與解散群組解散群組 Flash的動畫類型 基本上，Flash的動畫類型可區分為兩大類；分別是漸變動畫(Tweening Animation)與逐格動畫(Frame-by-Frame Animation)

26、。 漸變動畫的製作是屬於較為簡單的一種，主要是利用動畫開始時的起點和動畫結束時的終點兩個關鍵影格中元件的變化來產生動畫效果。 逐格動畫的製作必須手動的修改每一個關鍵影格處的元件圖形，再利用逐格播放的方式來產生動畫的效果 Flash的動畫類型 基本上，Flash的動畫類型可區分為兩逐格動畫的製作 實作演練：範例資料檔chap04ch04-1.fla製作一個動畫，讓球元件下落，並彈起 參考的影格設定值影格影格屬性高的值Y的值15關鍵影格5030016關鍵影格4031017關鍵影格3032018關鍵影格4031019關鍵影格50300逐格動畫的製作 實作演練：範例資料檔chap04ch0形狀漸變動畫

27、1/4 漸變動畫依照使用物件的不同可以再區分為移動(Motion)漸變和形狀(Shape)漸變。 形狀漸變和移動漸變的動畫製作原理是一樣的，它們都是利用前後兩個關鍵影的圖形改變來產生動畫的效果。 但不同的是，形狀漸變類型的動畫必須將前後兩個關鍵影格處的元件或群組化的物件加上打散(Break Apart)的動作，使影格中的物件變成繪圖物件。練習：製作一個形狀漸變動畫，讓正方形變成圓形 形狀漸變動畫1/4 漸變動畫依照使用物件的不同可以再區分形狀漸變動畫2/4製作形狀補間動畫時，我們要注意到的是，區段動畫的前後兩個關鍵影格的圖形都必須是打散之後的繪圖物件，否則無法正確的完成動畫，一個不正確的形狀補間動畫的時間軸會如下圖。實作