第10章綜合實(shí)例案例10-1：星星相隨案例10-2：吊水樓瀑布案例10-3：旋轉(zhuǎn)的地球案例10-4：雙顯電子臺(tái)歷案例10-5：夜空焰火案例10-6：預(yù)載動(dòng)畫(huà)案例10-7：FlashMTV——飄雪

【知識(shí)技能目標(biāo)】

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

(2)掌握每個(gè)綜合實(shí)例的設(shè)計(jì)思想、設(shè)計(jì)要點(diǎn)、制作方法和創(chuàng)作技巧，并能通過(guò)案例拓展動(dòng)畫(huà)創(chuàng)作技法。

(3)能夠有創(chuàng)意地應(yīng)用各種動(dòng)畫(huà)制作技術(shù)和創(chuàng)作技法開(kāi)發(fā)高質(zhì)量的動(dòng)畫(huà)特效。

案例10-1：星星相隨

案例展示與任務(wù)

使用引導(dǎo)動(dòng)畫(huà)，靈活運(yùn)用影片剪輯制作星星跟隨效果，如圖10-1所示，實(shí)例最終效果參見(jiàn)隨書(shū)光盤(pán)中“第10章/案例1/星星相隨.fla”文檔。圖10-1星星相隨

設(shè)計(jì)分析

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

操作步驟

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

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

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

顏色值:#FFFFFF

Alpha:30%

顏色值:#FFFFFF

Alpha:0%

顏色值:#FFFFFF

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

(5)復(fù)制六邊形，并作適當(dāng)縮小和旋轉(zhuǎn)，制作星星圖形，效果如圖10-5所示。

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

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

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

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

圖10-7軌跡線

(9)在“星星”圖層的第1幀中引用“star”影片剪輯元件。選擇第40幀，按F6功能鍵插入關(guān)鍵幀。在第1～40幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫(huà)，在“屬性”面板中設(shè)置“順時(shí)針”旋轉(zhuǎn)“1”次，并且勾選“對(duì)齊”復(fù)選框。

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

圖10-8引導(dǎo)動(dòng)畫(huà)第40幀處star實(shí)例的位置

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

(12)按Enter鍵預(yù)覽引導(dǎo)動(dòng)畫(huà)效果，兩顆星星相互環(huán)繞旋轉(zhuǎn)運(yùn)動(dòng)。

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

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

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

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

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

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

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

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

(21)輸出測(cè)試動(dòng)畫(huà)效果。

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

圖10-10“時(shí)間軸”布局案例拓展

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

案例10-2：吊水樓瀑布

案例展示與任務(wù)

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

設(shè)計(jì)分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第10幀

a

a

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

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

圖10-16裝飾線條

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

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

(17)輸出測(cè)試動(dòng)畫(huà)效果。

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

案例拓展

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

案例10-3：旋轉(zhuǎn)的地球

案例展示與任務(wù)

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

圖10-17旋轉(zhuǎn)的地球

設(shè)計(jì)分析

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

操作步驟

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

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

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

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

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

顏色值:#000000

Alpha:100%

顏色值:#000033

Alpha:100%

顏色值:#010265

圖10-19繪制球體

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

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

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

顏色值:#FFFFFF

Alpha:100%

顏色值:

#A3A4FE

Alpha0%

顏色值:

#4F67CA

圖10-21光暈

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

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

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

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

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

(12)鎖定所有的圖層，按Enter預(yù)覽地球旋轉(zhuǎn)動(dòng)畫(huà)效果。

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

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

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

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

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

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

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

(19)新建“傾斜文字”影片剪輯，在第1幀上引用“旋轉(zhuǎn)文字”影片剪輯元件，在第30、60幀上插入關(guān)鍵幀。選擇第30幀上的“旋轉(zhuǎn)文字”影片剪輯實(shí)例，把它作適當(dāng)?shù)匦鼻刑幚恚Ч鐖D10-27所示。圖10-27斜切“旋轉(zhuǎn)文字”實(shí)例

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

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

(22)輸出測(cè)試動(dòng)畫(huà)效果。

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

案例拓展

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

案例10-4：雙顯電子臺(tái)歷

案例展示與任務(wù)

使用隨書(shū)光盤(pán)中“第10章/案例4/電子臺(tái)歷.png”素材及FlashActionScript提供的Date類(lèi)，制作雙顯電子臺(tái)歷，如圖10-28所示，實(shí)例最終效果參見(jiàn)隨書(shū)光盤(pán)中“第10章/案例4/雙顯電子臺(tái)歷.fla”文檔。圖10-28雙顯電子臺(tái)歷

設(shè)計(jì)分析

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

操作步驟

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

(2)執(zhí)行【文件】→【導(dǎo)入】→【導(dǎo)入到庫(kù)】命令，導(dǎo)入隨書(shū)光盤(pán)中“第10章/案例4/電子臺(tái)歷.png”素材。

(3)依次創(chuàng)建名為“時(shí)針”、“分針”、“秒針”、“針軸”的影片剪輯元件，使用繪圖工具繪制每個(gè)元件的形狀，注意三個(gè)指針對(duì)象的底端必須與元件注冊(cè)點(diǎn)對(duì)齊重合，元件圖形如圖10-29所示。圖10-29創(chuàng)建影片剪輯元件時(shí)針?lè)轴樏脶樶樰S

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

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

說(shuō)明：因?yàn)殡娮隅娮邉?dòng)的初始旋轉(zhuǎn)角度是以指針指向12點(diǎn)位置開(kāi)始計(jì)算的，所以它們的初始位置也必須指向12點(diǎn)。

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

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

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

(9)選擇動(dòng)態(tài)文本框，展開(kāi)“屬性”面板，在“var”輸入框中輸入每個(gè)文本框的變量名，其對(duì)應(yīng)關(guān)系如圖10-32所示。圖10-32動(dòng)態(tài)文本框與其變量的對(duì)應(yīng)關(guān)系

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

//新建一個(gè)Date對(duì)象，用來(lái)獲取當(dāng)前日期和時(shí)間

MyDate=newDate();

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

hour=MyDate.getHours();

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

if(hour>11){

hour1=hour-12;

}

minute=MyDate.getMinutes();

second=MyDate.getSeconds();

//以鐘面12點(diǎn)位置為參考點(diǎn)，計(jì)算三個(gè)指針的旋轉(zhuǎn)角度，并賦給三個(gè)指針實(shí)例的_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開(kāi)始到11，0為1月，1為2月，…

month=MyDate.getMonth()+1;

date=MyDate.getDate();

day=MyDate.getDay();

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

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”、“臺(tái)歷文字”和“電子鐘”圖層的第2幀上插入普通幀。

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

(12)輸出測(cè)試動(dòng)畫(huà)效果。

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

案例拓展

FlashActionScript擁有大量的具有各種用途的內(nèi)建類(lèi)。通過(guò)調(diào)用類(lèi)的方法和屬性，可以獲得很多實(shí)用的功能。本例的方法常用于要顯示日期、時(shí)間的動(dòng)畫(huà)及課件制作中。

案例10-5：夜空焰火

案例展示與任務(wù)

使用隨書(shū)光盤(pán)中“第10章/案例5/城市夜景.jpg”素材，運(yùn)用Flash動(dòng)作腳本，制作焰火效果，如圖10-33所示，實(shí)例最終效果參見(jiàn)隨書(shū)光盤(pán)中“第10章/案例5/夜空焰火.fla”文檔。圖10-33夜空焰火

設(shè)計(jì)分析

本例中的煙花采用動(dòng)作腳本自動(dòng)生成。首先制作一個(gè)拖尾煙花影片剪輯元件，運(yùn)用腳本復(fù)制拖尾煙花影片剪輯實(shí)例，并設(shè)置新生成的實(shí)例按360°隨機(jī)旋轉(zhuǎn)，形成一個(gè)禮花彈。定義一個(gè)函數(shù)fireegg()，該函數(shù)用來(lái)復(fù)制禮花彈影片剪輯實(shí)例，生成多個(gè)禮花彈。最后在場(chǎng)景使用setInterval()函數(shù)定時(shí)調(diào)用fireegg()，產(chǎn)生不斷燃放的焰火效果。

操作步驟

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

(2)新建“煙花球”圖形元件，按圖10-34所示設(shè)置煙花球的放射狀漸變填充顏色。放大視圖，以注冊(cè)點(diǎn)為中心，繪制直徑為4.5像素的煙花球，調(diào)整漸變填充的位置和范圍，效果如圖10-35所示。圖10-34設(shè)置“煙花球”的漸變填充顏色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個(gè)圖層，從上到下依次命名為“AS”、“尾2”、“球2”、“尾1”、“球1”。

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

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

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

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

stop();

“拖尾煙花MC”影片剪輯元件時(shí)間軸布局如圖10-38所示。圖10-37圖像的位置注冊(cè)點(diǎn)

注冊(cè)點(diǎn)

第1幀

第30幀

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

(9)按Enter鍵預(yù)覽“拖尾煙花MC”影片剪輯動(dòng)畫(huà)效果，兩顆煙花先后向上快速移動(dòng)，產(chǎn)生拖尾效果。

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

i=1;

//隨機(jī)生成顏色值R、G、B

R=random(256);

G=random(256);

B=random(256);

//使用while語(yǔ)句復(fù)制60顆“拖尾煙花MC”影片剪輯實(shí)例“fire”+i，生成一個(gè)禮花彈

while(i<=60){

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

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

//使用移位運(yùn)算對(duì)Color對(duì)象NC設(shè)置不同的RGB顏色

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

//隨機(jī)設(shè)置實(shí)例“fire”+i的旋轉(zhuǎn)角度和大小

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)返回主場(chǎng)景，創(chuàng)建3個(gè)圖層，并將它們從上到下依次命名為“AS”、“煙花”、“背景”。在“背景”圖層的第1幀上導(dǎo)入“城市夜景”素材圖片；在“煙花”圖層的第1幀上引用“禮花彈MC”元件，給元件實(shí)例命名為“firefire”；在“AS”圖層的第1幀上添加動(dòng)作腳本：

this.firefire._visible=true;

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

setInterval(fireegg,200);

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

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

functionfireegg(){

//復(fù)制實(shí)例"firefire"，并把生成對(duì)象"firefire"+i隨機(jī)放在舞臺(tái)的上方

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

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

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

i++;

//if語(yǔ)句用來(lái)控制禮花彈的個(gè)數(shù)，最多為5個(gè)

if(i>=4){

i=0;

}

}

this.firefire._visible=false;

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

(12)輸出測(cè)試動(dòng)畫(huà)效果。

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

案例拓展

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

案例展示與任務(wù)

運(yùn)用Flash動(dòng)作腳本，制作Loading動(dòng)畫(huà)顯示動(dòng)畫(huà)的加載過(guò)程及預(yù)載信息提示，如圖10-39所示。本實(shí)例的最終效果參見(jiàn)隨書(shū)光盤(pán)中“第10章/案例6/預(yù)載動(dòng)畫(huà).fla”文檔。

圖10-39預(yù)載動(dòng)畫(huà)

設(shè)計(jì)分析

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

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

操作步驟

(1)新建文檔，設(shè)置文檔尺寸為800×600像素，12fps，保存文檔，命名為“預(yù)載動(dòng)畫(huà).fla”。

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

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

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

圖10-40loading動(dòng)畫(huà)

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

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

stop();

說(shuō)明：進(jìn)度條必須做成100幀的影片剪輯，因?yàn)檫M(jìn)度條是按下載進(jìn)度的百分比跳轉(zhuǎn)到指定的幀上實(shí)現(xiàn)動(dòng)畫(huà)效果的。圖10-41進(jìn)度條動(dòng)畫(huà)

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

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

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

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

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

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

圖10-46雪花圖10-47雪花飄落動(dòng)畫(huà)

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

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

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

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

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

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

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

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

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

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

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

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

(23)返回“預(yù)載場(chǎng)景”，新建6個(gè)圖層。將7個(gè)圖層從上到下依次命名為“ACTION”、“按鈕”、“楓樹(shù)”、“動(dòng)態(tài)框”、“LOAD”、“進(jìn)度條”、“背景”。

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

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

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

(27)在“動(dòng)態(tài)框”圖層的第1幀上輸入圖10-39所示的靜態(tài)文字，在文字右邊創(chuàng)建動(dòng)態(tài)文本框。打開(kāi)“屬性”面板，在“var”輸入框中輸入變量名，其對(duì)應(yīng)關(guān)系如圖10-56所示。圖10-56動(dòng)態(tài)文本框與其變量的對(duì)應(yīng)關(guān)系(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";

//下載進(jìn)度百分比

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

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

//已用下載時(shí)間

timeused=getTimer();

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

//下載速度

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

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

//需要的總時(shí)間

timetotal=totalb/speed;

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

//還需要下載的時(shí)間

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

//進(jìn)度條按百分比值跳轉(zhuǎn)到指定的幀上

loadmc.gotoAndStop(per);

在第2幀上添加腳本：

//判斷動(dòng)畫(huà)是否加載完畢，如果加載完，跳到等待播放畫(huà)面，否則回到信息提示畫(huà)面

if(loadb==totalb){

gotoAndPlay("play");

}else{

gotoAndPlay(1);

}

在第220幀上添加腳本：

stop();

(29)測(cè)試動(dòng)畫(huà)，下載信息提示畫(huà)面沒(méi)有顯示，只顯示了等待播放畫(huà)面。這是因?yàn)樵诒镜貦C(jī)上速度很快。為了觀察動(dòng)畫(huà)預(yù)載效果，可在測(cè)試窗口中選擇一個(gè)較低的下載速度，例如“56K”，然后執(zhí)行【視圖】→【模擬下載】命令，即可觀察到在此網(wǎng)絡(luò)環(huán)境下動(dòng)畫(huà)的預(yù)載過(guò)程。

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

案例拓展

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

案例10-7：FlashMTV——飄雪

案例展示與任務(wù)

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

圖10-61飄雪畫(huà)面之五圖10-62飄雪畫(huà)面之六

設(shè)計(jì)分析

FlashMTV的制作是一個(gè)比較大的項(xiàng)目，不是一天兩天就能完成的，前期的準(zhǔn)備工作尤為重要。準(zhǔn)備工作大致包括四個(gè)步驟：

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

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

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

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

前面的準(zhǔn)備工作做好之后，就是具體的動(dòng)畫(huà)制作。本例采用本章“案例10-6”的Loading動(dòng)畫(huà)做預(yù)載動(dòng)畫(huà)，一共需要兩個(gè)場(chǎng)景，一個(gè)場(chǎng)景用來(lái)放Loading動(dòng)畫(huà)，另一個(gè)場(chǎng)景做歌曲動(dòng)畫(huà)。預(yù)載動(dòng)畫(huà)的制作方法不再贅述，歌曲畫(huà)面的制作要點(diǎn)是歌詞與音樂(lè)的同步問(wèn)題。

制作步驟

1．音樂(lè)素材準(zhǔn)備和前期處理

1)選擇音樂(lè)的格式

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

如果導(dǎo)入MP3音樂(lè)失敗，說(shuō)明音樂(lè)格式不是標(biāo)準(zhǔn)的MP3音頻格式。Flash支持的采樣頻率是44.1kHz、22.05kHz、11.025kHz。如果要求較高的音質(zhì)效果，可以選擇較高的采樣頻率。一般來(lái)說(shuō)，選用采樣頻率22.05kHz、采樣位數(shù)16位，立體聲的音頻格式，