《Flash CS6案例教程》模塊08 開場和片頭動畫

模塊08開場和片頭動畫你知道嗎？

很多網(wǎng)站在進入正式的主頁之前讀會有一段絢麗的片頭，這不僅可以吸引瀏覽者的注意力，而且可以推廣企業(yè)品牌，通過片頭動畫展示更多的信息，從而達到廣告宣傳的目的。我們可以針對Flash動畫不同種類的片頭動畫，進行設(shè)計與制作。學(xué)習(xí)目標(biāo)了解開場和片頭動畫的特點掌握設(shè)計開場和片頭動畫的基本步驟掌握開場和片頭動畫的制作技巧項目任務(wù)8-1開場動畫——游樂場開場動畫

動畫概述：本案例主要向讀者講述了一種開場動畫的制作方法和技巧，在制作開場動畫時，不需要將動畫制作得過于復(fù)雜，能夠凸顯主題讓瀏覽者能看懂動畫所表達的意思即可?！坝螛穲鲩_場”動畫播放后，主頁面如圖所示。（1）選擇“文件”→“新建”菜單選項，選擇“ActionScript2.0”選項，新建一個Flash文檔，命名為“8-游樂場開場”。打開“屬性”面板，修改“舞臺大小”為980px*619px。（2）執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到舞臺”命令，將外部的素材圖片導(dǎo)入到舞臺中。在“庫”面板中，新建文件夾并命名為“素材圖”，以備后續(xù)使用。（3）將“藍天”和“草地”圖片拖入舞臺中，按【F8】鍵轉(zhuǎn)換為圖形元件，使用“對齊”面板將元件與舞臺對齊，鎖定圖層。項目任務(wù)8-1開場動畫——游樂場開場動畫（4）新建“過山車”圖層，在第9幀位置插入關(guān)鍵幀，從“庫”面板中將“過山車”影片剪輯元件拖入舞臺中，并調(diào)整元件到合適的位置。在第17幀位置插入關(guān)鍵幀，選擇“任意變形工具”將元件等比例放大，在第22幀位置插入關(guān)鍵幀，將元件縮小，如圖所示。分別在3個關(guān)鍵幀間創(chuàng)建傳統(tǒng)補間。（5）新建“小過山車”影片剪輯元件。進入元件編輯狀態(tài)。從“庫”面板將“小過山車”圖形元件拖入工作區(qū)，在“屬性”面板中修改元件Alpha值為0%。選擇圖層1，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加傳統(tǒng)運動引導(dǎo)層”命令。在引導(dǎo)層的第1幀，使用“鋼筆工具”繪制一條和過山車車道重合的曲線，在第230幀處插入幀。然后將曲線的頂端對準(zhǔn)圖形的中心點，在圖層1的第55幀插入關(guān)鍵幀，將“小過山車”元件拖拽到曲線的最高處，在“屬性”面板設(shè)置元件樣式為無，使用“任意變形工具”旋轉(zhuǎn)一定角度，創(chuàng)建傳統(tǒng)補間動畫。同樣在圖層1的第100幀位置插入關(guān)鍵幀，移動元件至曲線的末端，旋轉(zhuǎn)元件角度，創(chuàng)建傳統(tǒng)補間動畫。選擇圖層1，在第135幀處插入關(guān)鍵幀，選中第1幀到100幀，按住【Alt】鍵復(fù)制其到第136幀后。項目任務(wù)8-1開場動畫——游樂場開場動畫（6）使用“過山車”影片剪輯元件相同的制作方法，分別制作出“小房子”、“小島”、“海盜船”、“滑梯”、和“海洋館”元件的動畫效果。制作好的時間軸面板如圖所示。（7）新建“煙花飄落”影片剪輯元件，使用繪圖工具繪制出煙花的圖形效果，如圖8-4所示，按【F8】鍵將其轉(zhuǎn)換為“煙花”圖形元件。分別第10、27、45和56幀處插入關(guān)鍵幀，調(diào)整元件透明度和位置，創(chuàng)建傳統(tǒng)補間，制作出煙花四散的動畫效果。新建“煙花1”影片剪輯元件，將“煙花飄落”元件拖入舞臺中，在“屬性”面板為其設(shè)置實例名稱“isk1”，新建AS圖層，添加如圖8-5所示的腳本代碼，用以復(fù)制“煙花飄落”元件以及飄落方向。新建“煙花2”影片剪輯元件，分別新建6個圖層，在不同的幀處插入關(guān)鍵幀，拖入“煙花1”元件，并在“屬性”面板中設(shè)置“色彩效果”中的高級選項，為元件添加不同的色彩效果。（8）返回主場景中，新建“煙花”圖層，在第40幀位置插入空白關(guān)鍵幀，拖入“煙花2”，并調(diào)整元件到合適的位置。項目任務(wù)8-1開場動畫——游樂場開場動畫（9）分別新建“遮罩”圖層和“雕塑”圖層。在第35幀位置插入空白關(guān)鍵幀，從“庫”面板中拖入“遮罩圖”和“雕塑”影片剪輯元件放入兩個圖層，為“遮罩圖”創(chuàng)建傳統(tǒng)補間動畫，選中圖層，單擊右鍵勾選“遮罩層”命令。（10）新建“兒童21”影片剪輯元件，分別在第1幀和第8幀插入關(guān)鍵幀，拖入如圖所示的小孩元件，在第15幀插入幀，制作小孩奔跑的動畫效果。新建“兒童22”影片剪輯元件，將“兒童21”元件拖入舞臺，在第80幀插入關(guān)鍵幀，將元件向右移動一段距離，并使用“任意變形工具”將其等比例放大，創(chuàng)建傳統(tǒng)補間。在第81幀插入關(guān)鍵幀，拖入如圖所示圖形元件。新建AS圖層，在第81幀插入關(guān)鍵幀，并輸入停止腳本。（11）新建“小信使”影片剪輯元件，使用引導(dǎo)動畫與傳統(tǒng)補間動畫的制作原理，制作出“小信使”動畫，引導(dǎo)線如圖所示。項目任務(wù)8-1開場動畫——游樂場開場動畫（12）分別新建“兒童1”、“兒童2”和“小信使”圖層，將對應(yīng)的影片剪輯元件拖入舞臺中，調(diào)整大小及位置。（13）新建“導(dǎo)航欄”圖層，將“導(dǎo)航欄”背景圖片拖入舞臺中，并調(diào)整到合適的位置。新建“導(dǎo)航欄目”圖層，使用“文本工具”分別輸入5個導(dǎo)航文本，使用“對齊”面板排列整齊。打開“庫”面板，將“點擊”影片剪輯元件拖入舞臺，覆蓋在導(dǎo)航文字上方，并分別打開“動作”面板，輸入腳本語言——點擊跳轉(zhuǎn)。（14）新建“icon”和“title”圖層，分別拖入游樂園標(biāo)志和名稱。新建AS圖層，在最后一幀插入關(guān)鍵幀，打開“動作”面板輸入停止腳本。（15）保存文件后，按組合鍵【Ctrl+Enter】測試動畫效果。項目任務(wù)8-2片頭動畫——旅游網(wǎng)站片頭動畫

動畫概述：本案例講述了一個商業(yè)宣傳片頭動畫的制作，首先完成所需元件的制作，然后利用遮罩等動畫形式，將相應(yīng)的素材和元件拖入場景中，完成相應(yīng)動畫效果的制作，凸顯主題即可。“旅游網(wǎng)站片頭”動畫播放后，主頁面如圖所示。（1）選擇“文件”→“新建”菜單選項，選擇“ActionScript3.0”選項，新建一個Flash文檔，命名為“8-旅游網(wǎng)站片頭”。打開“屬性”面板，修改“舞臺大小”為760px*450px，背景顏色為灰色。（2）將圖層1更名為“音樂”，選擇第1幀，在“屬性”面板中設(shè)置聲音“名稱“為music，“同步”為“事件”，然后在第370幀按【F5】延長幀，控制動畫總長度。項目任務(wù)8-2片頭動畫——旅游網(wǎng)站片頭動畫（3）新建“背景”圖層，沿著舞臺繪制一個比舞臺略大的灰色矩形，并轉(zhuǎn)換為圖形元件“bg”。在第32幀插入關(guān)鍵幀，將第1幀實例的“亮度”設(shè)置為-100%，然后在這兩個關(guān)鍵幀之間創(chuàng)建傳統(tǒng)補間，制作背景逐漸顯示的動畫效果。（4）執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到庫”命令將兩張背景圖片導(dǎo)入，分別轉(zhuǎn)換為圖形元件“樹林”和“湖泊”。新建“畫面1”圖層，在第32幀插入關(guān)鍵幀，將“樹林”元件拖入舞臺，并調(diào)整元件位置。新建mask圖層，將如圖所示的mask圖形元件拖入舞臺，并對齊到舞臺中心。（5）在畫面1圖層的第48、65幀插入關(guān)鍵幀，將舞臺上的實例向左移動，在兩個關(guān)鍵幀之間創(chuàng)建傳統(tǒng)補間，制作“樹林”的移動動畫。然后選擇mask圖層，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“遮罩層”命令，讓mask圖層對“畫面1”圖層進行遮罩。（6）單擊mask圖層右側(cè)的“輪廓”圖標(biāo)，只顯示mask圖層的輪廓。新建“樹1”和“樹2”圖層，在第32幀處插入關(guān)鍵幀，將tree1和tree2拖入相應(yīng)圖層并轉(zhuǎn)換為圖形元件“樹1”和“樹2”，擺放在舞臺的適當(dāng)位置處。項目任務(wù)8-2片頭動畫——旅游網(wǎng)站片頭動畫

（7）在“樹1”圖層的第53幀插入關(guān)鍵幀，將實例向右移動，并設(shè)置第32幀實例的Alpha值為50%，然后在兩個關(guān)鍵幀之間創(chuàng)建傳統(tǒng)補間，制作“樹1”的移動顯示動畫。使用相同的方法，制作實例“樹2”的顯示動畫。（8）新建“點飛”影片剪輯元件，使用“鉛筆工具”繪制引導(dǎo)路徑，如圖所示。選擇“橢圓工具”，繪制一個無邊框白色圓點，轉(zhuǎn)換為“圓點”圖形元件，使元件中心點對齊引導(dǎo)線首端。在第100幀插入關(guān)鍵幀，將“圓點”拖至引導(dǎo)線末端。新建“點集合”影片剪輯元件，分別新建5個圖層，分5次將“點飛”元件拖入舞臺中，調(diào)整元件位置為離散分布，在第12、65幀處插入關(guān)鍵幀，修改第1幀和第65幀處的元件Alpha值為0%，分別創(chuàng)建傳統(tǒng)補間。在圖層6最后一幀插入關(guān)鍵幀，打開“動作”面板輸入停止腳本。（9）新建“t1”影片剪輯元件，利用逐幀動畫的制作原理，制作出文字——綠水青山青山綠水跳躍出場的動畫效果，如圖所示。新建“t1”和“裝飾點”圖層，分別將“t1”和“點集合”元件拖入舞臺適當(dāng)位置處。項目任務(wù)8-2片頭動畫——旅游網(wǎng)站片頭動畫（10）制作轉(zhuǎn)場動畫。分別在“畫面1”、“樹1”和“t1”圖層的第140-153幀之間創(chuàng)建實例淡出動畫。新建“畫面2”圖層，在第140幀插入關(guān)鍵幀，從“庫”面板中將“湖泊”圖形元件拖入舞臺。在第153幀處插入關(guān)鍵幀，將實例向右稍作移動，并在第140幀實例Alpha值設(shè)置為0%。在兩幀之間創(chuàng)建傳統(tǒng)補間，制作“湖泊”淡入動畫。（11）新建“樹枝”圖層，拖入元件“樹枝”，采用相同的方法，制作樹枝淡入動畫。在“畫面2”圖層的第170、185、210幀插入關(guān)鍵幀，分別為這3個關(guān)鍵幀處的實例添加“模糊”濾鏡并逐一向下方移動，“模糊X”和“模糊Y”依次設(shè)置為3px、5px和10px。在3幀間創(chuàng)建傳統(tǒng)補間，制作畫面移動并模糊的動畫效果。（12）新建“蝴蝶”圖層，在第140幀插入關(guān)鍵幀，將元件“蝴蝶”拖入舞臺右下方。在時間軸上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“創(chuàng)建補間動畫”命令，然后選擇第170幀，將蝴蝶移動至遮罩范圍內(nèi)，選擇第185幀，將蝴蝶移至樹枝上。這樣就制作好蝴蝶飛入畫面的動畫。項目任務(wù)8-2片頭動畫——旅游網(wǎng)站片頭動畫（13）新建“畫面3”圖層，在第260幀位置插入關(guān)鍵幀，將元件“bg2”拖入舞臺中心。在第270幀插入關(guān)鍵幀，將第260幀實例的Alpha值設(shè)置為0%，在兩幀間創(chuàng)建傳統(tǒng)補間，制作畫面3的顯示動畫。（14）新建“t2”影片剪輯元件，制作文字遮罩動畫，時間軸面板如圖所示。（15）新建t2圖層，將元件t2拖入舞臺，在屬性面板中設(shè)置循環(huán)選項為播放一次。在mask圖層上方新建t3和t4圖層，分別將文本——“聽說”和“旅游休閑”拖入舞臺，擺放在畫面的左側(cè)，并分別制作兩個文本的顯示動畫，最終效果如圖所示。（16）新建AS圖層，在第370幀插入關(guān)鍵幀，在“動作”面板輸入停止腳本。（17）保存文件后，按組合鍵【Ctrl+Enter】測試動畫效果，如圖所示。項目任務(wù)8-3片頭動畫——個人網(wǎng)站片頭動畫

動畫概述：本案例首先導(dǎo)入相應(yīng)的素材圖片，再利用補間動畫制作相應(yīng)的按鈕元件，回到場景中將制作好的元件一次拖入場景中，放置在相應(yīng)的位置上，完成最終的動畫制作?！皞€人網(wǎng)站片頭”動畫播放后，主頁面如圖所示。（1）選擇“文件”→“新建”菜單選項，選擇“ActionScript2.0”選項，新建一個Flash文檔，命名為“8-個人網(wǎng)站開頭”。打開“屬性”面板，修改“舞臺大小”為700px*500px，設(shè)置幀頻為20。

（2）執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到舞臺”命令，將外部的一張素材圖片導(dǎo)入到舞臺中，在第115幀位置插入幀。執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到庫”命令，將外部多個聲音文件同時導(dǎo)入到庫中。（3）新建圖層2，在第10幀位置插入空白關(guān)鍵幀，單擊工具箱內(nèi)的“矩形工具”，設(shè)置筆觸為無，填充為白色，在舞臺中繪制一個矩形，選中矩形，按【F8】鍵將其轉(zhuǎn)換為圖形元件，命名為“白矩形”。打開“屬性”面板，設(shè)置該元件Alpha值為50%。項目任務(wù)8-3片頭動畫——個人網(wǎng)站片頭動畫選擇時間軸上的第10幀，在“屬性”面板的聲音“名稱”下拉列表中選擇相應(yīng)的聲音文件。在第15幀位置插入關(guān)鍵幀，調(diào)整該幀上元件的位置，在“屬性”面板中修改其樣式為無。在兩個關(guān)鍵幀間創(chuàng)建傳統(tǒng)補間。（4）使用相同方法，制作圖層3上“bg”圖形元件的動畫效果和圖層4上“飛機”圖形元件的動畫效果。（5）新建“反應(yīng)區(qū)”按鈕元件，進入元件編輯區(qū)。在“指針經(jīng)過”幀，插入關(guān)鍵幀，打開“屬性”面板設(shè)置聲音。在“按下”幀位置插入空白關(guān)鍵幀，在“點擊”幀位置插入關(guān)鍵幀，單擊工具箱內(nèi)的“矩形工具”，在舞臺中繪制一個無邊框矩形。（6）新建“我的日記”影片剪輯元件。將外部的一張素材圖像導(dǎo)入到舞臺中，轉(zhuǎn)換為圖形元件。在第20幀位置插入關(guān)鍵幀，在第10幀位置插入關(guān)鍵幀，調(diào)整第10幀上元件的位置，并且在第5幀和第10幀位置分別創(chuàng)建傳統(tǒng)補間動畫。新建圖層2，從“庫”面板中將“反應(yīng)區(qū)”元件拖入舞臺中，并且調(diào)整元件到合適的位置，使用“任意變形工具”，調(diào)整元件到合適的大小。選中該按鈕元件，打開“動作”面板，在按鈕元件上添加相應(yīng)的腳本代碼，如圖所示。新建圖層3，在第10幀和第20幀的位置插入關(guān)鍵幀，打開“動作”面板，分別在第1、10和20幀添加停止腳本“stop();”，時間軸如圖所示。項目任務(wù)8-3片頭動畫——個人網(wǎng)站片頭動畫（7）使用相同的制作方法，制作出其他的影片剪輯元件——“好友留言”、“關(guān)于我”、“設(shè)計窗”、“鏈接”、“未來”、“享受”和“愛你”。（8）返回主場景，新建圖層5，在第40幀位置插入關(guān)鍵幀，在“庫”面板中將“我的日記”元件拖入到舞臺中，并調(diào)整該元件到合適位置，在“屬性”面板中修改元件Alpha值為30%。在第50幀位置插入關(guān)鍵幀，調(diào)整該幀上元件的位置，并在“屬性”面板中修改元件樣式為無。在兩個關(guān)鍵幀間創(chuàng)建傳統(tǒng)補間。（9）使用相同的制作方法，制作出圖層6—圖層12的動畫效果，制作完成的時間軸面板如圖所示。（10）新建圖層13，在第35幀位置插入關(guān)鍵幀，打開“屬性”面板，設(shè)置該幀上的聲音文件。（11）新建圖層14，在第115幀位置插入關(guān)鍵幀，在“動作”面板中輸入停止腳本“stop();”。（12）保存文件后，按組合鍵【Ctrl+Enter】測試動畫效果。項目任務(wù)8-4開場動畫——家居開場動畫

動畫概述：本案例主要利用遮罩加上圖片的淡入效果完成開場動畫的制作。在制作過程中需要注意的是遮罩的變化和間隔的時間，案例效果如圖所示。（1）選擇“文件”→“新建”菜單選項，選擇“ActionScript2.0”選項，新建一個Flash文檔，命名為“8-家居開場動畫”。打開“屬性”面板，修改“舞臺大小”為555px*425px。（2）在第30幀位置插入關(guān)鍵幀，將素材圖片導(dǎo)入舞臺中。按【F8】鍵將其轉(zhuǎn)換為圖形元件，設(shè)置其Alpha值為0%。在第40幀插入關(guān)鍵幀，使用“任意變形工具”將元件等比例放大，并在“屬性”面板修改其Alpha值為70%。在第45幀插入關(guān)鍵幀，使用“任意變形工具”將元件等比例縮小，并修改其“顏色”樣式為無。為第30幀和第40幀添加“補間形狀”，在第1050幀插入幀，控制動畫長度。（3）新建圖層2，利用傳統(tǒng)補間動畫的制作原理，制作“圓動畫”影片剪輯元件。在第47幀處插入空白關(guān)鍵幀。新建圖層3，在第97幀插入幀，將素材圖片pic1導(dǎo)入舞臺中。在第256幀插入空白關(guān)鍵幀，使用“橢圓工具”在場景中繪制正圓，并將其轉(zhuǎn)換為名稱為“圓”的圖形元件。項目任務(wù)8-4開場動畫——家居開場動畫（4）分別在第130、145幀處插入關(guān)鍵幀，選擇第145幀上的元件，使用“任意變形工具”將元件放大，為第97幀和第130幀創(chuàng)建傳統(tǒng)補間，在第256幀插入空白關(guān)鍵幀，