2.3　形狀補(bǔ)間動畫

形狀補(bǔ)間動畫，一般只對屬性為“形狀”的圖形生效，通過改變屬性為“形狀”的圖形的大小與輪廓造型及顏色，來創(chuàng)建形狀補(bǔ)間動畫效果。形狀補(bǔ)間動畫的一般創(chuàng)建方法是先制作好一個關(guān)鍵幀，此關(guān)鍵幀中只能有“形狀”屬性的圖形，然后在此關(guān)鍵幀后的時間軸上再創(chuàng)建一個只有“形狀”屬性圖形的關(guān)鍵幀，然后右擊兩個關(guān)鍵字之間的位置，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”命令即可完成創(chuàng)建。

請觀察圖2.108所示案例，第1個關(guān)鍵幀就是左上角的紫色圓形形狀，第2個關(guān)鍵幀在第5幀，為黃色矩形形狀。而中間三個淺色形狀顯示的就是軟件自動計算的補(bǔ)間動畫在這三幀上的結(jié)果。請仔細(xì)觀察時間軸，如圖2.109所示，其中第1幀與第5幀顯示的黑色圓點代表關(guān)鍵幀，中間部分則是從左往右的箭頭，且所有幀的顏色都顯示淺綠色，表示創(chuàng)建的形狀補(bǔ)間已經(jīng)生效。

2.3.1　實例Ⅰ——制作“聲波效果”動畫

根據(jù)前面所講的補(bǔ)間形狀動畫的制作方法，現(xiàn)在嘗試?yán)醚a(bǔ)間形狀制作“聲波效果”動畫，畫面效果如圖2.110所示，最終的動畫效果可參見光盤中的文件“效果\ch02\2.3.1聲波效果動畫.swf”。

Step1　單擊“文件”|“新建”命令，或按【Ctrl+N】組合鍵，在彈出的“新建文檔”對話框的“常規(guī)”選項卡中選擇“ActionScript 3.0”選項，舞臺寬度和高度為500像素×240像素，設(shè)置幀頻為24fps，單擊“確定”按鈕，如圖2.111所示。

Step2　單擊工具箱中的“矩形工具”，在“屬性”面板中將“筆觸顏色”設(shè)置為無色，單擊“窗口”|“顏色”命令，或者單擊附加工具欄中的“顏色”按鈕，設(shè)置“顏色類型”為“線性漸變”，單擊左邊的顏色滑塊并輸入十六進(jìn)制值為“0031C9”，單擊右邊的顏色滑塊并輸入十六進(jìn)制值為“000000”，如圖2.112所示。

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

Step4　新建圖層并重命名為“音柱”，設(shè)置“填充顏色”為“#B5FFFF”，單擊工具箱中的“矩形工具”，在舞臺中繪制一個矩形，在“屬性”面板中設(shè)置其寬為“30”，高為“6”，把矩形放置在X：50，Y：120的位置上，如圖2.115所示。按8次【Ctrl+D】組合鍵對矩形進(jìn)行復(fù)制，得到8個矩形，然后把最后一個矩形移動到X：420，Y：120的位置，如圖2.116所示。選中所有矩形，按【CTRL+K】組合鍵打開“對齊”面板，單擊間隔區(qū)域的“水平平均間隔”按鈕，如圖2.117所示，再繼續(xù)單擊對齊區(qū)域的“頂對齊”按鈕，即可獲得圖2.118所示效果。

Step5　按快捷鍵【Q】或單擊工具箱中的“任意變形工具”，依次對矩形進(jìn)行選擇并編輯，將鼠標(biāo)放置于其頂邊往上拖或往下拉（不要改變其底邊的位置），把9個矩形調(diào)整成以下效果，注意每個矩形底邊位置是在同一水平線上的，而高度要有所參差，如圖2.119所示。這個步驟可按【Z】鍵或使用工具箱中的“縮放工具”框選所要編輯的矩形，將所要編輯的矩形進(jìn)行放大。如果圖像過大不好編輯，可以在舞臺右上角的“顯示比例”下拉列表框中選擇“100％”迅速恢復(fù)原始大小。

Step6　新建圖層并重命名為“音頻”，單擊“文件”|“導(dǎo)入”|“導(dǎo)入到庫”命令，在彈出的“導(dǎo)入到庫”對話框中選擇光盤中的文件“素材\ch02\聲音素材.mp3”，單擊“打開”按鈕。按【Ctrl+L】組合鍵或單擊“窗口”|“庫”命令，打開“庫”面板，把“聲音素材.mp3”直接拖入舞臺。然后拖動時間軸的指針到第120幀的位置，同時選中“背景”“音柱”“音頻”3個圖層的第120幀，按【F5】鍵插入幀，此時可見“音頻”圖層上顯示的是整條音頻波形，如圖2.120所示。為了能更加清晰地看到時間軸上的音頻波形，單擊時間軸右上角的按鈕，在其下拉菜單中選擇“預(yù)覽”選項，如圖2.121所示，則時間軸上的每一幀都放大了，音頻波形比較清晰，接下來就可根據(jù)音頻的波形來編輯音柱高度。

Step7　觀察“音頻”圖層時間軸上的波形，然后根據(jù)波形強(qiáng)弱來編輯“音柱”的高低效果。仔細(xì)觀察，發(fā)現(xiàn)該音頻在第6幀開始有所變化，因此，在“音柱”圖層的第6幀按【F6】鍵快速插入一個關(guān)鍵幀，用“任意變形工具”對每個矩形加以調(diào)整，使得矩形整體有升高的變化，所有矩形都應(yīng)有參差，中間的矩形略高，但最高不超過10像素，兩邊的矩形略矮，但不矮于第1幀的高度。繼續(xù)觀察，發(fā)現(xiàn)音頻的波形在第8幀左右有一個小高峰，于是在“音柱”圖層的第8幀插入關(guān)鍵幀，先整體抬升所有矩形，矩形最高不超過20像素，然后用同樣的方法對每個矩形的高度進(jìn)行調(diào)整，調(diào)整的原則與第6幀基本一致，中間的矩形較高，兩邊的矩形略矮，如圖2.122所示。

Step8　對音頻強(qiáng)弱觀察越細(xì)致，則“音柱”圖層的關(guān)鍵幀設(shè)置得越多，就可以得到更加富有變化并且與音頻強(qiáng)弱更加切合的音柱波形動態(tài)效果。本實例中，僅羅列出各個主要關(guān)鍵動態(tài)的設(shè)置以供參考。

所有關(guān)鍵幀中矩形高度設(shè)置的基本要求：中間略高，兩邊略矮，每個矩形都必須有一定的高度差。

第1幀：所有矩形高度不超過6像素，如圖2.123所示。將該關(guān)鍵幀復(fù)制到第15幀、第24幀、第120幀。

第6幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過10像素，如圖2.124所示。將該關(guān)鍵幀復(fù)制到第12幀、第22幀、第30幀、第117幀。

第8幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過20像素，如圖2.125所示。復(fù)制該關(guān)鍵幀到第39幀、第45幀、第100幀、第106幀、第114幀。

第19幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過40像素，如圖2.126所示。復(fù)制該關(guān)鍵幀到第112幀。

第26幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過50像素，如圖2.127所示。復(fù)制該關(guān)鍵幀到第66幀。

第34幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過60像素，如圖2.128所示。復(fù)制該關(guān)鍵幀到第42幀、第55幀。

第49幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過110像素，如圖2.129所示。復(fù)制該關(guān)鍵幀到第62幀、第75幀、第85幀。

第59幀：插入關(guān)鍵幀，調(diào)整各個矩形，所有矩形高度不超過80像素，如圖2.130所示。復(fù)制該關(guān)鍵幀到第70幀、第80幀、第90幀。

Step9　在時間軸“音柱”圖層上，選中第1幀，然后按住【Shift】鍵進(jìn)行加選，選中除第120幀以外的所有關(guān)鍵幀并右擊，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”命令，如圖2.131所示。按【Ctrl+Enter】組合鍵進(jìn)行測試，即可看到基本的音波效果。

Step10　選擇“音柱”圖層并右擊，在彈出的快捷菜單中選擇“復(fù)制圖層”命令，則得到一個新的圖層“音柱復(fù)制”，將其重命名為“音柱倒影”。單擊時間軸最下方“編輯多個幀”按鈕，將“編輯多個幀”的范圍設(shè)置成第1幀至第120幀，鎖定“音柱倒影”圖層以外的所有圖層，用“選擇工具”對整個舞臺范圍進(jìn)行框選，即可同時選中并編輯“音柱倒影”圖層的所有幀，此時時間軸如圖2.132所示。按快捷鍵【Q】或者單擊工具箱中的“任意變形工具”，將鼠標(biāo)放在任意變形框頂邊從上往下拖動，可把所有幀上的所有矩形同時向下翻轉(zhuǎn)，如圖2.133所示。

Step11　保持選中所有幀上的所有矩形，單擊“屬性”面板中的“填充顏色”，保持原來的顏色值，修改Alpha的值為“30％”，如圖2.134所示。然后單擊時間軸最下方的“編輯多個幀”按鈕關(guān)閉此前狀態(tài)，可見舞臺中音波有了倒影效果，如圖2.135所示。按【Ctrl+Enter】組合鍵進(jìn)行動畫測試，可見完整的動畫效果。最后單擊“文件”|“保存”命令即可。

2.3.2　實例Ⅱ——制作“炫光效果”動畫

結(jié)合前面所學(xué)的傳統(tǒng)補(bǔ)間動畫制作的方法，再加以利用形狀補(bǔ)間動畫的方式制作“炫光效果”動畫，畫面效果如圖2.136所示，最終的動畫效果可參見光盤中的文件“效果\ch02\2.3.2炫光效果動畫.swf”。

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

Step2　將圖層1重命名為“星光”，單擊工具箱中的“多角星形工具”，在“屬性”面板的工具設(shè)置區(qū)域單擊“選項”按鈕，在彈出的“工具設(shè)置”對話框中設(shè)置樣式為“星形”，邊數(shù)為“12”，星形頂點大小為“0.05”，如圖2.138所示。在屬性面板中將“筆觸顏色”設(shè)置為無色，單擊“窗口”|“顏色”命令，或者單擊附加工具欄上的“顏色”按鈕，設(shè)置“顏色類型”為“徑向漸變”，設(shè)置5個取色點，從左到右每個取色點的顏色的十六進(jìn)制值依次為“33FF00”“84F368”“F8EEA8”“C1E269”“66CC00”，其中，第2個取色點設(shè)置A為“20％”，第4個取色點設(shè)置A為“0％”（A即Alpha值，表示不透明度），如圖2.139所示。

Step3　在舞臺中繪制一個星形，在“屬性”面板中設(shè)置星形的寬、高均為“450”。選中星形，按【Ctrl+K】組合鍵打開“對齊”面板，勾選“與舞臺對齊”復(fù)選框，并單擊“對齊”區(qū)域的“水平中齊”按鈕與“垂直中齊”按鈕，生成的效果如圖2.140所示。

Step4　在舞臺里選中星形按【F8】鍵，或單擊“修改”|“轉(zhuǎn)換為元件”命令，將星形轉(zhuǎn)換為“名稱”為“星光”，“類型”為“影片剪輯”的元件，如圖2.141所示。雙擊“星光”元件進(jìn)入元件編輯模式，在第30幀插入關(guān)鍵幀，即已經(jīng)把第1幀的效果復(fù)制在第30幀。在第15幀插入關(guān)鍵幀，選中第15幀的星光，單擊“窗口”|“顏色”命令，或者單擊附加工具欄中的“顏色”按鈕，將5個顏色點的十六進(jìn)制值從左往右依次設(shè)置為“FF9900”“F3BC68”“FF7A12”“FFA041”“FF9900”，如圖2.142所示。修改完成后，選中第1幀與第15幀（加選要按【Shift】鍵）并右擊，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”命令，星光變換顏色的動畫已經(jīng)完成，單擊時間軸下方的“播放”按鈕進(jìn)行觀察，可見星光顏色從青綠色逐漸變?yōu)殚偌t色再逐漸復(fù)原。“星光”元件的補(bǔ)間動畫完成后時間軸的顯示如圖2.143所示。

Step5　雙擊“星光”空白處或單擊舞臺左上角的“場景1”按鈕回到場景編輯模式，在“星光”圖層上新建圖層并重命名為“環(huán)狀光”，單擊工具箱中的“橢圓工具”，設(shè)置“填充顏色”為無色，設(shè)置“筆觸顏色”的十六進(jìn)制值為“#FF6666”，筆觸高度為“6”，如圖2.144所示。按住【Shift】鍵在“環(huán)狀光”圖層第1幀的舞臺中心繪制一個圓，設(shè)置其寬和高均為“10”，用“對齊”面板將該圓與舞臺中心對齊，得到圖2.145所示效果。

Step6　選中繪制出來的圓，然后按【F8】鍵把圓轉(zhuǎn)換為“名稱”為“環(huán)狀光”，“類型”為“影片剪輯”的元件，將該元件與舞臺中心對齊。雙擊進(jìn)入“環(huán)狀光”元件的編輯模式，在第30幀的位置按【F6】鍵插入關(guān)鍵幀，將圓的筆觸顏色十六進(jìn)制值設(shè)置為“#FFF200”，筆觸大小設(shè)置為“30”，寬和高均設(shè)置為“200”，效果如圖2.146所示，注意圓環(huán)中心要與星光的中心保持一致。在第60幀按【F6】鍵插入關(guān)鍵幀，將圓的筆觸顏色十六進(jìn)制值設(shè)置為“#00CC00”，Alpha的值設(shè)置為“0％”，筆觸大小設(shè)置為“30”，寬和高均設(shè)置為“500”，如圖2.147所示。

Step7　在“環(huán)狀光”元件的編輯模式下，選中第1幀和第30幀并右擊，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”命令，此時環(huán)狀光的變化也已經(jīng)完成，如圖2.148所示。單擊時間軸下方的“播放”按鈕進(jìn)行觀察，可見圓環(huán)逐漸從小變大并且產(chǎn)生色彩變化的效果。

Step8　雙擊“環(huán)狀光”空白處或單擊舞臺左上角的“場景1”按鈕回到場景編輯模式，在“環(huán)狀光”圖層的第1幀選中“環(huán)狀光”元件，在“屬性”面板顯示區(qū)域?qū)⑵浠旌夏Ｊ皆O(shè)置為“增加”。然后單擊屬性面板“濾鏡”區(qū)域的“添加濾鏡”按鈕，在彈出菜單中選擇“模糊”命令，設(shè)置模糊X、Y的值均為“15像素”，品質(zhì)設(shè)置為“高”。繼續(xù)單擊“添加濾鏡”按鈕，在彈出菜單中選擇“發(fā)光”命令，設(shè)置模糊X、Y的值均為“5像素”，強(qiáng)度為“300％”，品質(zhì)為“高”，設(shè)置其顏色的十六進(jìn)制值為“#66CCFF”，如圖2.149所示。然后在“環(huán)狀光”圖層第60幀插入幀，讓整個動畫持續(xù)60幀的時間，設(shè)置完成后，“環(huán)狀光”圖層的時間軸如圖2.150所示。

Step9　選中“星光”圖層第1幀上的“星光”元件，給“星光”添加發(fā)光效果。單擊“屬性”面板“濾鏡”區(qū)域的“添加濾鏡”按鈕，在彈出菜單中選擇“發(fā)光”命令，設(shè)置模糊X、Y的值均為“20像素”，強(qiáng)度為“350％”，品質(zhì)為“高”。設(shè)置其顏色的十六進(jìn)制值為“#FFFF33”，如圖2.151所示。

Step10　給星光添加旋轉(zhuǎn)效果。在“星光”圖層第60幀插入關(guān)鍵幀，右擊第1～59幀之間的任意位置，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補(bǔ)間”命令，完成創(chuàng)建后的時間軸如圖2.152所示。然后在“屬性”面板補(bǔ)間區(qū)域設(shè)置“旋轉(zhuǎn)”為“順時針”，旋轉(zhuǎn)次數(shù)設(shè)置為“1”，如圖2.153所示。整個實例設(shè)置完成，可按【Ctrl+Enter】組合鍵進(jìn)行動畫測試，效果滿意進(jìn)行保存即可。

在具體的案例中不應(yīng)只會用一種基礎(chǔ)動畫的形式進(jìn)行動畫設(shè)計，而應(yīng)該將所學(xué)到的內(nèi)容加以綜合運用，多方嘗試；在制作案例的過程中，更加要學(xué)會利用圖層、元件層級的配合，才能創(chuàng)造與制作出更多美觀的動態(tài)效果。