WEB動畫制作與設計課件：Flash動畫制作入門

WEB動畫制作入門WEB動畫制作入門WEB動畫制作入門F1ash動畫的應用領域、特點和創(chuàng)作流程啟動和退出Flash新建、打開、保存和關閉Flash文檔及屬性設置了解Flash動畫的制作原理和相關概念，并能制作出簡單的Flash動畫【課堂學習目標】

動畫的制作離不開它的制作工具，下面我們就通過制作“過光文字”簡單動畫，來體驗一下Flash動畫的制作流程以及熟悉一下Flash的操作界面，充分體驗一下制作Flash動畫的無窮樂趣。1.1初識Flash軟件【案例學習目標】

通過本案例的學習，使大家能夠掌握Flash動畫的開發(fā)流程，熟悉Flash的操作界面以及對于Flash文檔的相關屬性的設置?！景咐R要點】

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

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

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

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

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

理論知識歸納與總結

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

理論知識歸納與總結

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

理論知識歸納與總結

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

理論知識歸納與總結

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

理論知識歸納與總結

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

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

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

由于Flash制作的課件具有很高的互動性，使學習者能夠真正融入到在線學習中，親身參與每一個實驗，就好像自己真正在動手一樣，使原本枯燥的學習變得活潑生動。

【拓展知識】-Flash動畫的應用領域（4）Flash電子賀卡

在快節(jié)奏發(fā)展的今天，每當重要的節(jié)日或者紀念日，更多的人選擇借助發(fā)電子賀卡來表達自己對對方的祝福和情感。而在這些特別的日子里，一張別出心裁的Flash電子賀卡往往能夠為人們的祝福帶來更加意想不到的效果?！就卣怪R】-Flash動畫的應用領域【拓展知識】-Flash動畫制作流程每個人創(chuàng)作Flash動畫的習慣不同，但都會遵循一個基本的流程。創(chuàng)建Flastl動畫的一般流程如下：①前期策劃：在著手制作動畫前，應首先明確動畫要達到的效果，然后確定劇情和角色，還要根據(jù)劇情確定動畫風格。

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