（中職）flash-cs6動畫制作案例教第7章　網(wǎng)站動畫制作課件

1、YCF正版可修改PPT（中職）flash_cs6動畫制作案例教第7章網(wǎng)站動畫制作ppt課件第7章網(wǎng)站動畫制作【課程導(dǎo)入】 導(dǎo)入案例:基本網(wǎng)站導(dǎo)航 導(dǎo)入案例:簡單組合菜單 拓展案例:樓盤介紹菜單7.1導(dǎo)入案例:基本網(wǎng)站導(dǎo)航7.1.1制作要點(diǎn)首先為影片剪輯元件設(shè)置實(shí)例名稱,再利用ActionScript腳本控制影片剪輯元件的播放。7.1.2制作步驟(1)新建一個(gè)尺寸為51063像素,背景為白色的文檔。(2)新建“名稱”為“橢圓”的圖形元件,使用“橢圓工具”,設(shè)置“筆觸顏色”為“無”,“填充顏色”為“#bce1f9”,在場景中繪制正圓。利用同樣的方法在場景中繪制其他圓,如圖712所示。(3)新建“名

2、稱”為“首頁動畫”的影片剪輯元件,選擇“文本工具”,在“屬性”面板上進(jìn)行設(shè)置。在場景中輸入文本,并將文本分離成圖形。將文本轉(zhuǎn)換成“名稱”為“首頁”的圖形元件。(4)在第10幀位置插入關(guān)鍵幀,在“屬性”面板上進(jìn)行設(shè)置。使用“任意變形工具”將元件等比例擴(kuò)大,設(shè)置第1幀上的“補(bǔ)間類型”為“傳統(tǒng)補(bǔ)間”。(5)在第5幀位置插入關(guān)鍵幀,使用“任意變形工具”將元件等比例擴(kuò)大并調(diào)整位置。在第25幀位置插入幀,新建“圖層2”,在第5幀位置插入關(guān)鍵幀,將“橢圓”元件從庫中拖入場景中,使用“任意變形工具”將元件等比例縮小并旋轉(zhuǎn)。(6)在第20幀位置插入關(guān)鍵幀,使用“任意變形工具”將元件等比例擴(kuò)大。設(shè)置第5幀上的“補(bǔ)

3、間類型”為“傳統(tǒng)補(bǔ)間”,將“圖層2”拖動到“圖層1”的下面。(7)根據(jù)“圖層2”的制作方法制作出“圖層3”。在“圖層1”上新建“圖層4”,使用“矩形工具”,設(shè)置“筆觸顏色”為“無”,“填充顏色”為“0%”的“#cbcbcb”,在場景中繪制圖形。新建“圖層5”,在第25幀位置插入關(guān)鍵幀,分別選擇第1幀和第25幀,依次在“動作”面板中輸入“stop();”腳本。(8)根據(jù)“首頁動畫”元件的制作方法,制作出“活動內(nèi)容動畫”、“活動獎(jiǎng)品動畫”、“填寫資料動畫”和“互聯(lián)網(wǎng)公證”元件。(9)返回“場景1”的編輯狀態(tài),導(dǎo)入背景圖片到舞臺中。新建“圖層2”,將“首頁動畫”元件從庫中拖入場景中。設(shè)置“實(shí)例名稱”

4、為“a1”,并在“動作”面板中輸入腳本。(10)根據(jù)“圖層2”的制作方法,制作出“圖層3”“圖層6”。(11)至此,基本網(wǎng)站導(dǎo)航的動畫制作完成,測試滿意后保存文件。7.2導(dǎo)入案例:簡單組合菜單7.2.1制作思路(1)導(dǎo)入背景素材,然后填充半透明的反射漸變。(2)使用傳統(tǒng)補(bǔ)間動畫來控制菜單并加入聲音素材。(3)使用程序來控制菜單。7.2.2制作步驟(1)新建一個(gè)尺寸為600300像素的空白文檔,然后導(dǎo)入背景素材。接著按“F8”鍵將其轉(zhuǎn)換為圖形元件,最后進(jìn)入該元件的編輯區(qū)域。(2)新建一個(gè)圖層,并命名為“高光”,使用“矩形工具”繪制一個(gè)與舞臺大小相同的矩形,然后設(shè)置填充類型為“徑向漸變”,第1個(gè)色

5、標(biāo)顏色為“R:0,G:0,B:0”,“Alpha”值為“0%”;第2個(gè)色標(biāo)顏色為“R:0,G:0,B:0”。(3)新建圖層,并命名為“按鈕”,然后使用“矩形工具”繪制一個(gè)大小合適的矩形,設(shè)置填充類型為“線性漸變”,第1個(gè)色標(biāo)顏色為“R:112,G:225,B:0”,第2個(gè)色標(biāo)顏色為“R:46,G:93,B:0”,第3個(gè)色標(biāo)顏色為“R:112,G:225,B:0”。(4)使用“線條工具”繪制一條直線,然后設(shè)置填充類型為“線性漸變”,第1個(gè)色標(biāo)顏色為“R:112,G:225,B:0”,第2個(gè)色標(biāo)顏色為“R:230,G:220,B:241”,第3個(gè)色標(biāo)顏色為“R:112,G:225,B:0”。最后復(fù)

6、制一份線條到左側(cè)。(5)使用“矩形工具”繪制一個(gè)矩形高光區(qū)域,然后設(shè)置填充類型為“線性漸變”,第1個(gè)色標(biāo)顏色為“R:225,G:225,B:225”,“Alpha”值為“20%”;第2個(gè)色標(biāo)顏色為“R:225,G:225,B:225”,“Alpha”值為“80%”。(6)選中按鈕所在部分,按“Ctrl+G”組合鍵將其組合在一起,然后按“F8”鍵將其轉(zhuǎn)換為按鈕元件,雙擊此元件進(jìn)入其編輯區(qū)域,然后在“指針經(jīng)過”、“按下”、“點(diǎn)擊”幀中插入關(guān)鍵幀,并在各幀上繪制出圖形。(7)將“指針經(jīng)過”幀中的圖形轉(zhuǎn)換為影片剪輯,進(jìn)入該影片剪輯的編輯區(qū)域,創(chuàng)建一個(gè)由完全不透明到完全透明的傳統(tǒng)補(bǔ)間動畫。(8)返回按鈕

7、元件編輯區(qū)域,新建一個(gè)“聲音”圖層,在“指針經(jīng)過”和“按下”幀中插入關(guān)鍵幀,然后按“Ctrl+R”組合鍵導(dǎo)入音頻文件,再將其分別添加到按鈕的“指針經(jīng)過”和“按下”幀中。(9)返回“場景1”,然后復(fù)制3個(gè)按鈕。(10)新建一個(gè)“文字”圖層,然后創(chuàng)建4個(gè)靜態(tài)文本對象。(11)將4個(gè)靜態(tài)文本對象轉(zhuǎn)換為影片剪輯(名稱為“ButtonText”),然后在庫中選中3個(gè)元件,并分別為其添加元件類。(12)新建一個(gè)AS圖層,編寫代碼來創(chuàng)建4個(gè)按鈕對象,并組合成一個(gè)菜單所需的按鈕。(13)最后創(chuàng)建按鈕文字,并設(shè)置其精確位置。(14)至此,完成菜單制作,測試滿意后保存即可。7.3拓展案例:樓盤介紹菜單7.3.1制

8、作思路本實(shí)例使用腳本、傳統(tǒng)補(bǔ)間制作關(guān)于樓盤介紹的菜單導(dǎo)航動畫。實(shí)現(xiàn)使用腳本控制鼠標(biāo)跟隨的效果。7.3.2制作步驟(1)新建一個(gè)尺寸為244375像素,幀頻為40,背景顏色為白色的空白文檔。(2)將準(zhǔn)備好的素材導(dǎo)入場景中。在第45幀位置插入關(guān)鍵幀,新建“名稱”為“小草”的圖形元件,將準(zhǔn)備好的圖像導(dǎo)入舞臺中。(3)新建“名稱”為“小草動畫”的影片剪輯元件,將“小草”元件從庫中拖入場景,在第10幀位置插入關(guān)鍵幀。(4)設(shè)置第1幀上的元件的“Alpha”值為“0%”,并創(chuàng)建傳統(tǒng)補(bǔ)間動畫。設(shè)置“屬性”面板。新建“圖層2”,在第10幀位置插入關(guān)鍵幀,輸入“stop();”腳本。(5)新建“名稱”為“圓”的

9、圖形元件,使用“橢圓工具”,在“屬性”面板中設(shè)置“填充顏色”為“#f13a77”,繪制圓形。(6)新建“名稱”為“圓動畫”的影片剪輯元件,將“圓”元件從庫中拖入場景,在第25幀位置插入關(guān)鍵幀,設(shè)置第1幀上的元件的“Alpha”值為“0%”,并創(chuàng)建傳統(tǒng)補(bǔ)間動畫。新建“圖層2”,在第25幀位置插入關(guān)鍵幀,并在“動作”面板中輸入腳本“stop();”。(7)新建“名稱”為“按鈕動畫”的按鈕元件,在“指針經(jīng)過”狀態(tài)下插入關(guān)鍵幀,將“小草動畫”元件從庫中拖入場景,在“點(diǎn)擊”狀態(tài)下插入空白關(guān)鍵幀,繪制反應(yīng)區(qū)。(8)新建“名稱”為“項(xiàng)目簡介”的影片剪輯元件,將準(zhǔn)備好的圖像素材導(dǎo)入舞臺中。(9)新建“圖層2”,選擇“文本工具”,在“屬性”面板中設(shè)置各項(xiàng)參數(shù),輸入文字。(10)新建“圖層3”,選擇“文本工具”,在“屬性”面板中設(shè)置各項(xiàng)參數(shù),輸入文字。(11)新建“圖層4”,將“按鈕動畫”元件從庫中拖入場景。使用相同的方法制作其他元件。(12)返回“場景1”,新建“圖層2”,將“項(xiàng)目簡介”元件從庫中拖入場景。在第5幀位置插入關(guān)鍵幀,設(shè)置第