（中職）電子商務(wù)網(wǎng)頁設(shè)計項目九 使用Flash制作網(wǎng)頁中的動畫課件

1、YCF正版可修改PPT（中職）電子商務(wù)網(wǎng)頁設(shè)計項目九 使用Flash制作網(wǎng)頁中的動畫ppt課件Flash CS5的工作界面1任務(wù)分析通過對Flash軟件的學(xué)習(xí),了解Flash動畫的應(yīng)用領(lǐng)域、特點、創(chuàng)作流程,以及掌握啟動和退出Flash CS5的方法,并認(rèn)識Flash CS5的工作界面,用這個軟件制作一些簡單廣告動畫。相關(guān)知識1.Flash動畫的應(yīng)用領(lǐng)域Flash動畫被廣泛應(yīng)用于網(wǎng)頁設(shè)計、網(wǎng)頁廣告、網(wǎng)絡(luò)動畫、多媒體教學(xué)課件、游戲、企業(yè)宣傳、產(chǎn)品展示和電子相冊等領(lǐng)域。2.Flash動畫的特點(1)制作簡單:Flash動畫的制作相對比較簡單,擁有一臺電腦、一套軟件,并掌握一定的軟件知識就可以制作出簡

2、單的動畫。(2)存儲容量小和縮放時不失真:Flash動畫主要由矢量圖形組成,矢量圖形具有存儲容量小,并且在縮放時不失真的優(yōu)點。(3)交互性強:可以使用ActionScript語言為Flash動畫添加代碼,使動畫具有交互性。3.場景如果將Flash CS5動畫比作話劇,一個場景就是話劇的一幕,每一幕都有豐富的內(nèi)容、精彩的表演,結(jié)合起來就形成了一個完整的話劇。同樣,不同的場景結(jié)合起來也就形成了完整的Flash動畫。我們可以根據(jù)需要設(shè)置多個場景,并調(diào)整場景的順序。4.舞臺舞臺是展示、播放和控制動畫的地方。舞臺上顯示的內(nèi)容是當(dāng)前所選幀上的對象,可以在舞臺上為當(dāng)前幀創(chuàng)建所需要的內(nèi)容。舞臺的默認(rèn)顏色為白色

3、,因此動畫的背景色也就是白色。如果需要改變舞臺的背景顏色,可以到“文檔屬性”對話框中修改。5. Flash CS5的工具箱任務(wù)實施(1)單擊“開始”按鈕,在彈出的菜單中選擇“所有程序”“Adobe Flash Professional CS5”,或雙擊桌面上的圖標(biāo),即可啟動Flash CS5 。(2)打開Flash CS5的歡迎屏幕,單擊“ActionScript 3.0”或者“ActionScript 2.0”選項即可新建一個Flash文檔,并進(jìn)入Flash CS5的工作界面 。(3)進(jìn)入Flash CS5的工作界面后,可以看到其工作界面由標(biāo)題欄、菜單欄、文檔選項卡、工具箱、時間軸、舞臺和多

4、個控制面板組成 。(4)單擊“標(biāo)題欄”右側(cè)的“基本功能”下拉按鈕,可在展開的下拉列表中根據(jù)自己的需要選擇工作界面的外觀模式,例如切換到“傳統(tǒng)”外觀模式 。(5)如果在默認(rèn)的工作界面中找不到需要的面板,可以通過選擇“窗口”“面板名稱”菜單來打開它,例如打開“動作”面板 。(6)Flash會將某些性質(zhì)相似的面板放在同一面板組中,此時單擊面板組上方該面板的名稱標(biāo)簽,可在不同的面板之間切換 。(7)要將不需要的面板關(guān)閉,只需右鍵單擊該面板標(biāo)題,在展開的快捷菜單中選擇“關(guān)閉”選項即可;若選擇“關(guān)閉組”選項,可關(guān)閉同組的所有面板 。(8)在面板組處于圖標(biāo)狀態(tài)時,單擊某圖標(biāo)可展開相應(yīng)面板,再次單擊可折疊面板

5、 。Flash CS5基本操作介紹及使用實例2任務(wù)分析制作Flash動畫時,首先需要新建一個Flash文檔并設(shè)置文檔屬性。對于新手來說,要制作出Flash動畫,還需要簡單了解制作動畫的基本原理。本任務(wù)將帶領(lǐng)大家學(xué)習(xí)這些知識,并創(chuàng)建一個Flash動畫作品。相關(guān)知識1.時間軸面板時間軸用于組織和控制文檔內(nèi)容在一定時間內(nèi)播放的層數(shù)和幀數(shù)(就好比劇本),它決定了各個場景的切換及演員的出場、表演的時間順序。在Flash CS5中,圖層可以看成是透明膠片疊加在一起,并由此形成遮擋關(guān)系。上面圖層的內(nèi)容會遮擋下面圖層的內(nèi)容,只有通過其空白區(qū)域才能看到下面的圖層內(nèi)容。2.幀幀是動畫制作中的一個重要概念。它是組成

6、動畫的基本單位,一個動畫中可以包含多個幀。在Flash中,一個動畫可以由多個圖層構(gòu)成,每個圖層都具有一個獨立時間軸,并由多個幀構(gòu)成,圖層與幀共同決定了動畫的播放形式與時間。Flash中的幀可以分為:關(guān)鍵幀、空白關(guān)鍵幀、普通幀、過渡幀。3.庫面板庫面板用于存放和組織可重復(fù)使用的Flash動畫元件,包括在Flash中繪制的圖形對象和導(dǎo)入的聲音、位圖等文件。4.元件與實例任務(wù)實施(1)執(zhí)行“文件”“新建”菜單命令或按快捷鍵Ctrl+N,在彈出的“新建文檔”對話框中,選擇“ActionScript 3.0”選項,設(shè)置要創(chuàng)建的文檔類型,然后單擊“確定”按鈕 。(2)創(chuàng)建一個Flash文檔并進(jìn)入Flash

7、 CS5工作界面后,執(zhí)行“修改”“文檔”菜單命令,在“尺寸”編輯框中設(shè)置文檔的寬度和高度均為400像素,然后單擊“背景顏色”右側(cè)的色塊,在彈出的“拾色器”面板中單擊黃色,其他選項保持默認(rèn)設(shè)置不變,單擊“確定”按鈕 。(3)按住工具箱中的“矩形”工具不放,在展開的工具列表中單擊選擇“橢圓”工具,按快捷鍵Shift+Alt+F9打開“顏色”面板,設(shè)置顏色類型為徑向漸變,第一個色塊為#FFFFFF,第二個色塊為#00FF00。按住Shift鍵的同時,按住鼠標(biāo)左鍵并拖動,繪制出一個白色到綠色徑向漸變的正圓形 。(4)單擊“圖層1”的第1幀以選中舞臺中的圓形,然后按快捷鍵F8,在打開的“轉(zhuǎn)換為元件”對話

8、框中,輸入元件名稱為“小球”,元件類型設(shè)置為“圖形”,設(shè)置完畢后單擊“確定”按鈕 。同時庫面板中也保存該圖形元件 。(5)單擊“時間軸”面板的第50幀處選中該幀,然后按F5鍵在該處插入一個普通幀 。(6)右鍵單擊舞臺中的小球元件實例,從彈出的快捷菜單中選擇“創(chuàng)建補間動畫”,為該元件實例創(chuàng)建補間動畫。(7)選中“時間軸”面板第1幀,將播放頭轉(zhuǎn)到該幀,然后單擊工具箱中的“選擇”工具,將光標(biāo)移到舞臺中的小球元件實例上,按住鼠標(biāo)左鍵不動并向左上方拖動,將小球元件實例拖到舞臺外左側(cè)偏上的位置 。(8)單擊“時間軸”面板第25幀,將播放頭轉(zhuǎn)到該幀,然后使用“選擇”工具將小球元件實例移動到舞臺下方 。(9)

9、用以上的方法設(shè)置第50幀上的元件實例 。(10)在制作動畫過程中,按下Enter鍵可以測試動畫在時間軸上的播放效果,反復(fù)按Enter鍵可在暫停測試和繼續(xù)測試之間切換。執(zhí)行“控制”“測試影片”菜單命令,或按快捷鍵Ctrl+Enter,則可以在Flash Player播放器中預(yù)覽動畫 。(11)制作好小球跳動動畫后,按快捷鍵Ctrl+S,在彈出的“另存為”對話框中將文檔保存,文件名為“第一個Flash動畫.fla” 。(12)在文檔選項卡中單擊文件名右側(cè)的“關(guān)閉”按鈕關(guān)閉文檔。如果要打開以前保存的文檔進(jìn)行再次編輯,在工作界面執(zhí)行“文件”“打開”菜單命令,或按快捷鍵Ctrl+O,在“打開”對話框中選

10、擇要打開的文檔,單擊“打開”按鈕 。使用Flash CS5制作簡單動畫3相關(guān)知識1.按鈕元件 按鈕是人機進(jìn)行信息交互的基礎(chǔ),它對鼠標(biāo)單擊事件進(jìn)行響應(yīng)。按鈕可對按鈕靜止、將鼠標(biāo)指針移到按鈕上、按下鼠標(biāo)左鍵三種事件做出響應(yīng)。這三種事件對應(yīng)著按鈕的四種狀態(tài):彈起(按鈕靜止)、指針經(jīng)過(將鼠標(biāo)指針移動到按鈕上)、按下(按下按鈕)、點擊(定義按鈕響應(yīng)區(qū)域)。2.按鈕的創(chuàng)建(1)執(zhí)行“插入”“新建元件”菜單命令,彈出“創(chuàng)建新元件”對話框 。(2)單擊“確定”按鈕進(jìn)入按鈕編輯區(qū),時間軸中將出現(xiàn)按鈕的四個狀態(tài)幀 。3.動作腳本基本知識動作腳本就是Flash為我們提供的各種命令、運算符及對象。使用動作腳本時必須

11、將其附加在按鈕、影片剪輯或者幀上,從而使單擊按鈕和按下鍵盤之類的事件發(fā)生時觸發(fā)這些腳本,以便實現(xiàn)所需的交互性。4.動畫的基本類型(1)逐幀動畫。(2)補間動畫。(3)運動引導(dǎo)層動畫。(4)遮罩層動畫。5.圖層制作圖片輪播控制動畫(1)運行Flash CS5,執(zhí)行“文件”“新建”菜單命令,在彈出的“新建文檔”對話框中,選擇“常規(guī)”選項卡下面的“ActionScript 2.0”,然后單擊“確定”按鈕 。(2)執(zhí)行“修改”“文檔”菜單命令,在彈出的“文檔設(shè)置”對話框中,將尺寸設(shè)置為520280像素 。(3)按快捷鍵Ctrl+L打開“庫”面板,單擊“新建元件”按鈕,在彈出的“創(chuàng)建新元件”對話框中,設(shè)

12、置名稱為“pic01”、類型為“影片剪輯”的元件 。(4)執(zhí)行“文件”“導(dǎo)入”“導(dǎo)入到舞臺”菜單命令,在彈出的“導(dǎo)入”對話框中,選擇圖片文件11.jpg,然后單擊“打開”按鈕,這時會彈出消息對話框,單擊“否”按鈕 。再按快捷鍵Ctrl+K,打開“對齊”面板,選擇單擊“水平中齊”和“垂直中齊”按鈕 。元件創(chuàng)建完畢后,切換回到場景1中。(5)按照上述同樣的方法,創(chuàng)建其余的5個影片剪輯元件 。(6)在“時間軸”面板中,雙擊“圖層1”,重命名為“圖片01”。然后在“庫”面板中,按住鼠標(biāo)左鍵不動,將“pic01”影片剪輯元件拖到舞臺中并對齊舞臺 。(7)在“圖片01”圖層中,分別選擇第15幀和第45幀,

13、按F6鍵插入關(guān)鍵幀,然后選中第45幀,按住Shift鍵將舞臺中的元件沿著水平方向移到舞臺的左側(cè),最后右鍵單擊第15幀到第45幀之間的任意位置,創(chuàng)建“傳統(tǒng)補間”動畫 。(8)在“時間軸”面板中,建立新圖層,并將該圖層重命名為“圖片02”,選中該圖層的第15幀,按F7鍵插入空白關(guān)鍵幀,然后從“庫”面板中把“pic02”影片剪輯元件拖到舞臺右側(cè)并與舞臺底部對齊 。然后選擇第45幀,按F6鍵插入關(guān)鍵幀,再將“pic02”影片剪輯元件移到舞臺正中,右鍵單擊第15幀到第45幀之間的任意位置,創(chuàng)建“傳統(tǒng)補間”動畫 。(9)在“圖片02”圖層中,分別選擇第60幀和第90幀插入關(guān)鍵幀,右鍵單擊第60幀到第90幀

14、之間的任意位置,創(chuàng)建“傳統(tǒng)補間”動畫,然后選中第90幀,把“pic02”影片剪輯元件移到舞臺左側(cè)并與舞臺底部對齊 。(10)利用上述同樣的方法,創(chuàng)建并設(shè)置“圖片03”、“圖片04”、“圖片05”、“圖片06”圖層,“時間軸”面板 。為了使圖片能順暢播放,繼續(xù)創(chuàng)建“圖片07”圖層,選擇該圖層的第240幀插入空白關(guān)鍵幀,從“庫”面板中把“pic01”影片剪輯元件拖到舞臺右側(cè)并與舞臺底部對齊,然后選擇第270幀插入關(guān)鍵幀,把“pic01”影片剪輯元件移到舞臺正中。(11)在“庫”面板中,創(chuàng)建按鈕元件,命名為“按鈕1”,選擇工具箱中的“矩形”工具,設(shè)置筆觸顏色為“無”,填充顏色為紅色,在舞臺中繪制出一

15、個大小適中的矩形,并用“文本”工具輸入數(shù)字“1”。再用同樣的方法制作其他按鈕元件。(12)在“時間軸”面板中,建立新圖層,并重命名為“按鈕”圖層,從“庫”面板中把“按鈕1”、“按鈕2”等6個按鈕元件拖到舞臺右下方,并設(shè)置它們能在同一水平方向上平均間隔分布(13)在場景1中,按F9鍵打開“動作”面板,選擇舞臺上的“按鈕1”元件,給該按鈕元件添加鼠標(biāo)動作代碼:on (release) gotoAndPlay(1);。相應(yīng)地,也分別給其他按鈕元件添加代碼:on (release) gotoAndPlay(45); , on (release) gotoAndPlay(90);, on (releas

16、e) gotoAndPlay(135);, on (release) gotoAndPlay(180);, on (release) gotoAndPlay(225);。制作探照燈效果(1)運行Flash CS5,執(zhí)行“文件”“新建”菜單命令,在彈出的“新建文檔”對話框中,選擇“常規(guī)”選項卡下面的“ActionScript 2.0”,然后單擊“確定”按鈕 。(2)執(zhí)行“文件”“導(dǎo)入”“導(dǎo)入到舞臺”菜單命令,在“導(dǎo)入”對話框中,打開圖片文件“21.jpg”,按快捷鍵Ctrl+F3打開“屬性”面板,修改圖片大小為550400像素 。完成設(shè)置后,按快捷鍵Ctrl+K打開“對齊”面板,將圖片置于舞臺正

17、中央。(3)在“時間軸”面板中,建立新圖層,選擇“圖層2”的第1幀,執(zhí)行“文件”“導(dǎo)入”“導(dǎo)入到舞臺”菜單命令,在“導(dǎo)入”對話框中,打開圖片文件“22.jpg”,圖片大小與位置的設(shè)置與步驟(2)相同。(4)新建圖層3,單擊工具箱中的“橢圓”工具,按住Shift鍵在舞臺中繪制出一個圓形 。單擊“移動”工具,選中圓形,按F8鍵打開“轉(zhuǎn)換為元件”對話框,設(shè)置元件名稱為“圓形”,“類型”為圖形元件,并設(shè)置中心對齊 。(5)在圖層3中,分別選擇第15幀、第30幀、第45幀、第60幀、第75幀和第90幀,按F6鍵插入關(guān)鍵幀,并適當(dāng)調(diào)整這些關(guān)鍵幀的圓形元件的位置 。然后在第1和第15幀、第15和第30幀、第

18、30和第45幀、第45和第60幀、第60和第75幀、第75和第90幀之間創(chuàng)建“傳統(tǒng)補間”動畫,再分別選擇圖層1和圖層2的第90幀,按F5鍵插入普通幀。 (6)右鍵單擊圖層3,在彈出的快捷菜單中選擇“遮罩層”,把圖層2設(shè)置為“遮罩層”,圖層3設(shè)置為“被遮罩層” 。(7)新建圖層4,按F7鍵在第30幀插入空白關(guān)鍵幀,選擇工具箱中的“文本”工具,按快捷鍵Ctrl+F3打開“屬性”面板,設(shè)置字體類型為華文楷體、大小為36點、顏色為#FF9900,設(shè)置完成后,輸入“突破科技啟迪未來”,按F8鍵將文本轉(zhuǎn)換為影片剪輯元件,命名為“廣告語” 示。(8)在圖層4中,按F6鍵分別在第45幀、第60幀、第75幀和第

19、90幀插入關(guān)鍵幀,選擇第1幀,將“廣告語”元件移到舞臺上方,再選擇第45幀,單擊工具箱中的“任意變形”工具,當(dāng)光標(biāo)變成,按住Alt鍵向左拖動變形,當(dāng)光標(biāo)變成,按住Alt鍵向下拖動變形 。選擇第75幀,改變“廣告語”元件的位置和大小,并按快捷鍵Ctrl+F3打開“屬性”面板,降低Alpha值為50% 。選擇第90幀,將“廣告語”元件水平右移。最后創(chuàng)建“傳統(tǒng)補間動畫”。(9)新建圖層5,在第90幀插入空白關(guān)鍵幀,按F9鍵打開“動作”面板,輸入代碼“stop();”。按快捷鍵Ctrl+Enter測試動畫,時間軸面板 。制作店鋪公告打字效果(1)運行Flash CS5,執(zhí)行“文件”“新建”菜單命令,在

20、彈出的“新建文檔”對話框中,選擇“常規(guī)”選項卡下面的“ActionScript 2.0”,然后單擊“確定”按鈕 。(2)執(zhí)行“文件”“導(dǎo)入”“導(dǎo)入到舞臺”菜單命令,在“導(dǎo)入”對話框中,打開圖片文件“31.jpg”,按快捷鍵Ctrl+F3打開“屬性”面板,修改圖片大小為550400像素,如圖955所示。完成設(shè)置后,按快捷鍵Ctrl+K打開“對齊”面板,將圖片置于舞臺正中央, 并將“圖層1”重命名為“背景”層。(3)執(zhí)行“文件”“導(dǎo)入”“導(dǎo)入到庫”菜單命令,在“導(dǎo)入”對話框中,打開圖片文件“楓葉.png”,按快捷鍵Ctrl+L打開“庫”面板,可以看到自動生成名字為“楓葉”的圖形元件 。(4)在“時

21、間軸”面板中,新建圖層并命名為“標(biāo)題”層,選中該圖層的第1幀,單擊工具箱中的“文本”工具,按快捷鍵Ctrl+F3打開“字符屬性”面板,設(shè)置字體類型為華文楷體、大小為36點、顏色為#FF0000,在舞臺中輸入標(biāo)題文本“店鋪公告” 。(5)在“時間軸”面板中,新建圖層并命名為“內(nèi)容”層,選中該圖層的第1幀,單擊工具箱中的“文本”工具,按快捷鍵Ctrl+F3打開“字符屬性”面板,設(shè)置字體類型為宋體、大小為18點、顏色為#000000,字符行距為5點 。然后在舞臺中輸入公告內(nèi)容:“您好,親,歡迎光臨!本店與多家國內(nèi)知名品牌(好孩子、小龍哈彼、迪士尼等生產(chǎn)商)合作,全場所有寶貝均為正品(有防偽碼可查詢)

22、” 。(6)在“內(nèi)容”圖層中,選擇第1幀,按快捷鍵Ctrl+B將文本打散 。全選該圖層的第2幀到第61幀,然后右鍵單擊第2幀到第61幀之間的任意位置,選擇“轉(zhuǎn)換為關(guān)鍵幀”,再按F5鍵在“標(biāo)題”層和“背景”層的第61幀都插入普通幀,時間軸面板 。(7)在“內(nèi)容”圖層中,選擇第1幀,按Delete鍵刪除后面的60個文本,只留下“您” 。繼續(xù)選擇第2幀,按Delete鍵刪除后面的59個文本,只留下“您好” 。按照同樣的方法繼續(xù)操作,最后可以實現(xiàn)動態(tài)打字的效果。(8)在“時間軸”面板中,新建圖層并命名為“曲線”層,選中該圖層的第1幀,單擊工具箱中的“鉛筆”工具,并設(shè)置鉛筆模式為“平滑”,用“鉛筆”工具

23、在舞臺中繪制出一條曲線 。(9)在“曲線”層的下方新建“楓葉”圖層,選擇“楓葉”層的第1幀,將“庫”面板的“楓葉”圖形元件拖到舞臺中曲線的左端,適當(dāng)縮小“楓葉”元件,并保證該元件的中心點對準(zhǔn)曲線的起點 。按F6鍵在第61幀插入關(guān)鍵幀,把“楓葉”元件移到曲線的右端,保證該元件的中心點對準(zhǔn)曲線的終點 。然后在第1幀與第61幀之間創(chuàng)建傳統(tǒng)補間動畫。(10)右鍵單擊“曲線”層,在彈出的快捷菜單中,設(shè)置其圖層類型為“引導(dǎo)層” 。再按住鼠標(biāo)左鍵不動,把“楓葉”層拖進(jìn)“曲線”層中,“楓葉”層即成為“被引導(dǎo)”層 。(11)按快捷鍵Ctrl+Enter測試動畫。時間軸面板 。制作促銷廣告動畫(1)運行Flash

24、 CS5,執(zhí)行“文件”“新建”菜單命令,在彈出的“新建文檔”對話框中,選擇“常規(guī)”選項卡下面的“ActionScript 2.0”,然后單擊“確定”按鈕 。(2)執(zhí)行“修改”“文檔”菜單命令,在彈出的“文檔設(shè)置”對話框中,設(shè)置背景顏色為#003300 。(3)執(zhí)行“文件”“導(dǎo)入”“導(dǎo)入到庫”菜單命令,在“導(dǎo)入”對話框中,選擇本任務(wù)中所有的圖片素材文件導(dǎo)入到“庫”面板中 。(4)按快捷鍵Ctrl+F8打開“創(chuàng)建新元件”對話框,命名為“絕招”,類型為“影片剪輯”,然后單擊“確定”按鈕 。在“庫”面板中,將圖片“絕招.png”拖放到“絕招”影片剪輯元件的編輯模式中,按快捷鍵Ctrl+K打開“對齊”面板,勾選“與舞臺對齊”選項復(fù)選框,單擊“水平中齊”按鈕和“垂直中齊”按鈕。用同樣的方法,創(chuàng)建“貓女”、“貓女的誘惑”、“滿就送”等影片剪輯元件。(5)切換到場景1,將“絕招”影片剪輯元件拖到舞臺,按Ctrl+F3打開“屬性”面板,然后改變其寬度為550 。設(shè)置該元件與舞臺左對齊且底部對齊 。(6)選中圖層1,重命名為“絕招”,單擊該圖層的第1幀,按快捷鍵Ctrl+C復(fù)制第1幀的內(nèi)容,按快捷鍵Ctrl+Shift+V在當(dāng)前位置粘