WEB動(dòng)畫制作與設(shè)計(jì)課件：Flash動(dòng)畫制作入門

WEB動(dòng)畫制作入門WEB動(dòng)畫制作入門WEB動(dòng)畫制作入門F1ash動(dòng)畫的應(yīng)用領(lǐng)域、特點(diǎn)和創(chuàng)作流程啟動(dòng)和退出Flash新建、打開、保存和關(guān)閉Flash文檔及屬性設(shè)置了解Flash動(dòng)畫的制作原理和相關(guān)概念，并能制作出簡(jiǎn)單的Flash動(dòng)畫【課堂學(xué)習(xí)目標(biāo)】

動(dòng)畫的制作離不開它的制作工具，下面我們就通過制作“過光文字”簡(jiǎn)單動(dòng)畫，來體驗(yàn)一下Flash動(dòng)畫的制作流程以及熟悉一下Flash的操作界面，充分體驗(yàn)一下制作Flash動(dòng)畫的無窮樂趣。1.1初識(shí)Flash軟件【案例學(xué)習(xí)目標(biāo)】

通過本案例的學(xué)習(xí)，使大家能夠掌握Flash動(dòng)畫的開發(fā)流程，熟悉Flash的操作界面以及對(duì)于Flash文檔的相關(guān)屬性的設(shè)置。【案例知識(shí)要點(diǎn)】

新建文檔的方法；導(dǎo)入背景圖的方法；保存、測(cè)試以及發(fā)布影片的方法。課堂案例——制作“過光文字”一、新建文檔1、啟動(dòng)Flash軟件，在創(chuàng)建新項(xiàng)目欄中選擇“新建>ActionScript3.0”選項(xiàng)，如圖所示，進(jìn)入Flash的設(shè)計(jì)界面。一、新建文檔2、在舞臺(tái)的空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“文檔屬性”命令，如圖所示。一、新建文檔3、在彈出的“文檔屬性”對(duì)話框中設(shè)置文檔“尺寸”寬度為“400”像素，高度為“100”像素，設(shè)置文檔“幀頻”為“5”fps，文檔其他屬性使用默認(rèn)參數(shù)，如圖所示，單擊“確定”按鈕關(guān)閉對(duì)話框。二、導(dǎo)入背景圖1、用鼠標(biāo)右鍵單擊“圖層1”圖層，在彈出的快捷菜單中選擇“屬性”命令，然后在彈出的“圖層屬性”對(duì)話框中將圖層重命名為“背景”圖層，效果如圖所示。二、導(dǎo)入背景圖2、執(zhí)行“文件>導(dǎo)入>導(dǎo)入到舞臺(tái)”命令，將“素材>第1章>制作“過光文字”>背景.png”文件導(dǎo)入到舞臺(tái)中，效果如圖所示。三、制作文字過光效果1、在時(shí)間軸上單擊新建圖層按鈕

，在“背景”圖層上新建一個(gè)圖層并重命名為“文字”圖層，效果如圖所示。三、制作文字過光效果2、選擇“文本”工具，在“屬性”面板中設(shè)置“系列”為“TimesNewRoman”，“字體大小”為50，并加粗，“文本顏色”為“紅色”，然后在“文字”圖層上輸入字母“SunnyBoy”，參數(shù)設(shè)置如圖所示。三、制作文字過光效果3、按Ctrl+K組合鍵打開“對(duì)齊”面板，確定“相對(duì)于舞臺(tái)”狀態(tài)被選中，然后單擊“水平中齊”和“垂直中齊”，如左圖所示，使文字相對(duì)舞臺(tái)居中對(duì)齊，舞臺(tái)上的顯示效果如右圖所示。三、制作文字過光效果4、選中“文字”圖層上第1幀的圖形，按1次Ctrl+B組合鍵將文字打散，效果如圖所示。三、制作文字過光效果5、分別選擇“文字”和“背景”圖層的第8幀，然后按F5鍵插入幀，效果如圖所示。三、制作文字過光效果6、按住Shift鍵選中“文字”圖層的第2幀～第8幀，然后按F6鍵插入關(guān)鍵幀，效果如圖所示。三、制作文字過光效果7、選中“文字”圖層第1幀處的字母“S”，在“屬性”面板中設(shè)置其“字體顏色”為“白色”，效果如圖所示。三、制作文字過光效果8、使用同樣的方法，將第2幀的“u”字母的“字體顏色”設(shè)置為“白色”，依次類推進(jìn)行設(shè)置，效果如圖所示。四、保存并測(cè)試影片1、按Ctrl+S組合鍵保存影片，在彈出的“另存為”對(duì)話框中，設(shè)置保存目錄并輸入文件名為“過光文字”，效果如圖所示。四、保存并測(cè)試影片2、單擊“保存”按鈕保存影片，按Ctrl+Enter組合鍵測(cè)試影片。五、發(fā)布影片1、執(zhí)行“文件>發(fā)布設(shè)置”命令，打開“發(fā)布設(shè)置”對(duì)話框，在“格式”選項(xiàng)卡中可以對(duì)要發(fā)布的格式進(jìn)行設(shè)置，如圖所示。2、SWF動(dòng)畫格式是Flash自身的動(dòng)畫格式，因此它是輸出動(dòng)畫的默認(rèn)格式。五、發(fā)布影片3、如果要在Web瀏覽器中播放Flash電影，則必須創(chuàng)建HTML文檔。選擇“發(fā)布設(shè)置”對(duì)話框中的“HTML包裝器”可以設(shè)定Flash電影在瀏覽器窗口中的位置、背景顏色以及電影大小等參數(shù)，如圖所示。五、發(fā)布影片（4）設(shè)置完成后，單擊“發(fā)布”按鈕，可以在保存的目錄中看到發(fā)布后的文件，如圖所示。至此，一個(gè)過光文字動(dòng)畫作品制作就完成了。1．啟動(dòng)與退出Flash軟件

啟動(dòng)Flash軟件的主要方法有以下幾種:選擇“開始>所有程序>Adobe>AdobeFlashProfessionalCS6”菜單命令。雙擊桌面上的Flash快捷方式圖標(biāo)

。在“我的電腦”窗口或“開始>我最近的文檔”子菜單中打開一個(gè)Flash文檔。退出Flash軟件的方法有以下幾種:選擇“文件>退出”菜單命令。單擊Flash主界面右上角的

按鈕。按“Alt+F4”鍵?！?/p>

理論知識(shí)歸納與總結(jié)

】2．Flash文檔基本操作（1）新建文檔選擇“文件>新建”命令，彈出“新建文檔”對(duì)話框。選擇完成后，單擊“確定”按鈕，即可完成新建文件的任務(wù);或按Ctrl+N鍵，打開新建文檔對(duì)話框?！?/p>

理論知識(shí)歸納與總結(jié)

】（2）保存文檔選擇“文件>保存”，彈出“另存為”對(duì)話框，在對(duì)話框中，輸入文件名，選擇保存類型，單擊“保存”按鈕，即可將動(dòng)畫保存;或按Ctrl+S鍵，也可以實(shí)現(xiàn)保存文檔操作。【

理論知識(shí)歸納與總結(jié)

】（2）保存文檔【提示】當(dāng)對(duì)已經(jīng)保存過的動(dòng)畫文件進(jìn)行了各種編輯操作后，選擇“保存”命令，將彈不出“另存為”對(duì)話框，并覆蓋原始文件。若既要保留修改過的文件，又不想放棄原文件，可以選擇“文件>另存為”命令，彈出“另存為”對(duì)話框，在對(duì)話框中，可以為更改過的文件重新命名、選擇路徑、設(shè)定保存類型，然后進(jìn)行保存，這樣原文件保留不變?！?/p>

理論知識(shí)歸納與總結(jié)

】（3）操作的撤銷和恢復(fù)在制作Flash作品的過程中，經(jīng)常會(huì)發(fā)生一些意想不到的錯(cuò)誤操作，此時(shí)按快捷鍵“Ctrl+Z”可撤銷前一步操作，連續(xù)執(zhí)行可撤銷多步操作；若不小心將正確的操作撤銷了，可按快捷鍵“Ctrl+Y”恢復(fù)撤銷的操作?！?/p>

理論知識(shí)歸納與總結(jié)

】Flash的前身是FutureSplash，它是為了完善Macromedia的拳頭產(chǎn)品Director而開發(fā)的一款用于網(wǎng)絡(luò)發(fā)布的插件，它的出現(xiàn)改變了Director在網(wǎng)絡(luò)上運(yùn)行緩慢的尷尬局面。1996年原開發(fā)公司被Macromedia公司收購，其核心產(chǎn)品也被正式更名為Flash，并相繼推出了Flash1.0、Flash2.0、Flash3.0、Flash4.0、Flash5.0、FlashMX、FlashMX2004、Flash8、FlashCS直至現(xiàn)在比較流行的FlashCS6?！就卣怪R(shí)】-Flash簡(jiǎn)介（1）矢量圖形系統(tǒng)（2）制作簡(jiǎn)單（3）存儲(chǔ)容量小和縮放時(shí)不失真（4）邊下載邊播放（5）增強(qiáng)的Flash交互功能【拓展知識(shí)】-

Flash的優(yōu)點(diǎn)（1）制作Flash短片

相信絕大多數(shù)人都是通過觀看網(wǎng)上精彩的動(dòng)畫短片知道Flash的。Flash動(dòng)畫短片經(jīng)常以其感人的情節(jié)或是搞笑的對(duì)白吸引上網(wǎng)者進(jìn)行觀看?！就卣怪R(shí)】-Flash動(dòng)畫的應(yīng)用領(lǐng)域?qū)τ诖蠖鄶?shù)的Flash學(xué)習(xí)者來說，制作Flash游戲一直是一項(xiàng)很吸引人，也很有趣的技術(shù)。隨著ActionScript動(dòng)態(tài)腳本編程語言的逐漸發(fā)展，F(xiàn)lash已經(jīng)不再僅局限于制作簡(jiǎn)單的交互動(dòng)畫程序，而是致力于通過復(fù)雜的動(dòng)態(tài)腳本編程制作出各種各樣有趣、精彩的Flash互動(dòng)游戲?！就卣怪R(shí)】-Flash動(dòng)畫的應(yīng)用領(lǐng)域（3）制作教學(xué)用課件

由于Flash制作的課件具有很高的互動(dòng)性，使學(xué)習(xí)者能夠真正融入到在線學(xué)習(xí)中，親身參與每一個(gè)實(shí)驗(yàn)，就好像自己真正在動(dòng)手一樣，使原本枯燥的學(xué)習(xí)變得活潑生動(dòng)。

【拓展知識(shí)】-Flash動(dòng)畫的應(yīng)用領(lǐng)域（4）Flash電子賀卡

在快節(jié)奏發(fā)展的今天，每當(dāng)重要的節(jié)日或者紀(jì)念日，更多的人選擇借助發(fā)電子賀卡來表達(dá)自己對(duì)對(duì)方的祝福和情感。而在這些特別的日子里，一張別出心裁的Flash電子賀卡往往能夠?yàn)槿藗兊淖８砀右庀氩坏降男Ч??！就卣怪R(shí)】-Flash動(dòng)畫的應(yīng)用領(lǐng)域【拓展知識(shí)】-Flash動(dòng)畫制作流程每個(gè)人創(chuàng)作Flash動(dòng)畫的習(xí)慣不同，但都會(huì)遵循一個(gè)基本的流程。創(chuàng)建Flastl動(dòng)畫的一般流程如下：①前期策劃：在著手制作動(dòng)畫前，應(yīng)首先明確動(dòng)畫要達(dá)到的效果，然后確定劇情和角色，還要根據(jù)劇情確定動(dòng)畫風(fēng)格。

②準(zhǔn)備素材：做好前期策劃后，便可以開始根據(jù)策劃的內(nèi)容繪制角色造型、背景以及要使用的道具等圖形，并將這些繪制好的對(duì)象轉(zhuǎn)換成元件以備使用（聲音、圖形等動(dòng)畫素材不一定非要自己制作，也可以從網(wǎng)上下載，或購買相關(guān)的素材光盤）?！就卣怪R(shí)】-Flash動(dòng)畫制作流程③制作動(dòng)畫：一切準(zhǔn)備妥當(dāng)后就可以開始制作動(dòng)畫了，這主要包括為角色設(shè)計(jì)動(dòng)作，角色與背景的合成，動(dòng)畫與聲音的合成等。④后期調(diào)試：后期調(diào)試包括調(diào)試動(dòng)畫和測(cè)試動(dòng)畫兩方面。調(diào)試動(dòng)畫主要是針對(duì)動(dòng)畫的細(xì)節(jié)、動(dòng)畫片段的銜接、場(chǎng)景的切換、聲音