3.1 母親節(jié)賀卡

1、Flash CC 基礎(chǔ)與案例教程Flash CC 基礎(chǔ)與案例教程第 2 頁Flash CC 基礎(chǔ)與案例教程母親節(jié)賀卡一中秋節(jié)賀卡二愚人節(jié)賀卡三Flash CC 基礎(chǔ)與案例教程第 3 頁第一部分Flash CC 基礎(chǔ)與案例教程Flash CC 基礎(chǔ)與案例教程第 4 頁3.1.1 知技準(zhǔn)備1.基本知識 (1)、什么是視覺暫留現(xiàn)象？視覺暫留現(xiàn)象（Visual staying phenomenon，duration of vision）又稱“余暉效應(yīng)”。人眼在觀察景物時，光信號傳入大腦神經(jīng)，需經(jīng)過一段短暫的時間，光的作用結(jié)束后，視覺形象并不立即消失，這種殘留的視覺稱“后像”，視覺的這一現(xiàn)象則被稱為視覺

2、暫留”其時值是二十四分之一秒，是動畫、電影等視覺媒體形成和傳播的根據(jù)。 視覺暫留現(xiàn)象首先被中國人發(fā)現(xiàn)，早在宋朝，中國人就發(fā)明了走馬燈，這是據(jù)歷史記載中最早的視覺暫留運用，如圖3-1-1所示。Flash CC 基礎(chǔ)與案例教程第 5 頁3.1.1 知技準(zhǔn)備圖3-1-1走馬燈Flash CC 基礎(chǔ)與案例教程第 6 頁3.1.1 知技準(zhǔn)備(2).動畫是怎樣產(chǎn)生的？動畫的產(chǎn)生正是運用了視覺暫留現(xiàn)象，動畫是許多幀靜止的畫面連續(xù)播放時的過程，當(dāng)所有連續(xù)動作的單幀畫面串連在一起，并且以一定的速度播放，就會使眼睛產(chǎn)生錯覺，形成動畫。一般而言，電影的播放速度是每秒24格畫面，F(xiàn)lash二維動畫的播放速度時每秒12

3、幀畫面，例如一只飛鳥的動畫，可以分解為6個關(guān)鍵幀，然后順序循環(huán)播放，如圖3-1-2所示。圖3-1-2飛鳥動畫分解Flash CC 基礎(chǔ)與案例教程第 7 頁一、母親節(jié)賀卡(3).什么是逐幀動畫？逐幀動畫是一種常見的動畫形式，其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作，也就是在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動畫。 因為逐幀動畫的幀序列內(nèi)容不一樣，不但給制作增加了負(fù)擔(dān)而且最終輸出的文件量也很大，但它的優(yōu)勢也很明顯：逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似與電影的播放模式，很適合于表演細(xì)膩的動畫。例如：飛鳥、頭發(fā)飄動、走路、說話等等，如圖3-1-3所示。圖3

4、-1-3逐幀動畫Flash CC 基礎(chǔ)與案例教程第 8 頁3.1.1 知技準(zhǔn)備2.基本操作(1)幀的使用插入幀： 選擇菜單“插入時間軸幀”，或用鼠標(biāo)右鍵單擊時間軸，在彈出的快捷菜單中選擇“插入幀”，會在當(dāng)前幀的后面插入一個新幀。選擇菜單“插入時間軸關(guān)鍵幀”，或用鼠標(biāo)右鍵單擊時間軸，在彈出的快捷菜單中選擇“插入關(guān)鍵幀”，會在播放頭位置插入一個關(guān)鍵幀。選擇菜單“插入時間軸空白關(guān)鍵幀”，或用鼠標(biāo)右鍵單擊時間軸，在彈出的快捷菜單中選擇“插入空白關(guān)鍵幀”，會在播放頭位置插入一個空白關(guān)鍵幀。Flash CC 基礎(chǔ)與案例教程第 9 頁選擇幀： 要選擇單個幀，單擊即可。要選擇多個不連續(xù)的幀，按住Ctrl鍵的同

5、時單擊其它幀；要選擇多個連續(xù)的幀，按住Shift鍵的同時單擊其它幀，按住鼠標(biāo)左鍵不動框選也可以選擇多個連續(xù)區(qū)域范圍內(nèi)的幀。要選擇時間軸中某個圖層上的所有幀，單擊圖層名稱所在的位置；要選擇整個靜態(tài)幀范圍，雙擊兩個關(guān)鍵幀之間的幀。3.1.1 知技準(zhǔn)備移動幀：移動幀或關(guān)鍵幀只要用鼠標(biāo)選中需要移動的幀，拖曳至目標(biāo)位置釋放即可。Flash CC 基礎(chǔ)與案例教程第 10 頁3.1.1 知技準(zhǔn)備復(fù)制和粘貼幀：方法一：選中關(guān)鍵幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“復(fù)制幀”，然后在需要粘貼的位置單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼幀”。方法二：選中關(guān)鍵幀，按住Alt鍵不放，此時鼠標(biāo)右上角會有個“+”號

6、，按住鼠標(biāo)左鍵不動拖曳至待粘貼的位置釋放即可。刪除幀：刪除幀或關(guān)鍵幀的方法簡單，只要選中需要刪除的幀或關(guān)鍵幀，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“刪除幀”即可。Flash CC 基礎(chǔ)與案例教程第 11 頁3.1.1 知技準(zhǔn)備清除幀:選中關(guān)鍵幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“清除幀”，可以清除幀和關(guān)鍵幀中的內(nèi)容，被清除以后的幀內(nèi)部將沒有任何內(nèi)容，該幀將轉(zhuǎn)換為空白關(guān)鍵幀，其后的幀將變成關(guān)鍵幀。Flash CC 基礎(chǔ)與案例教程第 12 頁3.1.1 知技準(zhǔn)備幀操作快捷鍵：插入幀（非關(guān)鍵幀）：轉(zhuǎn)換為關(guān)鍵幀，并復(fù)制前一關(guān)鍵幀的內(nèi)容：轉(zhuǎn)換為空白關(guān)鍵幀：刪除幀：清除關(guān)鍵幀：復(fù)制幀：剪切幀：粘貼幀F(xiàn)las

7、h CC 基礎(chǔ)與案例教程第 13 頁3.1.1 知技準(zhǔn)備2.逐幀動畫創(chuàng)建方法方法一：導(dǎo)入靜態(tài)圖片 使用數(shù)碼相機等連拍圖片，連續(xù)導(dǎo)入到Flash中，即會建立一段逐幀動畫，具體操作方法是：（1）使用數(shù)碼相機連拍照片。（2）新建Flash文檔，選擇“文件”菜單“導(dǎo)入到庫”對話框，選中所有素材圖片一并導(dǎo)入到庫中。（3）按下快捷鍵Ctrl+L打開庫面板，拖動第一幅圖片到舞臺上，按下快捷鍵Ctrl+I打開信息面板，設(shè)置圖片X和Y坐標(biāo)均為0，使圖片沖齊舞臺左上角。（4）在時間軸第2幀按下快捷鍵F7創(chuàng)建空關(guān)鍵幀，同理，拖放庫中第二幅圖片并設(shè)置相同的位置坐標(biāo)。（5）同理，制作第3幀、第4幀將所有圖片按順序分別放

8、入關(guān)鍵幀中。Flash CC 基礎(chǔ)與案例教程第 14 頁3.1.1 知技準(zhǔn)備方法二：逐幀繪圖 依據(jù)動畫原理將動作進(jìn)行分解，使用鼠標(biāo)或壓感筆在場景中一幀幀的畫出關(guān)鍵畫面，然后順序播放，具體操作方法詳見項目2.1中“一只飛鳥”元件的制作過程。Flash CC 基礎(chǔ)與案例教程第 15 頁3.1.1 知技準(zhǔn)備方法三：制作文字逐幀動畫用文字作幀中的元件，實現(xiàn)文字跳躍、旋轉(zhuǎn)等特效，具體操作方法是：（1）打開Flash，輸入文字“跳動”。（2）在第2幀處按下快捷鍵F6創(chuàng)建關(guān)鍵幀，選中文字，按住Shift鍵的同時按一次向上方向鍵，此時文字向上移動十個像素。（3）在第3幀處按下快捷鍵F6創(chuàng)建關(guān)鍵幀，選中文字，按

9、下快捷鍵Q切換為任意變形工具，將文字旋轉(zhuǎn)180度。（4）在第4幀處按下快捷鍵F6創(chuàng)建關(guān)鍵幀，選中文字，按住Shift鍵的同時按一次向下方向鍵，此時文字向下移動十個像素。（5）按下快捷鍵Ctrl+Enter測試影片，觀察動畫效果。Flash CC 基礎(chǔ)與案例教程第 16 頁3.1.1 知技準(zhǔn)備方法四：導(dǎo)入序列圖像 導(dǎo)入gif序列圖像、swf動畫或者利用第3方軟件（如swish、swift 3D等）產(chǎn)生的動畫序列，即會自動建立一段逐幀動畫，具體操作方法是：打開Flash，按下快捷鍵Ctrl+R打開“導(dǎo)入”對話框，選擇gif圖像。觀察時間軸，計算機自動將gif圖像分解為序列畫面，如圖3-1-4所示。

10、圖3-1-4導(dǎo)入序列圖像Flash CC 基礎(chǔ)與案例教程第 17 頁3.1.1 知技準(zhǔn)備3.如何正確使用不同類型的幀幀是Flash二維動畫制作的基本單位，每一個精彩的Flash二維動畫都是由很多個精心雕琢的幀構(gòu)成的，在時間軸上的每一幀都可以包含需要顯示的所有內(nèi)容，包括圖形、聲音、各種素材和其他多種對象，幀包括以下三種類型：Flash CC 基礎(chǔ)與案例教程第 18 頁3.1.1 知技準(zhǔn)備（1）關(guān)鍵幀：有內(nèi)容的幀，在時間軸上顯示為實心圓點，用來定義動畫變化、更改狀態(tài)的幀。（2）空關(guān)鍵幀：沒有內(nèi)容的關(guān)鍵幀，在時間軸上顯示為空心圓點，可以用來放動作，也可以用來控制某段動畫的起始時間。 （3）普通幀：在

11、時間軸上顯示為灰色填充的小方格。在時間軸上能顯示對象，但不能編輯對象，其內(nèi)容為與之最近的關(guān)鍵幀相同，可以用來延長對象停留的時間。 Flash CC 基礎(chǔ)與案例教程第 19 頁3.1.1 知技準(zhǔn)備 在同一圖層中，在前一個關(guān)鍵幀后面任一幀處插入關(guān)鍵幀，則復(fù)制前一個關(guān)鍵幀上的內(nèi)容，并且可對其編輯；如果插入普通幀，則是延續(xù)前一個關(guān)鍵幀上的內(nèi)容，不可以對其編輯；如果插入空白關(guān)鍵幀，則清除該幀后面的延續(xù)內(nèi)容，也可以在空白關(guān)鍵幀上添加新的內(nèi)容。 在使用中應(yīng)盡可能的節(jié)約關(guān)鍵幀的使用，以減小動畫文件的體積，同時盡量避免在同一幀處過多的使用關(guān)鍵幀，以減小動畫運行的負(fù)擔(dān)，使畫面播放流暢。Flash CC 基礎(chǔ)與案例

12、教程第 20 頁3.1.2案例分析 逐幀動畫是二維動畫的常用手段，其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作，也就是在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而形成動畫，該任務(wù)即是利用逐幀動畫原理，制作綠葉生長的動畫，動畫效果為生命破繭而出，寓意著母親的偉大以及對母親深深的愛，可作為母親節(jié)賀卡，如圖3-1-5所示。圖3-1-5生命之初Flash CC 基礎(chǔ)與案例教程第 21 頁3.1.2案例分析 在具體技術(shù)層面，該任務(wù)使用Flash軟件，利用關(guān)鍵幀技術(shù)將連續(xù)動作分解的靜止圖片順序播放，根據(jù)動畫原理，運用動畫技法，將綠葉生長的過程分解為若干個關(guān)鍵畫面，并在時間軸的每幀上逐幀繪制出各個關(guān)鍵畫面

13、，使其連續(xù)播放而形成樹葉生長的動畫，通過訓(xùn)練，初步理解動畫制作的原理和流程，打開動畫制作的知識大門。Flash CC 基礎(chǔ)與案例教程第 22 頁3.1.2案例分析【知識技能點】幀；關(guān)鍵幀；動作分解；逐幀動畫?！居?xùn)練目標(biāo)】 1. 能夠?qū)赢嫾挤☉?yīng)用到二維動畫制作過程中，理解并分解樹葉生長動作，將樹葉生長分解為若干個關(guān)鍵畫面，并分別繪制到關(guān)鍵幀中。 2. 通過項目訓(xùn)練，能夠理解幀的概念，掌握不同類型幀的含義和使用方法，能夠選擇正確的幀類型；能夠獨立完成動畫制作，初步體會二維動畫的制作過程。Flash CC 基礎(chǔ)與案例教程第 23 頁3.1.3制作過程一、繪制蛋殼1.新建Flash文檔，大小為800

14、PX*600PX。2.圖層1重命名為“蛋殼”，按下快捷鍵O切換成橢圓工具，繪制一個類似雞蛋的橢圓。3.按下快捷鍵Shift+F9打開顏色面板，顏色類型選擇徑向漸變，根據(jù)明暗關(guān)系，調(diào)整雞蛋蛋殼的顏色，顏色條從左到右依次為：主體顏色、高光、主體顏色、明暗交界線、反光，為蛋殼填充漸變色，如圖3-1-6所示。 圖3-1-6蛋殼顏色設(shè)置Flash CC 基礎(chǔ)與案例教程第 24 頁3.1.3制作過程4.新建圖層命名為“陰影下”，繪制橢圓作為底層陰影，注意陰影大小和雞蛋大小一致，打開顏色面板，顏色類型選擇徑向漸變，根據(jù)明暗關(guān)系調(diào)整好陰影顏色并填充，使用漸變變形工具進(jìn)行調(diào)整，如圖3-1-7所示。圖3-1-7調(diào)

15、整底層陰影Flash CC 基礎(chǔ)與案例教程第 25 頁3.1.3制作過程圖3-1-8調(diào)整中層陰影5.新建圖層命名為“陰影中”，繪制橢圓作為底層陰影，打開顏色面板，顏色類型選擇徑向漸變，根據(jù)明暗關(guān)系調(diào)整好陰影顏色并填充，如圖3-1-8所示。Flash CC 基礎(chǔ)與案例教程第 26 頁3.1.3制作過程6.新建圖層命名為“陰影上”，繪制橢圓作為底層陰影，打開顏色面板，根據(jù)明暗關(guān)系調(diào)整好陰影顏色，如圖3-1-9所示。圖3-1-9調(diào)整中層陰影Flash CC 基礎(chǔ)與案例教程第 27 頁3.1.3制作過程7.調(diào)整好蛋殼和陰影的位置，如圖3-1-10所示。圖3-1-10蛋殼和陰影Flash CC 基礎(chǔ)與案

16、例教程第 28 頁二 繪制蛋殼破裂動畫3.1.3制作過程1.新建圖層命名為“破裂”，在第5幀創(chuàng)建關(guān)鍵幀，繪制蛋殼破裂的第一個畫面，如圖3-1-11所示。圖3-1-11蛋殼破碎逐幀動畫Flash CC 基礎(chǔ)與案例教程第 29 頁3.1.3制作過程圖3-1-12繪制蛋殼裂痕2.同理，將蛋殼破裂動畫分解為15個關(guān)鍵畫面，并分別繪制在第6至19幀中，注意繪制圖形時位置一一對應(yīng)，蛋殼裂痕完畢，如圖3-1-12所示。Flash CC 基礎(chǔ)與案例教程第 30 頁3.1.3制作過程蛋殼破裂時間軸如圖3-1-13所示。圖3-1-13蛋殼破碎動作分解時間軸Flash CC 基礎(chǔ)與案例教程第 31 頁3.1.3制作

17、過程3.在第24幀創(chuàng)建關(guān)鍵幀，繪制蛋殼即將碎掉的畫面，如圖3-1-14所示。圖3-1-14蛋殼即將碎掉關(guān)鍵幀F(xiàn)lash CC 基礎(chǔ)與案例教程第 32 頁3.1.3制作過程圖3-1-15蛋殼破裂的洞4.按下Ctrl+Enter鍵預(yù)覽動畫效果并進(jìn)行微調(diào)。5.新建圖層命名為“洞”，在蛋殼破裂即將結(jié)束的幀的位置即第25幀創(chuàng)建關(guān)鍵幀，繪制雞蛋破裂后形成的蛋洞，如圖3-1-15所示。Flash CC 基礎(chǔ)與案例教程第 33 頁3.1.3制作過程三、制作小苗動畫1.新建圖層命名為“發(fā)芽”，在第40幀創(chuàng)建關(guān)鍵幀，繪制樹苗發(fā)芽的第一個關(guān)鍵畫面，如圖3-1-16所示。圖3-1-16樹苗發(fā)芽關(guān)鍵幀F(xiàn)lash CC

18、基礎(chǔ)與案例教程第 34 頁一、母親節(jié)賀卡圖3-1-17樹苗發(fā)芽關(guān)鍵幀2.將樹苗發(fā)芽的動畫分解為關(guān)鍵畫面，并分別繪制在相應(yīng)的關(guān)鍵幀中，注意繪制圖形時位置一一對應(yīng)，如圖3-1-17所示。3.1.3制作過程Flash CC 基礎(chǔ)與案例教程第 35 頁3.同理，將樹葉逐漸長出的動畫分解為關(guān)鍵畫面，并分別繪制在相應(yīng)的關(guān)鍵幀中，如圖3-1-18至3-1-21所示。圖3-1-18樹葉生長關(guān)鍵幀圖3-1-19樹葉生長關(guān)鍵幀圖3-1-20樹葉生長關(guān)鍵幀圖3-1-21樹葉生長關(guān)鍵幀3.1.3制作過程Flash CC 基礎(chǔ)與案例教程第 36 頁4.按下Ctrl+Enter鍵預(yù)覽動畫效果并進(jìn)行微調(diào)，達(dá)到自己想要的效果。5.分別新建圖層，每個圖層放置一行文字，并制作文字逐行漸出動畫，時間軸如圖3-1-22示。圖3-1-22文字動畫時間軸設(shè)置6.新建圖層，在第90幀創(chuàng)建關(guān)鍵幀，添加停止動作。3.1.3制作過程Flash CC 基礎(chǔ)與案例教程第 37 頁四、添加背景音樂1.新建圖層命名“背景”，將背景層拖動到圖層面板最底層，按下快捷鍵Ctrl+R導(dǎo)入素材圖片，并設(shè)置好大小和位置。2.新建圖層命名為“音樂”。3