2.2　傳統(tǒng)補間動畫

傳統(tǒng)補間動畫是Flash中最常用的制作動畫的方法，可以利用傳統(tǒng)補間對屬性為元件的圖像添加位移、縮放、旋轉(zhuǎn)、漸隱漸顯、效果變化等動畫效果，其基本方法是先制作一個關(guān)鍵幀，再在時間軸后面的某幀上插入關(guān)鍵幀，調(diào)整新關(guān)鍵幀的參數(shù)值，然后在兩個關(guān)鍵幀之間創(chuàng)建補間動畫，軟件會自動計算兩幀之間的變化效果。

請看一個非常簡單的案例如圖2.56所示，第1個關(guān)鍵幀就是左上角的藍色方塊元件，新插入的關(guān)鍵幀在第5幀上，藍色方塊元件在這一幀被移動到右下角，并進行了放大。中間3個淺藍色方塊顯示的就是軟件自動計算補間在這3幀上的結(jié)果。請仔細觀察時間軸，如圖2.57所示，其中第1幀與第5幀顯示的黑色圓點代表關(guān)鍵幀，中間部分則是從左往右的箭頭，且所有幀的顏色都顯示淺紫色，表示創(chuàng)建的傳統(tǒng)補間已經(jīng)生效。

元件屬性有很多設(shè)置，如色彩效果的樣式以及各種濾鏡，都可以用傳統(tǒng)補間來制作其參數(shù)變化的動態(tài)效果。只要處理得當(dāng)，用簡單的傳統(tǒng)補間動畫，就可以完成很多不錯的動畫效果。要想做出好的效果，就要對元件屬性有一定的理解，并在實踐過程中能靈活利用各種屬性的參數(shù)來制作補間動畫。

2.2.1　實例Ⅰ——制作“空調(diào)廣告”動畫

根據(jù)前面提到的補間動畫制作方法，現(xiàn)在嘗試制作一個“空調(diào)”的簡單廣告動畫，畫面效果如圖2.58所示，最終的動畫效果可參見光盤中的文件“效果\ch02\2.2.1空調(diào)廣告.swf”。

Step1　單擊“文件”|“新建”命令，或按【Ctrl+N】組合鍵，在彈出的“新建文檔”對話框的“常規(guī)”選項卡中選擇“ActionScript 3.0”選項，舞臺寬度和高度為720像素×480像素，幀頻為24fps，背景顏色為黑色（#000000），如圖2.59所示。

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

Step3　重命名“圖層1”為“背景”，用“矩形工具”在該圖層上拖動鼠標且覆蓋整個舞臺，如圖2.61所示，單擊工具箱中的“漸變變形工具”或按【F】鍵，使用操作手柄將徑向漸變的正圓擠壓成橢圓，如圖2.62所示。選中矩形，按【F8】鍵將其轉(zhuǎn)換為名稱為“背景”，類型為“圖形”的元件。在時間軸上選中第180幀，按【F5】鍵或右擊，在彈出的快捷菜單中選擇“插入幀”命令，設(shè)置該動畫的時長為180幀。編輯完成后，單擊“背景”圖層上的鎖形圖標。

Step4　新建圖層并重命名為“背景圖案”，單擊“文件”|“導(dǎo)入”|“導(dǎo)入到庫”命令，將“素材\ch02\2.2.1空調(diào)廣告”文件夾里的所有JPG、PNG格式的素材導(dǎo)入到庫中，按【Ctrl+L】組合鍵打開“庫”面板，把庫中的素材“背景圖案”拖到舞臺中，按【F8】鍵將其轉(zhuǎn)換成“名稱”為“背景圖案”，“類型”為“影片剪輯”的元件，在“屬性”面板的“顯示”區(qū)域設(shè)置“混合模式”為“疊加”，如圖2.63所示。按【Ctrl+K】組合鍵打開“對齊”面板，勾選“與舞臺對齊”復(fù)選框，單擊“匹配寬和高”按鈕，如圖2.64所示，把圖片設(shè)置成與舞臺大小一致。然后單擊“對齊”區(qū)域的“水平中齊”按鈕與“垂直中齊”按鈕，使圖片與舞臺對齊。為了方便后面圖層的編輯操作，在此步驟之后對“背景圖案”圖層也進行鎖定。

Step5　新建圖層并重命名為“空調(diào)”。把庫里的素材“空調(diào).png”拖到舞臺中，按【F8】鍵將其轉(zhuǎn)換成“名稱”為“空調(diào)”，“類型”為“影片剪輯”的元件，如圖2.65所示。

Step6　制作空調(diào)移動動畫。在“空調(diào)”圖層第1幀上將“空調(diào)”元件移動到舞臺外左側(cè)（位置為X：-250，Y：250），如圖2.66所示，在第15幀插入關(guān)鍵幀，把“空調(diào)”元件移動到舞臺中間（位置為X：360，Y：250），如圖2.67所示。右擊第1～15幀之間的位置，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令。空調(diào)由左邊進入舞臺的動態(tài)設(shè)置完成。

Step7　為了凸顯空調(diào)，給空調(diào)添加發(fā)光動畫效果。在“空調(diào)”圖層的第20幀插入關(guān)鍵幀，在“空調(diào)”元件的“屬性”面板給空調(diào)添加發(fā)光濾鏡，設(shè)置參數(shù)為模糊X和模糊Y均為“0像素”，品質(zhì)設(shè)置為“高”，顏色的十六進制值為“#6699FF”，其余參數(shù)為默認值，如圖2.68所示。在第25幀插入關(guān)鍵幀，設(shè)置發(fā)光濾鏡模糊X和模糊Y均為“125像素”，強度為“230％”，如圖2.69所示。復(fù)制第20幀到第30幀與第45幀的位置上，復(fù)制第25幀到第35幀上。選中第45幀按【Ctrl+T】組合鍵打開“變形”面板，把“空調(diào)”元件的寬度與高度的縮放值都設(shè)置為“70％”，如圖2.70所示。分別選中第20、25、30、35幀并右擊，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令。

Step8　制作文字從無到有逐漸顯現(xiàn)的效果。在“空調(diào)”圖層上方新建“文字1”圖層，選中第55幀并插入空白關(guān)鍵幀，把素材“軍工科技.png”拖到舞臺中，按【F8】鍵將其轉(zhuǎn)換成“名稱”為“文字1”，“類型”為“圖形”的元件，具體位置為X：250，Y：100，如圖2.71所示。在第70幀插入關(guān)鍵幀，然后回到第55幀，在“屬性”面板中的“色彩效果”區(qū)域設(shè)置樣式為“Alpha”，Alpha的值設(shè)置為“0％”。右擊第70幀，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令。文字逐漸顯現(xiàn)效果完成。

Step9　制作文字運動緩沖效果。在“文字1”圖層上方新建“文字2”圖層，在“文字2”層第85幀的位置上插入空白關(guān)鍵幀，把庫里的素材“強力制冷，快人一步.png”拖入舞臺，按【F8】鍵將其轉(zhuǎn)換成“名稱”為“文字2”，“類型”為“圖形”的元件，把元件拉到舞臺外右側(cè)（位置為X：750，Y：340），如圖2.72所示。按【Q】鍵或者單擊工具箱中的“任意變形工具”，把其中心點設(shè)置在元件下方中間的位置上，如圖2.73所示，然后按【Ctrl+T】組合鍵打開“變形”面板，設(shè)置其水平傾斜角度為“40°”，如圖2.74所示。在第95幀插入關(guān)鍵幀，在“屬性”面板中修改其位置屬性為X：210，在“變形”面板中設(shè)置水平傾斜角度為“-35°”，如圖2.75所示。在第103幀插入關(guān)鍵幀，在“變形”面板中設(shè)置水平傾斜角度為“0°”，如圖2.76所示。在時間軸上分別選中第85幀和第95幀并右擊，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令。文字運動緩沖效果完成。

Step10　制作最后LOGO定版效果。在“文字2”圖層上方新建“LOGO”圖層，在第125幀插入空白關(guān)鍵幀，把庫里的素材“標志.png”拖入舞臺，然后按【F8】鍵將其轉(zhuǎn)換為“名稱”為“LOGO”，“類型”為“影片剪輯”的元件。在“屬性”面板的“色彩效果”區(qū)域設(shè)置樣式為“亮度”，把亮度值設(shè)置為“100％”，如圖2.77所示。給“LOGO”元件添加“模糊”濾鏡，設(shè)置其模糊X和模糊Y的值均為“255像素”，品質(zhì)為“高”，如圖2.78所示。在第137幀插入關(guān)鍵幀，設(shè)置其模糊X和模糊Y的值均為“0像素”，如圖2.79所示。在第125幀到第137幀之間創(chuàng)建傳統(tǒng)補間動畫。

Step11　測試影片，發(fā)現(xiàn)背景圖案影響了文字和定板的顯示效果，因此，需要繼續(xù)給背景圖案制作簡單的動畫效果。在時間軸上選中“背景圖案”圖層，將該層解鎖。然后在第1幀的舞臺中選中“背景圖案”元件，在“屬性”面板的“色彩效果”區(qū)域設(shè)置樣式為“Alpha”，把Alpha的值設(shè)置為“0％”，如圖2.80所示。在第70幀插入關(guān)鍵幀，設(shè)置Alpha的值為“100％”，在這一幀上給“背景圖案”元件添加“模糊”濾鏡，設(shè)置其模糊X和模糊Y的值均為“0像素”，品質(zhì)設(shè)置為“高”，如圖2.81所示。在第130幀、第140幀插入關(guān)鍵幀，在第140幀將“模糊”濾鏡的模糊X的值設(shè)置為“255像素”，模糊Y設(shè)置為“0像素”，如圖2.82所示。選中第70幀與第130幀并右擊，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令。背景圖案的動畫效果完成。

Step12　檢查并修改各個圖層的顯示與持續(xù)幀數(shù)。由于開始制作本實例時，就已經(jīng)將“背景”圖層的持續(xù)時長設(shè)定為180幀，而后創(chuàng)建的圖層都會直接默認持續(xù)180幀，假設(shè)在操作過程中不小心刪除了幀或添加了多余的幀，就應(yīng)該選擇右鍵快捷菜單中的“插入幀”命令或“刪除幀”命令來增加或減少幀。其中“空調(diào)”圖層與兩個文字圖層在“LOGO”圖層出現(xiàn)后就不應(yīng)再顯示，同時選中這三個圖層的第130幀并右擊，在彈出的快捷菜單中選擇“插入空白關(guān)鍵幀”命令。完成后圖層與時間軸如圖2.83所示。全部動畫設(shè)置完成，測試無誤后保存即可。

2.2.2　實例Ⅱ——制作“企業(yè)形象廣告”動畫

為了加深認識，繼續(xù)完成一個“企業(yè)形象廣告”動畫，畫面效果如圖2.84所示，最終的動畫效果可參見光盤中的文件“效果\ch02\2.2.2企業(yè)形象廣告.swf”。

Step1　單擊“文件”|“新建”命令，或按【Ctrl+N】組合鍵，在彈出的“新建文檔”對話框的“常規(guī)”選項卡中選擇“ActionScript 3.0”選項，保留默認設(shè)置，單擊“確定”按鈕，如圖2.85所示。

Step2　單擊工具箱中的“矩形工具”，在“屬性”面板中將“筆觸顏色”設(shè)置為無色，設(shè)置“填充顏色”十六進制值為“#FFCC66”。將“圖層1”重命名為“背景”，在該圖層上拖動鼠標將繪制的矩形覆蓋整個舞臺，如圖2.86所示，在第160幀插入幀。編輯完成后單擊“背景”圖層上的鎖形圖標將該層鎖定。

Step3　單擊“文件”|“導(dǎo)入”|“導(dǎo)入到庫”命令，將“素材\ch02\2.2.2企業(yè)形象廣告”中的所有PNG格式素材導(dǎo)入到庫中。按【Ctrl+F8】組合鍵或單擊“插入”|“新建元件”命令，創(chuàng)建一個“名稱”為“半圓”，“類型”為“圖形”的元件，如圖2.87所示。把“半圓.png”拖入元件，單擊舞臺左上方的“場景1”按鈕回到場景。

Step4　制作半圓落下的效果。在“背景”圖層上新建圖層并重命名為“半圓”，在該圖層的第1幀上把“半圓”元件拖入舞臺。在這一幀上選中“半圓”元件，用“任意變形工具”調(diào)整元件中心點的位置到半圓的底端，如圖2.88所示。按【Ctrl+T】組合鍵打開“變形”面板，將縮放寬度與縮放高度都設(shè)置為“50％”，設(shè)置位置為X：280，Y：-140，如圖2.89所示。在第10幀插入關(guān)鍵幀，調(diào)整“半圓”元件的位置為X：280，Y：250，如圖2.90所示。

Step5　制作半圓變形效果。在第13幀插入關(guān)鍵幀，利用“變形”面板的縮放高度對“半圓”元件進行壓縮，縮放高度值為“30％”，如圖2.91所示，在第16幀插入關(guān)鍵幀，將“半圓”元件的縮放高度設(shè)置為“65％”，垂直方向抬高，位置為Y：225，如圖2.92所示。選中并復(fù)制第13幀，粘貼到第18幀，將第10幀復(fù)制到第20幀。選中第1幀，按住【Shift】鍵單擊第19幀并右擊，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補間”命令，半圓下落并變形的動畫完成。

Step6　制作“大”字漸顯的效果。新建一個“名稱”為“大”，“類型”為“圖形”的元件，將庫里的素材“大.png”拖入元件圖層1的第1幀中。單擊舞臺左上方“場景1”按鈕回到場景，新建圖層并重命名為“大字”，在第25幀插入空白關(guān)鍵幀，將做好的“大”元件拖入這一幀的舞臺中，按【Ctrl+K】組合鍵打開“變形”面板，設(shè)置縮放寬度和縮放高度的值均為“55％”，設(shè)置位置為X：225，Y：140，與半圓進行對位，如圖2.93所示。在第40幀插入關(guān)鍵幀。回到第25幀，將“大”元件色彩效果的樣式屬性設(shè)置為“Alpha”，把Alpha（即不透明度）的值設(shè)置為“0％”，如圖2.94所示。在第25～40幀之間創(chuàng)建傳統(tǒng)補間，大字逐漸顯現(xiàn)效果完成。

Step7　制作方塊運動效果。在“大字”圖層的下方新建圖層并重命名為“左”，在該層第60幀插入空白關(guān)鍵幀，單擊工具箱中的“矩形工具”，在“屬性”面板中將“筆觸顏色”設(shè)置為無色，設(shè)置“填充顏色”十六進制值為“#000000”，在舞臺中繪制一個25像素×25像素的矩形，按【F8】鍵將其轉(zhuǎn)換成“名稱”為“方格”，“類型”為“圖形”的元件。調(diào)整其位置為X：188，Y：176，如圖2.95所示。復(fù)制第60幀到第45幀，在第45幀把“方格”位置調(diào)整為X：270，Y值不變，如圖2.96所示。在第45～60幀之間創(chuàng)建傳統(tǒng)補間。在時間軸上選中圖層“左”并右擊，在彈出的快捷菜單中選擇“復(fù)制圖層”命令，將“左復(fù)制”圖層重命名為“右”，在圖層“右”第60幀的位置上，將“方格”元件的位置設(shè)置為X：348，Y值不變，如圖2.97所示。方塊運動效果完成。

Step8　制作輪子轉(zhuǎn)動元件。新建一個“名稱”為“輪子”，“類型”為“影片剪輯”的元件。將庫里的素材“大”元件拖入“輪子”元件圖層1的第1幀中。單擊工具箱中的“橢圓工具”，在“屬性”面板中將“筆觸顏色”設(shè)置為無色，設(shè)置“填充顏色”十六進制值為“#FFCC66”，在“輪子”元件中新建圖層2，將圖層2移動到底層，在該層第1幀繪制一個直徑為200像素的圓。將圓和“大”元件進行對齊，如圖2.98所示。然后在圖層2第15幀插入幀。在圖層1第15幀插入關(guān)鍵幀，在第1～15幀之間創(chuàng)建傳統(tǒng)補間，選中第1～14幀之間任何一幀，在“屬性”面板“補間”區(qū)域?qū)ⅰ靶D(zhuǎn)”設(shè)置為“順時針”，“旋轉(zhuǎn)次數(shù)”設(shè)置為“1”，如圖2.99所示。

Step9　制作輪子的運動效果。單擊舞臺左上方“場景1”按鈕回到場景，在“大字”圖層下方新建圖層并重命名為“輪子左”，在第75幀插入空白關(guān)鍵幀，把“輪子”元件拖入舞臺。按【Ctrl+T】組合鍵打開“變形”面板，設(shè)置縮放寬度和縮放高度的值均為“55％”，如圖2.100所示。然后將“輪子”元件與“大字”圖層進行對位，因為“輪子”元件和“大”元件的大小不一致，因此所在的位置也不同，需手動對位，以“大字”圖層可以完全覆蓋住“輪子左”圖層的大字圖案為準。在第90幀插入關(guān)鍵幀，利用“變形”面板設(shè)置縮放寬度和縮放高度的值均為“25％”，將輪子縮小，并把輪子移動到圖2.101所示的位置上。復(fù)制“輪子左”圖層并重命名為“輪子右”，在該層第90幀上將輪子放置到圖2.102所示的位置即可，此時所有圖層組合成車形圖標。

Step10　制作車子形圖標整體運動的效果。同時選中“大字”“輪子左”“輪子右”“左”“右”“半圓”這6個圖層（見圖2.103）的第100幀，按【F6】鍵統(tǒng)一插入關(guān)鍵幀，繼續(xù)同時選中這6個圖層的第120幀并插入關(guān)鍵幀，在第120幀的位置上框選所有元件，設(shè)置位置為X：290，Y：140，如圖2.104所示。

Step11　制作企業(yè)名字定版效果。在“大字”圖層上方新建圖層并重命名為“捷運”，在第100幀插入空白關(guān)鍵幀，同時把庫里的素材“捷運（文字）.png”拖入舞臺，按【F8】鍵將位圖素材轉(zhuǎn)換成“名稱”為“捷運”，“類型”為“影片剪輯”的元件。設(shè)置其位置參數(shù)為X：-450，Y：100，如圖2.105所示。給“捷運”元件添加“模糊”濾鏡，設(shè)置其模糊X值為“255像素”，模糊Y值為“0像素”，品質(zhì)設(shè)置為“高”，如圖2.106所示，在第120幀插入關(guān)鍵幀，設(shè)置位置參數(shù)為X：55，Y：150，寬為“240”，高為“141”，并把“模糊”濾鏡模糊X和模糊Y的值均設(shè)置為“0像素”，如圖2.107所示。本實例制作完成，可按【Ctrl+Enter】組合鍵進行測試，確定效果無誤后對文件進行保存。