3.1 母親節(jié)賀卡

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

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

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

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

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

6、，按住鼠標(biāo)左鍵不動(dòng)拖曳至待粘貼的位置釋放即可。刪除幀：刪除幀或關(guān)鍵幀的方法簡(jiǎn)單，只要選中需要?jiǎng)h除的幀或關(guān)鍵幀，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“刪除幀”即可。Flash CC 基礎(chǔ)與案例教程第 11 頁(yè)3.1.1 知技準(zhǔn)備清除幀:選中關(guān)鍵幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“清除幀”，可以清除幀和關(guān)鍵幀中的內(nèi)容，被清除以后的幀內(nèi)部將沒(méi)有任何內(nèi)容，該幀將轉(zhuǎn)換為空白關(guān)鍵幀，其后的幀將變成關(guān)鍵幀。Flash CC 基礎(chǔ)與案例教程第 12 頁(yè)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 頁(yè)3.1.1 知技準(zhǔn)備2.逐幀動(dòng)畫創(chuàng)建方法方法一：導(dǎo)入靜態(tài)圖片 使用數(shù)碼相機(jī)等連拍圖片，連續(xù)導(dǎo)入到Flash中，即會(huì)建立一段逐幀動(dòng)畫，具體操作方法是：（1）使用數(shù)碼相機(jī)連拍照片。（2）新建Flash文檔，選擇“文件”菜單“導(dǎo)入到庫(kù)”對(duì)話框，選中所有素材圖片一并導(dǎo)入到庫(kù)中。（3）按下快捷鍵Ctrl+L打開庫(kù)面板，拖動(dòng)第一幅圖片到舞臺(tái)上，按下快捷鍵Ctrl+I打開信息面板，設(shè)置圖片X和Y坐標(biāo)均為0，使圖片沖齊舞臺(tái)左上角。（4）在時(shí)間軸第2幀按下快捷鍵F7創(chuàng)建空關(guān)鍵幀，同理，拖放庫(kù)中第二幅圖片并設(shè)置相同的位置坐標(biāo)。（5）同理，制作第3幀、第4幀將所有圖片按順序分別放

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

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

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

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

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

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

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

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

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

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

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