《Flash 8動畫制作案例教程》課件第10章

第10章綜合實例案例10-1：星星相隨案例10-2：吊水樓瀑布案例10-3：旋轉的地球案例10-4：雙顯電子臺歷案例10-5：夜空焰火案例10-6：預載動畫案例10-7：FlashMTV——飄雪

【知識技能目標】

(1)了解每個綜合實例的創(chuàng)作意圖。

(2)掌握每個綜合實例的設計思想、設計要點、制作方法和創(chuàng)作技巧，并能通過案例拓展動畫創(chuàng)作技法。

(3)能夠有創(chuàng)意地應用各種動畫制作技術和創(chuàng)作技法開發(fā)高質量的動畫特效。

案例10-1：星星相隨

案例展示與任務

使用引導動畫，靈活運用影片剪輯制作星星跟隨效果，如圖10-1所示，實例最終效果參見隨書光盤中“第10章/案例1/星星相隨.fla”文檔。圖10-1星星相隨

設計分析

星星跟隨效果的制作方法很簡單，但構思很巧妙，所使用的動畫技法主要體現(xiàn)在兩個方面：一是影片剪輯的靈活運用，通過在多個圖層上錯位引用同一個影片剪輯，達到星與星之間跟隨的效果；二是對象中心點在補間動畫中的靈活運用。默認狀態(tài)下，旋轉中心位于圖形的中心點上，但用戶可以對中心點進行調整，以獲得需要的旋轉效果。本例中首先制作星星影片剪輯，里面有兩顆大小不同的星星，注意把星星影片剪輯的中心點定位在兩顆星星之間，然后使用引導動畫引導星星沿著軌跡線旋轉運動，這樣兩顆星星都圍繞定位的中心點旋轉，產生環(huán)繞交錯的動畫效果。

操作步驟

(1)新建文檔，設置文檔尺寸為800×600像素，背景顏色為紫色(#9933CC)，保存文檔，命名為“星星相隨.fla”。

(2)新建“star”影片剪輯元件，創(chuàng)建兩個圖層，分別命名為“大星星”和“小星星”。

(3)選擇多角星形工具，在“屬性”面板中設置“無筆觸”屬性，按圖10-2所示設置放射狀漸變填充顏色。圖10-2設置星星的填充顏色Alpha:80%

顏色值:#FFFFFF

Alpha:30%

顏色值:#FFFFFF

Alpha:0%

顏色值:#FFFFFF

(4)在工具箱的輔助選項區(qū)中單擊“對象繪制”模型按鈕，在多角星形工具“屬性”面板中單擊“選項”按鈕，彈出“工具設置”對話框，按圖10-3所示設置工具參數(shù)，在“大星星”圖層的第1幀中繪制一個六邊形，效果如圖10-4所示。圖10-3設置工具參數(shù)圖10-4繪制六邊形

(5)復制六邊形，并作適當縮小和旋轉，制作星星圖形，效果如圖10-5所示。

(6)選中星星圖形的兩個六邊形，執(zhí)行【修改】→【組合】命令或按Ctrl+G鍵，組合星星圖形。然后再復制一顆星星，把它放在“小星星”圖層的第1幀中，并作適當縮小。把兩顆星星的中心與元件注冊點對齊重合，如圖10-6所示。

(7)新建“starMC”影片剪輯元件，在元件編輯窗口中把“圖層1”命名為“星星”。選擇“星星”為當前圖層，單擊“添加運動引導層”按鈕，創(chuàng)建名為“軌跡”的引導層。

圖10-5星星圖形圖10-6star影片剪輯元件

(8)在“軌跡”圖層中繪制星星運動的軌跡線，如圖10-7所示。選擇第80幀，按F5功能鍵插入普通幀，把軌跡線延續(xù)到第80幀。

圖10-7軌跡線

(9)在“星星”圖層的第1幀中引用“star”影片剪輯元件。選擇第40幀，按F6功能鍵插入關鍵幀。在第1～40幀之間創(chuàng)建動作補間動畫，在“屬性”面板中設置“順時針”旋轉“1”次，并且勾選“對齊”復選框。

(10)開啟“貼緊”功能，選擇“星星”圖層的第1幀，使用選擇工具把“star”元件實例拖到軌跡線左邊的起始點上；然后再選擇第40幀，把“star”元件實例拖到軌跡線右邊靠近結束點三分之一處的位置，如圖10-8所示。

圖10-8引導動畫第40幀處star實例的位置

(11)按步驟(9)～(10)的方法創(chuàng)建第41～80幀之間的動作補間動畫。選擇第80幀，把star元件實例拖到軌跡線的結束點上，并在“屬性”面板中設置star實例的Alpha=0%。

(12)按Enter鍵預覽引導動畫效果，兩顆星星相互環(huán)繞旋轉運動。

(13)執(zhí)行【文件】→【導入】→【導入到庫】命令，把隨書光盤中“第10章/案例1/裝飾邊.jpg”素材導入到“庫”中。

(14)新建“花邊”圖形元件，進入圖形元件編輯窗口后，引用“裝飾邊”素材，執(zhí)行【修改】→【位圖】→【轉換位圖為矢量圖】命令，把“裝飾邊”位圖轉換成矢量圖。

(15)使用選擇工具選中裝飾邊的白色背景，按Delete鍵，清除裝飾圖案的背景；然后使用油漆桶工具把圖案填充為金黃色到白色的放射狀漸變；再復制兩個裝飾邊，做成花邊圖案，如圖10-9所示。圖10-9花邊圖案

(16)新建“文字”影片剪輯元件，輸入文字“星星相隨”，使用逐幀動畫制作成文字顏色交替變換的動畫效果。

(17)返回主場景，新建5個圖層。將6個圖層從上到下依次命名為“星20”、“星40”、“星60”、“星80”、“星100”、“花邊”。

(18)在“花邊”圖層中，引用“花邊”圖形元件，創(chuàng)建4個“花邊”元件的實例，并把它們分布在舞臺的四個角上；引用“文字”影片剪輯元件，創(chuàng)建2個“文字”元件的實例，把它們分別布局于左上角和右下角，布局效果如圖10-1所示。

(19)在“星100”圖層的第1幀上引用“starMC”影片剪輯元件；依次在“星80”圖層的第5幀、“星60”圖層的第10幀、“星40”圖層的第15幀、“星20”圖層的第20幀上引用“starMC”影片剪輯元件，并依次設置“starMC”實例的Alpha=80%、Alpha=60%、Alpha=40%、Alpha=20%。

(20)在“花邊”和“星100”圖層的第80幀上插入普通幀；依次在“星80”圖層的第75幀、“星60”圖層的第70幀、“星40”圖層的第65幀、“星20”圖層的第60幀上插入普通幀。動畫最終的時間軸布局如圖10-10所示。

(21)輸出測試動畫效果。

(22)制作完成，保存文件。

圖10-10“時間軸”布局案例拓展

本例中通過靈活運用影片剪輯，把它們布局在不同的圖層中錯位播放。應用這種技法可以制作跟隨效果、重疊幻影效果、幻影收攏效果等。另外，通過調整運動對象的中心位置，可以制作多個對象間相互環(huán)繞旋轉的動畫效果。

案例10-2：吊水樓瀑布

案例展示與任務

利用隨書光盤中“第10章/案例2/吊水樓瀑布.jpg”素材，使用遮罩技術制作瀑布飛瀉的效果，如圖10-11所示，實例最終效果參見隨書光盤中“第10章/案例2/吊水樓瀑布.fla”文檔。圖10-11吊水樓瀑布

設計分析

本例中制作水瀉煙飛的瀑布效果，關鍵是非常巧妙地運用了遮罩技術，還有動畫細節(jié)處理也十分到位。采用細線條組合作遮罩物，遮罩對象是圖像中有水的部分，把遮罩對象(即有水的部分)相對原始圖片作1個像素的位移，當遮罩物(即細線條組合)作動作補間運動時，遮罩對象中有水的部分和原始圖片中有水的區(qū)域重疊顯示，就會產生動感水流效果。操作步驟

(1)新建文檔，設置文檔尺寸為800×600像素，背景顏色為灰綠色(#CCCC99)，幀頻為18fps，保存文檔，命名為“吊水樓瀑布.fla”。

(2)執(zhí)行【文件】→【導入】→【導入到庫】命令，把隨書光盤中“第10章/案例2/吊水樓瀑布.jpg”素材導入到“庫”中。

(3)新建“線條”圖形元件，使用線條工具繪制一條寬1000像素，高7像素的直線，把直線的中心與元件注冊點重合。

(4)新建“線條組合”圖形元件，在元件編輯窗口中引用“線條”元件，選中“線條”實例，按Ctrl+D鍵復制多根線條。

(5)縮小視圖為25%，選中“線條組合”圖形元件中所有的“線條”實例，打開“對齊”面板，單擊“相對于舞臺”按鈕，再單擊“水平中齊”按鈕，對齊線條，如圖10-12所示。

圖10-12創(chuàng)建“線條組合”元件

(6)新建“瀑布”影片剪輯元件，進入元件編輯窗口，創(chuàng)建三個圖層，從上到下依次命名為“線條”、“水”、“圖片”。

(7)在“圖片”圖層的第1幀上引用“吊水樓瀑布”圖像，復制該圖像，使用“粘貼到當前位置”方式把它粘貼到“水”圖層中。

(8)隱藏“圖片”圖層，選中“水”圖層中的圖像，按Ctrl+B鍵把圖像打散分離，使用套索工具選項區(qū)中的“多邊形模式”功能，選擇圖像中沒有水的區(qū)域，按Delete鍵清除，把沒有水的部分逐步清除干凈，剩下有水的區(qū)域，如圖10-13所示。圖10-13保留有水的區(qū)域

(9)選擇有水的區(qū)域，按F8功能鍵，把它轉換成名為“水”的影片剪輯，并在“屬性”面板中設置“水”實例的Alpha=60%。

(10)使用方向鍵把“水”圖層中的“水”實例向右移動1個像素，使“水”圖層中有水的區(qū)域和“圖片”圖層中的水區(qū)域有1個像素的位移。

提示：兩個圖層中水區(qū)域的位移不能太大，否則實現(xiàn)遮罩動畫時水流錯位就會很大。

(11)在“線條”圖層的第1幀上引用“線條組合”圖形元件，使用“變形”面板對“線條組合”實例作斜切處理，參數(shù)設置如圖10-14所示。

圖10-14“變形”面板參數(shù)設置

(12)在第10幀上插入關鍵幀，把第10幀上的“線條組合”實例向下和向右移動一小段距離。在第1～10幀上創(chuàng)建動作補間動畫。

注意：“線條”圖層上的動作補間動畫是用來實現(xiàn)水流效果的。水流是一個無限循環(huán)動畫，動畫播放完第10幀后又回到第1幀，為了使水流效果沒有停頓感，特別要注意定位第1幀和第10幀上的線條位置，要符合動畫運動的規(guī)律。如圖10-15所示，第10幀上參考點a處于線條的中間位置，依據(jù)運動規(guī)律，運動到第1幀時第10幀上處于參考點a上方的線條應該到達參考點a。圖10-15利用參考點定位線條的位置第1幀

第10幀

a

a

(13)新建“邊框”圖形元件，使用矩形工具繪制一個筆觸顏色為黃綠色(#666600)、筆觸高度為5像素的無邊框的矩形。

(14)新建“裝飾線條”圖形元件，使用橢圓工具和線條工具繪制如圖10-16所示的裝飾線條。

圖10-16裝飾線條

(15)新建“文字”圖形元件，選擇文字工具，設置字體為黑體、加粗，大小為40，字體顏色為紅褐色(#663300)，輸入“黑龍江—吊水樓瀑布”。

(16)返回主場景，新建2個圖層。將3個圖層從上到下依次命名為“瀑布”、“文字”和“邊框線條”。在“瀑布”圖層中引用“瀑布”影片剪輯元件，在“文字”圖層中引用“文字”圖形元件，在“邊框線條”圖層中引用“邊框”和“裝飾線條”圖形元件。按效果圖10-11所示調整各個實例的位置和大小。

(17)輸出測試動畫效果。

(18)制作完成，保存文件。

案例拓展

遮罩技術是Flash動畫制作技術中的核心技術，很多富有創(chuàng)意的動畫特效都是采用遮罩技術實現(xiàn)的。本例中遮罩技術的使用方法及動畫細節(jié)處理是動畫制作中常用的技法，可應用于水波、倒影等動畫效果的制作。

案例10-3：旋轉的地球

案例展示與任務

利用隨書光盤中“第10章/案例3/地球圖片.png”素材，制作環(huán)形文字和地球旋轉的動畫效果，如圖10-17所示，實例最終效果參見隨書光盤中“第10章/案例3/旋轉的地球.fla”文檔。

圖10-17旋轉的地球

設計分析

本例中主要制作兩個動畫效果。一個是環(huán)形文字的旋轉，另一個是地球的立體旋轉效果。制作環(huán)形文字的旋轉，要解決的問題是如何制作環(huán)形文字，可以通過巧妙地使用“變形”面板來完成；地球的立體旋轉效果采用遮罩技術實現(xiàn)。

操作步驟

(1)新建文檔，設置文檔尺寸為550×400像素，背景為黑色，幀頻為12fps，保存文檔，命名為“旋轉的地球.fla”。

(2)執(zhí)行【文件】→【導入】→【導入到庫】命令，把隨書光盤中“第10章/案例3/地球圖片.png”素材導入到“庫”中。

(3)新建“世界地圖”圖形元件，在元件編輯窗口中，引用“地球圖片”位圖。選中位圖，執(zhí)行【修改】→【位圖】→【轉換位圖為矢量圖】命令，把地球位圖轉換成矢量圖。

(4)使用選擇工具，選擇地圖背景，按Delete鍵清除背景。

(5)新建“球體”圖形元件。選擇橢圓工具，設置“無筆觸”屬性，按圖10-18所示設置放射狀漸變填充，繪制一個直徑為145像素的圓，使用填充變形工具調整填充的位置，效果如圖10-19所示。圖10-18設置球體的填充顏色Alpha:0%

顏色值:#000000

Alpha:100%

顏色值:#000033

Alpha:100%

顏色值:#010265

圖10-19繪制球體

(6)新建“地球MC”影片剪輯元件，創(chuàng)建6個圖層，從上到下依次命名為“球遮罩2”、“左移”、“球遮罩1”、“右移”、“球背景”、“光暈”。

(7)在“光暈”圖層中，選擇橢圓工具，設置“無筆觸”屬性，按圖10-20所示設置放射狀漸變填充，繪制一個直徑為181像素的圓，效果如圖10-21所示。

圖10-20設置光暈的填充顏色Alpha:0%

顏色值:#FFFFFF

Alpha:100%

顏色值:

#A3A4FE

Alpha0%

顏色值:

#4F67CA

圖10-21光暈

(8)分別在“球背景”、“球遮罩1”、“球遮罩2”三個圖層的第1幀上引用“球體”圖形元件，且三個“球體”實例的位置相同。

(9)在“右移”圖層的第1幀上引用“世界地圖”圖形元件，在“屬性”面板中設置實例的色調為藍灰色(#293244)。在第40幀上插入關鍵幀，把“世界地圖”實例水平拖到右邊。在第1～40幀上創(chuàng)建動作補間動畫。

注意：第1幀和第40幀上的“世界地圖”實例必須與“球遮罩1”圖層上的“球體”實例重疊，如圖10-22所示。圖10-22“世界地圖”實例與“球體”實例重疊

(10)選擇“球遮罩1”為當前圖層，單擊鼠標右鍵，執(zhí)行“遮罩層”命令。創(chuàng)建“球遮罩1”和“右移”圖層之間的鏈接關系。

(11)按步驟(9)～(10)的方法在“左移”圖層的第1幀上引用“世界地圖”圖形元件。在第1～40幀間創(chuàng)建動作補間動畫，只是運動方向相反，“左移”圖層上的“世界地圖”實例是向左移動的。建立“球遮罩2”和“左移”圖層間的遮罩鏈接關系。影片剪輯“地球MC”的時間軸布局如圖10-23所示。圖10-23旋轉的地球時間軸布局

(12)鎖定所有的圖層，按Enter預覽地球旋轉動畫效果。

(13)新建“環(huán)形文字”影片剪輯元件。首先計算兩個環(huán)形文字之間的旋轉角度。其計算方法是，360除以環(huán)形字符總數(shù)即可得到兩個字符間的旋轉角度。本例中輸入字符有41個，再加上單詞間的空格，一共是46個字符，360÷46=7.83。在“環(huán)形文字”元件編輯窗口中，輸入字母“H”，把它放在元件注冊點的上方，使用任意變形工具把“H”字母的中心點移到元件的注冊點，使字母中心點與元件注冊點對齊重合。

(14)選擇字母“H”，打開“變形”面板，設置變形參數(shù)，如圖10-24所示。

(15)單擊“復制并應用變形”按鈕，復制46個字母“H”，它們以中心點為圓心圍成了環(huán)形，如圖10-25所示。

(16)修改環(huán)形文字中的字符，輸入“HUNANRAILWAYPROFESSIONALTECHNOLOGYCOLLEGE”。

(17)選擇所有字符，添加“發(fā)光”的“濾鏡”效果，參數(shù)設置如圖10-26所示。

圖10-24“變形”面板參數(shù)設置圖10-25環(huán)形文字圖10-26“濾鏡”參數(shù)設置

(18)新建“旋轉文字”影片剪輯元件，在第1幀上引用“環(huán)形文字”影片剪輯元件，在第100幀插入關鍵幀。在第1～100幀間創(chuàng)建動作補間動畫，并且設置“逆時針”旋轉“1”次。為了消除文字旋轉時的停頓感，在第99幀插入關鍵幀，然后刪除第100幀。

(19)新建“傾斜文字”影片剪輯，在第1幀上引用“旋轉文字”影片剪輯元件，在第30、60幀上插入關鍵幀。選擇第30幀上的“旋轉文字”影片剪輯實例，把它作適當?shù)匦鼻刑幚?，效果如圖10-27所示。圖10-27斜切“旋轉文字”實例

(20)創(chuàng)建第1～30幀及第31～60幀間的動作補間動畫。

(21)返回主場景，新建兩個圖層。將3個圖層從上到下依次命名為“地球”、“上層文字”和“下層文字”。在“地球”圖層引用“地球MC”影片剪輯元件；在“上層文字”和“下層文字”圖層中引用“傾斜文字”，并且把“下層文字”圖層中的“傾斜文字”實例向左下移動一小段距離，設置實例的色調為深灰色(#333333)。

(22)輸出測試動畫效果。

(23)制作完成，保存文件。

案例拓展

本例中應用“變形”面板快速制作環(huán)形文字是創(chuàng)建規(guī)則布局對象常用的方法，配合“信息”面板和“對齊”面板，可以精確控制動畫對象的大小和位置。運用遮罩技術制作旋轉的地球，這種方法可擴展到其他形狀的對象，完成對象立體旋轉效果的制作。

案例10-4：雙顯電子臺歷

案例展示與任務

使用隨書光盤中“第10章/案例4/電子臺歷.png”素材及FlashActionScript提供的Date類，制作雙顯電子臺歷，如圖10-28所示，實例最終效果參見隨書光盤中“第10章/案例4/雙顯電子臺歷.fla”文檔。圖10-28雙顯電子臺歷

設計分析

Flash內置的Date類提供有關日期和時間的操作控制。制作雙顯電子臺歷，首先使用圖像處理軟件制作臺歷背景，然后在Flash中完成電子鐘的走動及臺歷文字的顯示。電子鐘的制作方法是，創(chuàng)建時針、分針和秒針三個影片剪輯，調用Date類獲取系統(tǒng)時間，計算鐘面各指針的旋轉角度，設置三個指針影片剪輯的_rotation(旋轉)屬性，完成電子鐘的走動。臺歷文字的顯示比較簡單，使用動態(tài)文本框顯示系統(tǒng)日期和時間即可。

操作步驟

(1)新建文檔，設置文檔尺寸為550×400像素，背景顏色為灰色(#CCCCCC)，保存文檔，命名為“雙顯電子臺歷.fla”。

(2)執(zhí)行【文件】→【導入】→【導入到庫】命令，導入隨書光盤中“第10章/案例4/電子臺歷.png”素材。

(3)依次創(chuàng)建名為“時針”、“分針”、“秒針”、“針軸”的影片剪輯元件，使用繪圖工具繪制每個元件的形狀，注意三個指針對象的底端必須與元件注冊點對齊重合，元件圖形如圖10-29所示。圖10-29創(chuàng)建影片剪輯元件時針分針秒針針軸

(4)創(chuàng)建“臺歷”影片剪輯元件，進入元件編輯窗口，創(chuàng)建5個圖層，從上到下依次命名為“針軸”、“時針”、“分針”、“秒針”、“鐘面”。

(5)在“臺歷”元件中引用“針軸”、“時針”、“分針”、“秒針”影片剪輯元件和“電子臺歷”位圖，并把它們放在對應名稱的圖層中，注意“時針”、“分針”、“秒針”元件實例必須指向鐘面的“12”點位置，如圖10-30所示。圖10-30“臺歷”元件時間軸布局與顯示效果

說明：因為電子鐘走動的初始旋轉角度是以指針指向12點位置開始計算的，所以它們的初始位置也必須指向12點。

(6)在“屬性”面板上給“時針”、“分針”、“秒針”實例分別命名為“hour”、“minute”、“second”。

(7)返回主場景，創(chuàng)建三個圖層，從上到下依次命名為“AS”、“臺歷文字”和“電子鐘”。

(8)在“電子鐘”圖層中引用“臺歷”元件，并給“臺歷”實例命名為“clock”。在“臺歷文字”圖層上創(chuàng)建七個動態(tài)文本框，設置文本屬性為宋體、21點、黑色、加粗、水平居中。調整它們的位置與大小，使之與“臺歷”實例文字顯示區(qū)相適應，如圖10-31所示。圖10-31動態(tài)文本框的位置和大小

(9)選擇動態(tài)文本框，展開“屬性”面板，在“var”輸入框中輸入每個文本框的變量名，其對應關系如圖10-32所示。圖10-32動態(tài)文本框與其變量的對應關系

(10)在“AS”圖層的第1幀上添加如下動作：

//新建一個Date對象，用來獲取當前日期和時間

MyDate=newDate();

//獲取系統(tǒng)時間，并賦給變量hour(小時)、minute(分鐘)、second(秒)

hour=MyDate.getHours();

//hour是系統(tǒng)時間,hour1是鐘面時間,鐘面最大為12,系統(tǒng)時間為0～23

if(hour>11){

hour1=hour-12;

}

minute=MyDate.getMinutes();

second=MyDate.getSeconds();

//以鐘面12點位置為參考點，計算三個指針的旋轉角度，并賦給三個指針實例的_rotation屬性

setProperty(this.clock.second,_rotation,6*second);

setProperty(this.clock.minute,_rotation,6*minute+second/10);

setProperty(this.clock.hour,_rotation,30*hour1+minute/2);

//獲取系統(tǒng)日期和星期，并賦給變量year(年)、month(月)、date(日)、day(星期)

year=MyDate.getFullYear();

//系統(tǒng)月份從0開始到11，0為1月，1為2月，…

month=MyDate.getMonth()+1;

date=MyDate.getDate();

day=MyDate.getDay();

//把日期數(shù)值轉換為字符“星期一”、“星期二”、…

if(day==1){

days="星期一";

}

if(day==2){

days="星期二";

}

if(day==3){

days="星期三";

}

if(day==4){

days="星期四";

}

if(day==5){

days="星期五";

}

if(day==6){

days="星期六";

}

if(day==0){

days="星期日";

}

(11)在“AS”、“臺歷文字”和“電子鐘”圖層的第2幀上插入普通幀。

說明：在三個圖層的第2幀上插入普通幀，是為了使第1幀上的腳本能重復執(zhí)行，以獲取系統(tǒng)最新時間。

(12)輸出測試動畫效果。

(13)制作完成，保存文件。

案例拓展

FlashActionScript擁有大量的具有各種用途的內建類。通過調用類的方法和屬性，可以獲得很多實用的功能。本例的方法常用于要顯示日期、時間的動畫及課件制作中。

案例10-5：夜空焰火

案例展示與任務

使用隨書光盤中“第10章/案例5/城市夜景.jpg”素材，運用Flash動作腳本，制作焰火效果，如圖10-33所示，實例最終效果參見隨書光盤中“第10章/案例5/夜空焰火.fla”文檔。圖10-33夜空焰火

設計分析

本例中的煙花采用動作腳本自動生成。首先制作一個拖尾煙花影片剪輯元件，運用腳本復制拖尾煙花影片剪輯實例，并設置新生成的實例按360°隨機旋轉，形成一個禮花彈。定義一個函數(shù)fireegg()，該函數(shù)用來復制禮花彈影片剪輯實例，生成多個禮花彈。最后在場景使用setInterval()函數(shù)定時調用fireegg()，產生不斷燃放的焰火效果。

操作步驟

(1)新建文檔，設置文檔尺寸為800×600像素，30fps，保存文檔，命名為“夜空焰火.fla”。

(2)新建“煙花球”圖形元件，按圖10-34所示設置煙花球的放射狀漸變填充顏色。放大視圖，以注冊點為中心，繪制直徑為4.5像素的煙花球，調整漸變填充的位置和范圍，效果如圖10-35所示。圖10-34設置“煙花球”的漸變填充顏色Alpha:100%

顏色值:#EDEEF8

Alpha:50%

顏色值:#EECB44

Alpha:0%

顏色值:#393A8A

(3)新建“煙花尾”圖形元件，使用煙花球的填充顏色，繪制寬為1.2像素，高為3.5像素的煙花尾，效果如圖10-36所示。

圖10-35煙花球圖10-36煙花尾

(4)新建“拖尾煙花MC”影片剪輯元件，創(chuàng)建5個圖層，從上到下依次命名為“AS”、“尾2”、“球2”、“尾1”、“球1”。

(5)在“球1”圖層上創(chuàng)建“煙花球”向上運動且逐漸變淡的動畫效果。在第1幀上引用“煙花球”元件，把“煙花球”實例的中心點與元件的注冊點重合。在第30幀上插入關鍵幀，把“煙花球”實例相對第1幀的位置向上垂直移動40像素，并設置Alpha=50%。創(chuàng)建第1～30幀間的動作補間動畫。

(6)在“尾1”圖層上創(chuàng)建“煙花尾”向上運動且尾部逐漸拉長變淡的拖尾效果。其制作方法與步驟(5)相似，在第1幀上引用“煙花尾”元件，在第30幀上插入關鍵幀，把“煙花尾”實例向上垂直移動40像素，設置Alpha=50%，Y軸方向放大5倍，創(chuàng)建第1~30幀間的動作補間動畫?！扒?”和“尾1”兩個圖層共同完成了一顆煙花的拖尾效果。第1幀和第30幀上的圖像位置布局如圖10-37所示。

(7)在“球2”和“尾2”圖層上的第8~35幀上創(chuàng)建另一顆煙花的動畫效果，其制作方法與步驟(5)～(6)基本相同，不同之處在于“煙花球”和“煙花尾”實例相對于“球1”和“尾1”圖層上的實例要向左水平移動3像素。

(8)在“AS”圖層的第36幀上插入空白關鍵幀，添加腳本：

stop();

“拖尾煙花MC”影片剪輯元件時間軸布局如圖10-38所示。圖10-37圖像的位置注冊點

注冊點

第1幀

第30幀

圖10-38“拖尾煙花MC”影片剪輯時間軸布局

(9)按Enter鍵預覽“拖尾煙花MC”影片剪輯動畫效果，兩顆煙花先后向上快速移動，產生拖尾效果。

(10)新建“禮花彈MC”影片剪輯元件，把“圖層1”命名為“煙花”，再創(chuàng)建名為“AS”的腳本層。在“煙花”層的第1幀上引用“拖尾煙花MC”影片剪輯元件，在“屬性”面板上給元件實例命名為“fire”。在“AS”腳本層上添加動作：

i=1;

//隨機生成顏色值R、G、B

R=random(256);

G=random(256);

B=random(256);

//使用while語句復制60顆“拖尾煙花MC”影片剪輯實例“fire”+i，生成一個禮花彈

while(i<=60){

duplicateMovieClip(this.fire,“fire”+i,i);

//使用eval()檢索影片剪輯"fire"+i，并為檢索到的影片剪輯創(chuàng)建名為NC的Color對象 NC=newColor(eval("fire"+i));

//使用移位運算對Color對象NC設置不同的RGB顏色

NC.setRGB(R<<16|G<<8|B);

//隨機設置實例“fire”+i的旋轉角度和大小

setProperty("fire"+i,_rotation,random(360));

setProperty("fire"+i,_xscale,random(100)+50);

setProperty("fire"+i,_yscale,random(100)+50);

i++;

}

this.fire._visible=0;

(11)返回主場景，創(chuàng)建3個圖層，并將它們從上到下依次命名為“AS”、“煙花”、“背景”。在“背景”圖層的第1幀上導入“城市夜景”素材圖片；在“煙花”圖層的第1幀上引用“禮花彈MC”元件，給元件實例命名為“firefire”；在“AS”圖層的第1幀上添加動作腳本：

this.firefire._visible=true;

//每隔200毫秒調用一次fireegg()函數(shù)

setInterval(fireegg,200);

//i用做新生成的"firefire"影片剪輯實例文件后綴名,設置初始值為0

i=0;//定義fireegg()函數(shù),該函數(shù)通過復制"禮花彈MC"的實例"firefire",生成主場景中的禮花彈

functionfireegg(){

//復制實例"firefire"，并把生成對象"firefire"+i隨機放在舞臺的上方

duplicateMovieClip("firefire","firefire"+i,i);

setProperty("firefire"+i,_x,random(750)+50);

setProperty("firefire"+i,_y,random(100)+50);

i++;

//if語句用來控制禮花彈的個數(shù)，最多為5個

if(i>=4){

i=0;

}

}

this.firefire._visible=false;

提示：使用腳本生成焰火效果，在主場景中不能創(chuàng)建太多的禮花彈，否則系統(tǒng)資源開銷很大，會導致動畫的播放速度變得很慢。本例中變量i用來給生成的實例作后綴名，通過使用if語句重置變量i的值，使得當新生成的實例名與原實例名相同時，最新生成的實例會替換原實例，達到控制禮花彈數(shù)量的目的。

(12)輸出測試動畫效果。

(13)制作完成，保存文件。

案例拓展

本案例的動畫效果主要使用腳本來完成。腳本動畫相對于手工動畫來說，具有不可比擬的優(yōu)越性，它可以輕松地完成手工動畫無法完成的某些特效。其次，腳本動畫的編輯修改和移植也非常簡便、高效，本例中只要修改煙花的形狀，就可以制作彈子、星星等圖形的發(fā)散效果。案例10-6：預載動畫

案例展示與任務

運用Flash動作腳本，制作Loading動畫顯示動畫的加載過程及預載信息提示，如圖10-39所示。本實例的最終效果參見隨書光盤中“第10章/案例6/預載動畫.fla”文檔。

圖10-39預載動畫

設計分析

當用戶做好自己滿意的Flash動畫后，可以將它上傳到網(wǎng)絡上與大家共同分享。但由于網(wǎng)絡速度的限制，需要裝載一段時間才能開始播放。如果沒有Loading動畫的預載畫面，頁面將是一片空白沒有任何提示，有時還會造成在線欣賞動畫時出現(xiàn)斷斷續(xù)續(xù)的畫面。為了讓瀏覽者預先了解作品下載進度等提示信息，可以在作品前面做一個富有特色的預載畫面，從而使用戶能耐心等待預載結束來欣賞作品。

預載動畫一般單獨放在一個場景中，要加載的動畫放在另外的場景中。本例的預載動畫分為兩個畫面，一個是下載信息提示畫面，另一個是播放等待畫面。下載信息提示畫面采用預載進度條顯示下載的百分比進度，再添加動態(tài)文本框顯示下載提示信息，還創(chuàng)建了一個楓葉下落的動畫體現(xiàn)作品風格；等待畫面包括設計者、作品名稱和播放按鈕三個部分。

操作步驟

(1)新建文檔，設置文檔尺寸為800×600像素，12fps，保存文檔，命名為“預載動畫.fla”。

(2)執(zhí)行【窗口】→【其他面板】→【場景】命令，打開“場景”面板，把“場景1”更名為“預載場景”。

(3)首先制作預載動畫中的元件。打開“庫”面板，單擊“新建文件夾”按鈕，創(chuàng)建名為“預載動畫”的文件夾。下面步驟中制作的所有元件都放在此文件夾中。

(4)新建“l(fā)oading”影片剪輯元件，使用逐幀動畫制作loading文字動畫效果，省略號的點(.)逐個出現(xiàn)，又逐個消失，效果如圖10-40所示。

圖10-40loading動畫

(5)新建“進度條”影片剪輯元件，把“圖層1”命名為“條子”；再創(chuàng)建一個圖層，命名為“邊框”。選擇“邊框”圖層的第1幀，使用矩形工具，繪制一個高度為10像素，寬度為270像素的無填充的褐色(#663300)矩形邊框。在第100幀上插入普通幀。

(6)在“條子”圖層的第1～100幀之間創(chuàng)建形狀補間動畫，制作進度條從邊框左邊逐漸向右拉伸的動畫效果，如圖10-41所示。最后在第1幀上添加腳本：

stop();

說明：進度條必須做成100幀的影片剪輯，因為進度條是按下載進度的百分比跳轉到指定的幀上實現(xiàn)動畫效果的。圖10-41進度條動畫

(7)新建“楓葉”、“樹枝”圖形元件，使用鋼筆工具繪制“楓葉”和“樹枝”形狀，效果如圖10-42所示。

(8)新建“楓葉MC”影片剪輯元件，新建4個圖層。將5個圖層從上到下依次命名為“葉4”、“葉3”、“葉2”、“葉1”、“樹枝”。在“葉4”、“葉3”、“葉2”、“葉1”圖層上引用“楓葉”圖形元件，在“樹枝”圖層上引用“樹枝”圖形元件，組成如圖10-43所示的楓樹。圖10-42楓葉與樹枝圖10-43楓樹

(9)在“葉1”和“葉2”圖層上創(chuàng)建動作補間動畫，制作兩片楓葉以旋轉方式先后飄落，且具有淡入淡出的效果，如圖10-44所示。

(10)新建“韓”、“雪”、“飄”影片剪輯元件，在每個影片剪輯中輸入相對應的文字“韓”、“雪”、“飄”。把“飄”字打散，清除“飄”字中的“×”，把“飄”字編輯修改成如圖10-45所示的效果。圖10-44楓葉下落動畫圖10-45編輯修改“飄”字

(11)新建“雪花”圖形元件，繪制雪花圖形，如圖10-46所示。

(12)新建“雪花MC”影片剪輯元件，引用“雪花”圖形元件，使用引導動畫制作雪花飄落的動畫效果，如圖10-47所示。

圖10-46雪花圖10-47雪花飄落動畫

(13)新建“飄雪MC”影片剪輯元件，新建3個圖層。將4個圖層從上到下依次命名為“雪花3”、“雪花2”、“雪花1”、“文字”。在“文字”圖層上引用“飄”、“韓”、“雪”、“雪花”圖形元件，組成如圖10-48所示的文字組合效果。

(14)分別在“雪花3”、“雪花2”、“雪花1”圖層的第10幀、第5幀、第1幀上引用“雪花MC”影片剪輯元件，并適當調整實例的大小和位置，使三片雪花先后下落，最后落在“飄”字的雪花形狀上?！帮h雪MC”影片剪輯時間軸如圖10-49所示。圖10-48飄雪組合效果圖10-49“飄雪MC”時間軸布局

(15)新建“設計人”圖形元件，把“圖層1”命名為“背景”，再新建一個名為“文字”的圖層。在“背景”層的第1幀上制作“田”字背景，顏色為墨綠色(#003300)，Alpha=50%；在“文字”層的第1幀上輸入文字，顏色為墨綠色(#003300)，Alpha=100%。選擇所有的文字，按Ctrl+B鍵，把所有的文字打散，效果如圖10-50所示。

說明：在后面創(chuàng)建的影片剪輯“設計人MC”中，將會引用“設計人”圖形元件作動作補間動畫，把文字打散可以使動畫效果非常流暢。

(16)新建“設計人MC”影片剪輯元件，把“圖層1”命名為“底層”，在“底層”圖層的第1幀中引用“設計人”圖形元件；再新建一個圖層，命名為“漸變”，在“漸變”圖層的第1幀上復制“底層”圖層中的“設計人”實例，設置實例的Alpha=50%。

(17)在“漸變”圖層的第1～20幀上創(chuàng)建動作補間動畫，制作文字從小變大的效果；在第21～40幀創(chuàng)建動作補間動畫，制作文字從大變小的動畫效果，如圖10-51所示。圖10-50“設計人”圖形元件圖10-51“設計人MC”動畫

(18)新建“樹”圖形元件，繪制如圖10-52所示的樹。

(19)新建“背景”圖形元件，選擇矩形工具，在“圖層1”的第1幀上繪制一個無筆觸，填充顏色為“藍(#3C76CC)—淡藍(#BECDE2)—深藍(#204479)”的線性漸變的矩形背景，效果如圖10-53所示。圖10-52“樹”圖形元件圖10-53“背景”圖形元件

(20)新建“背景1”圖形元件，新建2個圖層。將3個圖層從上到下依次命名為“樹”、“上層”和“下層”。在“下層”圖層的第1幀上繪制一個無筆觸、填充顏色為“淡藍(#73C4FF)—藍(#3366CC)”的線性漸變的矩形；在“上層”圖層的第1幀上繪制一個無筆觸，填充顏色為“藍(#3393F0)—深藍(#2C5BA9)”的線性漸變的矩形，使用填充變形工具適當調整填充的位置，背景效果如圖10-54所示。

(21)使用選擇工具調整“上層”圖層中矩形的上邊線，把它調整為波浪形。在“樹”圖層中引用“樹”圖形元件?！氨尘?”圖形元件效果如圖10-55所示。

圖10-54繪制矩形背景圖10-55“背景1”圖形元件

(22)按圖10-39所示，制作“開始”按鈕元件。

(23)返回“預載場景”，新建6個圖層。將7個圖層從上到下依次命名為“ACTION”、“按鈕”、“楓樹”、“動態(tài)框”、“LOAD”、“進度條”、“背景”。

(24)在“楓樹”、“LOAD”、“進度條”和“背景”圖層的第1幀上引用相對應的元件，即“楓樹MC”、“l(fā)oading”、“進度條”和“背景”，并將“進度條”實例命名為“l(fā)oadmc”。在這些圖層的第180幀上插入普通幀。

(25)在“按鈕”圖層的第181幀上引用“按鈕”元件，在“屬性”面板中將第181幀命名為“play”，在第220幀插入普通幀。

(26)在“背景”圖層的第181幀上插入空白關鍵幀，在該幀上引用“背景1”、“設計人MC”和“飄雪MC”元件，按圖10-39所示適當調整元件實例的大小和位置。在第220幀插入普通幀。

(27)在“動態(tài)框”圖層的第1幀上輸入圖10-39所示的靜態(tài)文字，在文字右邊創(chuàng)建動態(tài)文本框。打開“屬性”面板，在“var”輸入框中輸入變量名，其對應關系如圖10-56所示。圖10-56動態(tài)文本框與其變量的對應關系(28)在“ACTION”圖層的第1幀上添加腳本：

//獲取要下載的總字節(jié)數(shù)

totalb=_root.getBytesTotal();

totalbt=int(totalb/1024)+"K";

//已下載的字節(jié)數(shù)

loadb=_root.getBytesLoaded();

loadbt=int(loadb/1024)+"K";

//剩余下載字節(jié)數(shù)

surplus=totalb-loadb;

surplust=int(surplus/1024)+"K";

//下載進度百分比

per=int((loadb/totalb)*100);

pert=int((loadb/totalb)*100)+"%";

//已用下載時間

timeused=getTimer();

timeusedt=int(timeused/1000)+"秒";

//下載速度

speed=(loadb/1024)/(timeused/1000);

speedt=int(speed)+"K/S";

//需要的總時間

timetotal=totalb/speed;

timetotalt=int(timetotal/1000)+"秒";

//還需要下載的時間

timeleft=int((timetotal-timeused)/1000)+"秒";

//進度條按百分比值跳轉到指定的幀上

loadmc.gotoAndStop(per);

在第2幀上添加腳本：

//判斷動畫是否加載完畢，如果加載完，跳到等待播放畫面，否則回到信息提示畫面

if(loadb==totalb){

gotoAndPlay("play");

}else{

gotoAndPlay(1);

}

在第220幀上添加腳本：

stop();

(29)測試動畫，下載信息提示畫面沒有顯示，只顯示了等待播放畫面。這是因為在本地機上速度很快。為了觀察動畫預載效果，可在測試窗口中選擇一個較低的下載速度，例如“56K”，然后執(zhí)行【視圖】→【模擬下載】命令，即可觀察到在此網(wǎng)絡環(huán)境下動畫的預載過程。

(30)制作完成，保存文件。

案例拓展

本案例的預載動畫屬于精確顯示下載提示信息的Loading動畫，在實際應用中，要上傳到網(wǎng)絡上的Flash動畫，最好添加預載畫面。常見的預載形式是簡單Loading，只需要有直觀的進度條和下載進度百分比提示信息即可，用戶可根據(jù)實際情況選擇需要顯示的下載提示信息。另外，預載動畫的動畫內容不能太多，否則用戶需要花較多的時間等待預載畫面的下載。

案例10-7：FlashMTV——飄雪

案例展示與任務

FlashMTV是音樂與動畫結合產生的藝術作品，它是大眾非常喜歡的一種娛樂形式，在網(wǎng)絡上廣為流傳。其特點是能把圖形、圖像、音樂、歌詞較好地融合在一起，給人以視聽的雙重感受。制作歌曲《飄雪》的FlashMTV，要求在主體動畫前面制作一個Loading動畫。MTV畫面要與歌曲意境協(xié)調，部分畫面如圖10-57至圖10-62所示，實例最終效果參見隨書光盤中“第10章/案例/案例7/飄雪.fla”文檔。圖10-57飄雪畫面之一圖10-58飄雪畫面之二圖10-59飄雪畫面之三圖10-60飄雪畫面之四

圖10-61飄雪畫面之五圖10-62飄雪畫面之六

設計分析

FlashMTV的制作是一個比較大的項目，不是一天兩天就能完成的，前期的準備工作尤為重要。準備工作大致包括四個步驟：

第一，選擇歌曲，最好選擇自己熟悉而擅長的題材，了解歌曲的創(chuàng)作意圖及要表達的主題，只有深入了解歌曲本身，做出來的Flash動畫才有可能使音樂與畫面搭配協(xié)調，共同烘托主題意境?！讹h雪》是一首略帶傷感的愛情歌曲，表達女主人公對一段刻骨銘心戀情的思念。

第二，在明確動畫的主題效果之后，需要確定動畫的劇情、背景、角色的形象、動畫的表現(xiàn)形式等。

第三，動畫的風格設計與動畫的劇情和角色匹配。本例采用唯美含蓄的動畫風格，以藍色為主打色，在藍色背景下，綿綿的雪花飄落飛舞，打造出一個冰雪世界；精致的卡通人物造型，玫紅的楓葉、相思的紅豆，給冰涼的環(huán)境帶來一抹亮色，既給畫面以點綴，又與唯美含蓄的風格很吻合。

第四，根據(jù)前面確定的主題和風格有目的地搜集素材并進行素材處理。

前面的準備工作做好之后，就是具體的動畫制作。本例采用本章“案例10-6”的Loading動畫做預載動畫，一共需要兩個場景，一個場景用來放Loading動畫，另一個場景做歌曲動畫。預載動畫的制作方法不再贅述，歌曲畫面的制作要點是歌詞與音樂的同步問題。

制作步驟

1．音樂素材準備和前期處理

1)選擇音樂的格式

收集到的音樂素材格式不一定能導入Flash，可以使用AdobeAudition專業(yè)音樂處理軟件把它轉換為Flash能導入的格式。一般來說，在Flash中常用的聲音格式是WAV和MP3格式。WAV格式未經(jīng)過壓縮處理，文件體積一般都比較大，但是能避免失真；MP3格式壓縮性能比較高，是目前比較流行的一種音樂格式。

如果導入MP3音樂失敗，說明音樂格式不是標準的MP3音頻格式。Flash支持的采樣頻率是44.1kHz、22.05kHz、11.025kHz。如果要求較高的音質效果，可以選擇較高的采樣頻率。一般來說，選用采樣頻率22.05kHz、采樣位數(shù)16位，立體聲的音頻格式，