2.1　逐幀動畫

逐幀動畫是利用一系列逐張變化的圖像組成的動態效果，是最傳統的動畫形式，其方法簡單來說就是一幀一幀地把每張變化的圖像都繪制出來，可以說逐幀動畫中需要制作的每一幀都是關鍵幀。用這種方式，可以完成絕大部分的動畫效果，缺點就是需要逐張制作，比較耗時費力，工作量十分大，而優點就是可以靈活地把握每個動態。圖2.1所示的就是用逐張繪制的方法制作的由花朵造型逐漸變成人形的實例，動畫效果可參見光盤中的文件“效果\ch02\花形變人形.swf”。

逐幀動畫的方式并不難掌握，但在實際應用中，要根據一般的運動規律，把所要繪制的動畫進行分析，安排每一幀圖像的造型、色彩與位置的變化，并把握所要繪制動畫的幀數以及幀頻。

2.1.1　實例Ⅰ——制作“溢彩流星”動畫

根據前面所說的逐幀動畫的制作方法，現在嘗試利用逐幀方式制作“溢彩流星”動畫，畫面效果如圖2.2所示，最終的動畫效果可參見光盤中的文件“效果\ch02\2.1.1溢彩流星.swf”。

Step1　單擊“文件”|“新建”命令，或按【Ctrl+N】組合鍵，在彈出的“新建文檔”對話框的“常規”選項卡中選擇“ActionScript 3.0”選項，舞臺寬度和高度為默認值即可，設置幀頻為12fps，單擊“確定”按鈕，如圖2.3所示。

Step2　單擊工具箱中的“矩形工具”，在“屬性”面板中將“筆觸顏色”設置為無色，單擊“窗口”|“顏色”命令，或者單擊附加工具欄中的“顏色”按鈕，在“顏色類型”下拉列表框中選擇“線性漸變”選項，單擊左邊的顏色滑塊并輸入十六進制值為“030B23”，單擊右邊的顏色滑塊并輸入十六進制值為“053EBF”，如圖2.4所示。

Step3　重命名“圖層1”為“背景”，在該圖層上拖動鼠標將矩形覆蓋整個舞臺，如圖2.5所示，單擊工具箱中的“漸變變形工具”或按【F】鍵，將矩形順時針旋轉90°，如圖2.6所示。編輯完成后，單擊“背景”圖層上的鎖形圖標將該層鎖定。

Step4　新建圖層并重命名為“繁星”，單擊工具箱中的“多角星形工具”，在“屬性”面板“工具設置”區域單擊“選項”按鈕，在彈出的“工具設置”對話框中將“樣式”設置為“星形”，“邊數”設置為“10”，“星形頂點大小”設置為“0.20”，如圖2.7所示。在“屬性”面板中將“筆觸顏色”設置為無色，“填充顏色”的十六進制值為“#FFFF00”。單擊“繁星”圖層的第1幀，在舞臺中反復單擊拖動，繪制出大大小小的滿天繁星，注意在“屬性”面板中觀察每顆星形的“寬”與“高”盡量不要超過15像素×15像素，如圖2.8所示。

Step5　同時選中“繁星”和“背景”圖層的第24幀（按住【Shift】鍵可加選），如圖2.9所示。按【F5】鍵可在兩個圖層的第24幀同時“插入幀”，則此時“繁星”和“背景”兩個圖層都將在動畫中持續顯示2s，如圖2.10所示。

Step6　在“繁星”圖層上新建圖層并重命名為“流星”，單擊“流星”圖層的第1幀，保持步驟4的“多角星形工具”設置，在舞臺中隨意繪制一個星形，用工具箱中的“選擇工具”選中星形，在“屬性”面板中設置其“位置”和“大小”：X的值為“530”，Y的值為“-8”，寬和高的值均為“30”，并單擊寬高前的圖標把寬高的比例進行鎖定，繪制的效果如圖2.11所示。一顆比較明亮的星星出現在舞臺的右上角處。選中星形并按【F8】鍵，把星形轉換為元件，在彈出的“轉換為元件”對話框中設置其“名稱”為“流星”，“類型”為“圖形”，如圖2.12所示，單擊“確定”按鈕退出。

Step7　右擊“流星”圖層的第2幀，在彈出的快捷菜單中選擇“插入關鍵幀”命令（或直接按【F6】鍵快速插入關鍵幀）。選中第2幀中的元件“流星”，在“屬性”面板中設置其“位置”和“大小”：X值為“490”，Y值為“20”，寬和高均為“35”，效果如圖2.13所示。

Step8　后面4個關鍵幀中“流星”的制作方法與第2幀相同。需注意的是用逐幀的方法繪制流星，要安排好每一幀上“流星”的大小和位置的變化。由于流星下落是一個加速運動，所以在制作后面的關鍵幀時流星下落的距離應該越來越大，且流星的大小也相應改變。為了給讀者提供參考，以下列出每個關鍵幀中元件“流星”的位置與大小數據。

第1幀：X：530，Y：-8，寬：30，高：30；

第2幀：X：490，Y：20，寬：35，高：35；

第3幀：X：430，Y：60，寬：40，高：40；

第4幀：X：350，Y：120，寬：45，高：45；

第5幀：X：230，Y：210，寬：50，高：50；

第6幀：X：90，Y：320，寬：55，高：55。

制作完畢后，選中“第6幀”，單擊“時間軸”下方的“繪圖紙外觀輪廓”按鈕，在時間軸上把“繪圖紙外觀輪廓”的范圍設置在第1幀到第6幀之間，如圖2.14所示，然后在舞臺中觀察其效果，如圖2.15所示。

Step9　此時按【Ctrl+Enter】組合鍵測試即可見“流星”落下的效果。下面開始為“流星”繪制拖尾及溢彩效果。在“流星”圖層上新建圖層并重命名為“拖尾”。選中第1幀，切換“多角星形工具”為“橢圓工具”（或直接使用快捷鍵【O】進行切換），如圖2.16所示。在舞臺中按住【Shift】鍵單擊并拖動鼠標任意繪制一個圓，然后按快捷鍵【V】切換為“選擇工具”，移動鼠標接近圓的邊緣，當箭頭下方出現弧形小圖標時，在圓的右邊拖出圖2.17所示的形狀。雙擊選中形狀，在“屬性”面板中將“筆觸顏色”設置為無色，單擊附加工具欄中的“顏色”按鈕，在“顏色類型”下拉列表框中選擇“線性漸變”選項，單擊左邊的顏色滑塊并輸入十六進制值為“F2FF00”，單擊右邊的顏色滑塊并輸入十六進制值同樣為“F2FF00”，但其Alpha值為“0％”，如圖2.18所示。圖2.16切換“橢圓工具”

Step10　選中先前所繪制的流星拖尾，設置其寬為“100”，高為“15”，按【F8】鍵將其轉換成元件，設置“名稱”為“拖尾”，“類型”為“影片剪輯”，如圖2.19所示。按快捷鍵【Q】切換成“任意變形工具”，單擊拖動元件的中心點，移至元件左端如圖2.20所示位置。

Step11　在“拖尾”圖層第1幀上選中元件“拖尾”，按【Ctrl+T】組合鍵打開“變形”面板，設置其旋轉角度為“-38.0°”，將其中心與“流星”圖層第1幀中的“流星”中心對準，可得到流星的拖尾效果如圖2.21所示。

Step12　選中“拖尾”元件，在“屬性”面板的色彩效果區域，設置“拖尾”的Alpha值為“75％”。在“屬性”面板濾鏡區域中單擊“添加濾鏡”按鈕，在彈出菜單中選中“漸變發光”命令，然后設置漸變發光濾鏡的值，模糊X與模糊Y均為“11像素”，強度為“200％”，品質為“高”，角度與距離的值都為“0”，如圖2.22所示。單擊濾鏡屬性里的“漸變”顏色條，設置其兩端的十六進制顏色值均為“#FFFF99”。發光的拖尾效果如圖2.23所示。

Step13　選中“拖尾”圖層的第2幀，按【F6】鍵插入關鍵幀，將該幀的“拖尾”元件與“流星”圖層第2幀的“流星”元件對準，如圖2.24所示。按【Ctrl+T】組合鍵打開“變形”面板，設置其“縮放寬度”的值為“130％”“縮放高度”的值維持“100％”不變，如圖2.25所示。

第3幀至第6幀元件縮放的設置方法與第2幀相同，以下列出第3～6幀縮放值以供參考：

第3幀：縮放寬度為“140％”，縮放高度為“110％”。

第4幀：縮放寬度為“165％”，縮放高度為“120％”。

第5幀：縮放寬度為“230％”，縮放高度為“125％”。

第6幀：縮放寬度為“290％”，縮放高度為“135％”。

設置完成后，單擊時間軸最下方的“編輯多個幀”按鈕，把“編輯多個幀”的范圍設置成第1幀至第6幀，觀察是否為圖2.26所示效果，并按【Ctrl+Enter】組合鍵進行測試，一次流星劃過的效果已經完成。

Step14　為了在場景里制作更多的流星效果，可以把制作好的流星與拖尾效果創建成元件。選中“流星”與“拖尾”兩個圖層上的所有幀并右擊，在彈出的快捷菜單中選擇“復制幀”命令。按【Ctrl+F8】組合鍵彈出“創建新元件”對話框，設置元件“名稱”為“拖尾流星”，“類型”為“影片剪輯”，如圖2.27所示。在元件編輯模式中選中“圖層1”的第1幀并右擊，在彈出的快捷菜單中選擇“粘貼幀”命令，如圖2.28所示，“流星”與“拖尾”兩個圖層的內容都被粘貼進來。同時選中“流星”與“拖尾”兩個圖層的第7幀到第24幀，按【F7】鍵則同時在這些幀中插入空白關鍵幀，如圖2.29所示。這是為了防止“拖尾流星”元件放入舞臺后在24幀內反復循環播放。

Step15　單擊舞臺編輯區域左上角的“場景1”按鈕返回場景（見圖2.30），新建圖層重命名為“粉色流星”，選中第4幀并按【F7】鍵插入空白關鍵幀，然后按【Ctrl+L】組合鍵打開“庫”面板，將“庫”里的“拖尾流星”元件拖到舞臺中，在“屬性”面板中設置其位置與大小，X值為“95”，Y值為“155”，寬值為“66”，高值為“57”。在“色彩效果”區域的“樣式”下拉列表框中選擇“高級”選項，設置綠色值為“35％”，如圖2.31所示。粉色流星在場景中的效果如圖2.32所示。

Step16　新建圖層，重命名為“藍色流星”，選中第9幀并按【F7】鍵插入空白關鍵幀，然后按【Ctrl+L】組合鍵打開“庫”面板，將“庫”里的“拖尾流星”元件拖到舞臺中，在“屬性”面板中設置其位置與大小，X值為“340”，Y值為“280”，寬值為“75”，高值為“65”。在“色彩效果”區域的“樣式”下拉列表框中選擇“高級”選項，設置紅色值為“0％”，設置xG+值為“255”，xB+值為“255”，如圖2.33所示。

注意：用同樣的方法可以在本場景中添加更多顏色的流星，每顆流星的動態最好用單獨一層來表現，不同圖層的“拖尾流星”元件的起始位置要錯開，流星的動態才不會那么呆板。

2.1.2　實例Ⅱ——制作“卡通老鼠跳舞”動畫

想要繪制老鼠跳舞的動態，就要先對動作進行分析，用逐幀的方式來表現老鼠的每一個動作。一般先確定一個動作的起始幀和結束幀的動態造型，再繪制兩幀之間的中間動態。然后再繼續繪制起始幀和中間幀，中間幀與結束幀之間的動態，進而繼續繪制更多的中間動態，一幀一幀細化，逐漸形成一個流暢的動態效果。

Step1　單擊“文件”|“新建”命令，或按【Ctrl+N】組合鍵，在彈出的“新建文檔”對話框的“常規”選項卡中選擇“ActionScript 3.0”選項，舞臺寬度和高度為默認值即可，設置幀頻為8fps，單擊“確定”按鈕，如圖2.34所示。

Step2　繪制老鼠頭部形狀。用“橢圓工具”繪制一個圓，用“選擇工具”對其加以修改，調整成老鼠的頭部形狀。然后用“橢圓工具”繪制耳朵，選擇不要的線刪除，用“選擇工具”（快捷鍵【V】）調整形狀，如圖2.35所示。

Step3　繪制老鼠身體形狀。在老鼠頭部下方用“橢圓工具”繪制一個橢圓，然后用“選擇工具”配合“部分選取工具”（快捷鍵【A】）對身體形狀進行修改。用“鉛筆工具”繪制裙子，再用“選擇工具”配合“部分選取工具”并利用【+】鍵快速對裙子曲線加點，逐步編輯修改，使裙子呈現出一定的結構，如圖2.36所示。

Step4　繪制老鼠四肢。用“線條工具”繪制出老鼠四肢，注意關節點的位置要把握好，如圖2.37所示。

Step5　深入刻畫，繪制老鼠的細節部分，完成卡通老鼠的造型繪制。用“鉛筆工具”“橢圓工具”“線條工具（快捷鍵【N】）”等繪制工具配合“選擇工具”與“部分選取工具”，在老鼠基本形狀的基礎上加細節。刪除多余的線條，調整好線條的造型，完成卡通老鼠的基本形象，步驟如圖2.38所示。注意細節的表現，可參考人物的形象來豐富老鼠的造型，如圖2.39所示。繪制完成后，可以把老鼠的位置移到舞臺外作為形象參考。

Step6　新建圖層，重命名為“基本動態”。根據設計好的老鼠造型，先在該層第1幀繪制出起始動態形狀，如圖2.40所示。然后在第9幀繪制出結束動態。本實例中可以取巧地把第1幀的老鼠動態進行水平翻轉來作為第9幀的結束動態。方法是在第9幀按【F6】鍵插入關鍵幀，整體選中老鼠，單擊“修改”｜“變形”｜“水平翻轉”命令，然后把老鼠向右拖動一定的距離，如圖2.41所示。單擊“繪圖紙外觀輪廓”按鈕，設置其范圍在第1幀至第9幀之間，就可以在舞臺中同時看到第1幀和第9幀的畫面以及它們的位置關系，如同圖2.40與圖2.41之間的距離。

一般在進行逐幀角色動畫的繪制時，應先確定其第1幀和最后一幀的基本動作。在這一步，先把形體的動態確定好，確保動態流暢，然后再一幀一幀繪制出細節，這樣做可以對動態更有把握。如果一開始就想著直接用復雜的老鼠形象來繪制動態，就有可能做許多無用功。

Step7　繪制第1幀到第9幀之間的中間幀（第5幀），這一幀的動作是老鼠起跳到空中最高的位置。保持“繪圖紙外觀輪廓”的打開狀態，確保其范圍設置在第1幀和第9幀之間（見圖2.42）。在第5幀插入關鍵幀，用上一步中提到的方法，對老鼠進行修改，繪制出以下動作，如圖2.43所示。

Step8　繪制第3幀的動態。保持“繪圖紙外觀輪廓”的打開狀態，確保其范圍設置在第1幀和第5幀之間，如圖2.44所示。在第3幀插入關鍵幀，對老鼠進行修改，繪制出圖2.45所示的動作。

Step9　繪制第7幀的動態。保持“繪圖紙外觀輪廓”的打開狀態，確保其范圍設置在第5幀至第9幀之間，如圖2.46所示。在第7幀插入關鍵幀，對老鼠進行修改，繪制出圖2.47所示的動作。

注意：老鼠的動態不是死板機械的位移，老鼠在跳躍過程中，身體各部位需要配合，形成自然協調的動態。

Step10　繼續用同樣的方法，繪制出第2幀、第4幀、第6幀、第8幀的老鼠動態，如圖2.48～圖2.52所示。

Step11　觀察老鼠目前的動態，是從左邊起跳到右邊落下。如果想制作出一直跳舞的循環動態，那么就需要繼續制作從右往左跳的動作。此時，可利用老鼠先前的動態來完成。選中第1幀并右擊，在彈出的快捷菜單中選擇“復制幀”命令，右擊第18幀，在彈出的快捷菜單中選擇“粘帖幀”命令。選中第2幀并右擊，在彈出的快捷菜單中選擇“復制幀”命令，右擊第11幀，在彈出的快捷菜單中選擇“粘帖幀”命令。在時間軸上選擇第11幀，單擊“修改”｜“變形”｜“水平翻轉”命令，然后單擊“繪圖紙外觀輪廓”按鈕，設置其范圍為第9～18幀之間，把第11幀的老鼠移動到圖2.53所示的位置上。

Step12　用同樣的方法，復制第3幀到第12幀并水平翻轉，復制第4幀到第13幀并水平翻轉，復制第5幀到第14幀并水平翻轉，復制第6幀到第15幀并水平翻轉，復制第7幀到第16幀并水平翻轉，復制第8幀到第17幀并水平翻轉。注意每一幀老鼠的位置，制作完成后，老鼠是從右往左跳，其運動軌跡是拋物線，如圖2.54所示。按【Ctrl+Enter】組合鍵測試，老鼠的動態就是一個完整的循環動作。

Step13　老鼠的基本動態繪制好后，就可以根據這些簡單的形態繪制出細節。復制“基本動態”圖層，并重命名為“完整動態”，在這層上一幀一幀地繪制老鼠的細節。繪制過程中可鎖定“基本動態”圖層，并單擊圖層名稱右邊的方形色塊，使其變成帶顏色的線框顯示模式，用于動作的參考。繪制新一幀時，可利用上一幀繪制好的造型，配合“鉛筆工具”“選擇工具”“部分選取工具”“套索工具”“任意變形工具”等對可用的部分進行復制、移動、旋轉或縮放以及修改線條造型等操作，得到所需的造型。繪制完畢后，在導出影片時可刪除“基本動態”圖層。老鼠從左往右跳的動態序列如圖2.55所示（從右往左跳只需按照基本動態的方法進行復制翻轉即可），詳情可參見光盤“效果\ch02\老鼠跳舞.swf”。