Class1動畫原理制作基本概念課件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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