Flash平面動畫制作.ppt

1、Flash平面動畫制作,第3章 Flash平面動畫制作,教學(xué)目標(biāo),教學(xué)重點(diǎn)、難點(diǎn),本章小結(jié),教學(xué)內(nèi)容,教學(xué)目標(biāo),通過這章的學(xué)習(xí)，學(xué)生可以熟練的掌握逐幀動畫、運(yùn)動補(bǔ)間動畫、形狀補(bǔ)間動畫、遮罩層動畫和引導(dǎo)動畫這5種動畫的制作方法和技巧。,第3章 Flash平面動畫制作,教學(xué)重點(diǎn)與難點(diǎn),第3章 Flash平面動畫制作,逐幀動畫、運(yùn)動補(bǔ)間動畫、形狀補(bǔ)間動畫、遮罩層動畫和引導(dǎo)動畫的制作方法和設(shè)計(jì)技巧。,教學(xué)內(nèi)容,本章小結(jié),第3章 Flash平面動畫制作,3.1 Flash平面動畫制作概述,3.5 “閃閃的紅星”案例,3.6 “蝴蝶飛”案例,3.7 “賀卡”案例,本章計(jì)劃授課14學(xué)時(shí),3.2 “運(yùn)動的小青

2、蛙”案例,3.3 “恭賀新禧”案例,3.4 “宇宙集錦”案例,本節(jié)內(nèi)容,Flash平面動畫的基本概念,Flash平面動畫的基本制作方法,平面動畫的設(shè)計(jì)技巧,練習(xí),3.1 Flash平面動畫制作的概述,動畫任何隨著時(shí)間而發(fā)生的位置或者形態(tài)上的改變。 Flash動畫是由一個(gè)個(gè)“幀”上的圖片連接而成的，幀是動畫 最基本的單位。 舞臺是制作動畫的地方，在播放器中播放動畫時(shí)，只有舞臺中的對象被顯示。 工作區(qū)域舞臺和周圍的灰度區(qū)域 場景是動畫的另一個(gè)組成部分是“場景”的變換，就像一部電影不可能只在一個(gè)地方拍攝一樣，制作Flash動畫也需要有不同的場景。,一、 Flash平面動畫的基本概念,3.1 Flas

3、h平面動畫制作的概述,1、逐幀動畫 將動畫的每一幀均設(shè)置為關(guān)鍵幀，通過改變每一個(gè)關(guān)鍵幀中的圖像而產(chǎn)生動畫效果。 逐幀動畫是Flash所提供的最基本的動畫形式。 2、形狀補(bǔ)間動畫 形狀補(bǔ)間動畫被應(yīng)用于基本形狀的變化，它是某一個(gè)對象在一定時(shí)間內(nèi)其形狀發(fā)生過渡型漸變的動畫。 形狀補(bǔ)間動畫用位于時(shí)間軸上動畫的開始幀與結(jié)束幀之間區(qū)域的一個(gè)綠色的連續(xù)箭頭表示。,二、 Flash平面動畫的基本制作方法,3.1 Flash平面動畫制作的概述,3、運(yùn)動補(bǔ)間動畫運(yùn)動補(bǔ)間動畫被應(yīng)用于把對象由一個(gè)地方移動到另一個(gè)地方的情況，也可應(yīng)用于形成物體的縮放、傾斜或者旋轉(zhuǎn)的動畫，還可用于形成元件的顏色和透明度變化的動畫。 運(yùn)動

4、補(bǔ)間動畫用位于時(shí)間軸上動畫的開始幀與結(jié)束幀之間區(qū)域的一個(gè)藍(lán)色的連續(xù)箭頭表示。,二、 Flash平面動畫的基本制作方法,3.1 Flash平面動畫制作的概述,4、遮罩動畫遮罩動畫是將一個(gè)圖層設(shè)置為遮罩層，此圖層中的對象將相應(yīng)地轉(zhuǎn)換為遮罩對象。其它圖層則為被遮罩層，這些圖層的對象被遮罩對象所屏蔽的那部分才可顯示。 5、引導(dǎo)動畫引導(dǎo)動畫實(shí)際上是在運(yùn)動補(bǔ)間動畫的基礎(chǔ)上添加一個(gè)引導(dǎo)圖層，該圖層有一條可以引導(dǎo)運(yùn)動方向的引導(dǎo)線，使另一個(gè)圖層中的對象依據(jù)此引導(dǎo)線進(jìn)行運(yùn)動的動畫。,二、 Flash平面動畫的基本制作方法,3.1 Flash平面動畫制作的概述,注意以下幾個(gè)要點(diǎn)： 1要想吸引觀眾，最重要的是讓動作具

5、有一定的含義。 2動作應(yīng)該支持動畫的內(nèi)容和主題。 3動作可以像文章和顏色一樣傳達(dá)情緒、感情和個(gè)性。 4在日常生活中仔細(xì)觀察動作并記錄下來，建立一個(gè)創(chuàng)建動畫時(shí)的“資源庫”。 5動作的設(shè)計(jì)要符合自然規(guī)律。,三、 Flash平面動畫的設(shè)計(jì)技巧,3.1 Flash平面動畫制作的概述,本節(jié)內(nèi)容,案例效果,操作步驟,技術(shù)要點(diǎn),練習(xí),3.2 “運(yùn)動的小青蛙”逐幀動畫案例,一、案例效果,重點(diǎn)與難點(diǎn)： 逐幀動畫的制作技巧和卡通人物的繪圖技巧。,3.2 “運(yùn)動的小青蛙”逐幀動畫案例,二、操作步驟,本案例是在2.5“小青蛙”案例的基礎(chǔ)上制作而成。 1：打開素材“青蛙側(cè)面”的Flash工程文件。并把文件另存為“運(yùn)動的

6、小青蛙” 2：制作逐幀動畫 第一步：建立一個(gè)命名為“運(yùn)動合成”的影片剪輯元件。,3.2 “運(yùn)動的小青蛙”逐幀動畫案例,二、操作步驟,第二步：打開“庫”面板把“頭”、“身體”、“左手”、“右手”、“左腳”、“右腳”元件拖到“運(yùn)動合成”元件中，并分布到各個(gè)圖層以對應(yīng)的名字命名 。 第三步：分別檢查左右手、頭和腳的中心點(diǎn)位置，根據(jù)人的基本運(yùn)動規(guī)律來確定各個(gè)關(guān)節(jié)運(yùn)動的中心點(diǎn)。,3.2 “運(yùn)動的小青蛙”逐幀動畫案例,二、操作步驟,第四步：畫腳的動作,3.2 “運(yùn)動的小青蛙”逐幀動畫案例,二、操作步驟,第五步：在對應(yīng)的幀上依次設(shè)置如下相應(yīng)的動作。 3測試影片，保存文件，并導(dǎo)出影片,3.2 “運(yùn)動的小青蛙”

7、逐幀動畫案例,三、技術(shù)要點(diǎn),1、制作逐幀動畫的基本步驟： （1）選擇一關(guān)鍵幀作為逐幀動畫的開始幀。 （2）在開始幀中繪制或?qū)雱赢嬓蛄兄械牡?張圖片。 （3）選擇下一關(guān)鍵幀，并進(jìn)行任意修改或?qū)肜L制一張新圖片。 （4）繼續(xù)添加關(guān)鍵幀并改變相應(yīng)關(guān)鍵幀的內(nèi)容直到最終完成動畫。 （5）測試影片并導(dǎo)出一個(gè).swf文件。,3.2 “運(yùn)動的小青蛙”逐幀動畫案例,2、卡通人物的繪圖技巧 （1）身體的比例：當(dāng)你畫真實(shí)人物時(shí)，身高一般是按六至七個(gè)頭來畫的，而卡通人物，最常見的比例是三至四個(gè)頭高 。 （2）基本結(jié)構(gòu)：卡通人物多數(shù)是以球體或圓柱體為基礎(chǔ)，因?yàn)檫@兩種形狀比較容易掌握。 下圖是繪制卡通人物的一般流程 ：

8、,三、技術(shù)要點(diǎn),3.2 “運(yùn)動的小青蛙”逐幀動畫案例,(1) 在制作逐幀動畫時(shí)，前后幀之間的位置關(guān)系如何？ (2) 利用青蛙為元素制作一組青蛙走路的動畫 (參考從前言中所提供的網(wǎng)址下載的本章的“練習(xí)參考”文件夾中的Flash工程文件“走路參考”) 。,四、練習(xí),3.2 “運(yùn)動的小青蛙”逐幀動畫案例,本節(jié)內(nèi)容,案例效果,操作步驟,技術(shù)要點(diǎn),練習(xí),3.3 “恭賀新禧”案例,一、案例效果,重點(diǎn)與難點(diǎn)： 形狀補(bǔ)間動畫的特點(diǎn)、創(chuàng)建方法，及如何設(shè)置形狀提示點(diǎn)來控制形狀補(bǔ)間動畫的中間過程。,3.3 “恭賀新禧”案例,二、操作步驟,1新建文檔并命名 啟動AdobeFlashCS3后，新建一個(gè)文檔，對背景顏色和

9、舞臺大小進(jìn)行相應(yīng)的設(shè)置，保存文檔，命名為“恭賀新禧 ”。 2.設(shè)置背景圖片 將”圖層1”改名為“背景” ，把素材中的背景圖片文件“焰火”導(dǎo)入到舞臺，并設(shè)置寬為400、高為300 ，居中對齊，擴(kuò)展到100幀。鎖定圖層。,3.3 “恭賀新禧”案例,二、操作步驟,3繪制燈籠 第一步：插入4個(gè)新圖層 ，分別命名為“恭”、“賀”、“新”、“禧”。將“賀”、“新”、“禧”三個(gè)圖層鎖定。單擊“恭”圖層的第20幀，按F6鍵增加一個(gè)關(guān)鍵幀。利用“矩形工具”和“橢圓工具”繪制如下左“燈籠”圖形： 第二步：分別在“賀”、“新”、“禧”圖層中第20幀單擊F6鍵添加 關(guān)鍵幀，將燈籠粘貼到屏幕上并調(diào)整到適當(dāng)?shù)奈恢?。如上?/p>

10、圖。,3.3 “恭賀新禧”案例,二、操作步驟,4繪制“恭賀新禧”四個(gè)文字 第一步：解鎖“恭”圖層，鎖定其它所有圖層。在第40幀添加一個(gè)關(guān)鍵幀。將原來的燈籠刪掉。單擊【文本工具】，設(shè)置字體為“華文彩云”，字大小為“74”，字體顏色為純紅色，使用【文本工具】中輸入“恭”字。將此漢字?jǐn)[在原來燈籠的位置。選中此漢字，用Ctrl+B鍵將其打散成形狀。將打散的漢字的內(nèi)外邊界顏色均設(shè)置為純黃色。 第二步：用同樣的方法給“賀”、“新”和“禧”圖層也分別在第40幀繪制一個(gè)“賀”、“新”和“禧”字。最終效果如圖,3.3 “恭賀新禧”案例,二、操作步驟,5繪制其它關(guān)鍵幀，并設(shè)置形變動畫 第一步：解鎖“恭”、“賀”、

11、“新”和“禧”四個(gè)圖層。給此四個(gè)圖層均在第40幀、第60幀和第80幀添加一個(gè)關(guān)鍵幀。 第二步：鼠標(biāo)右擊“恭”圖層的第20幀至第40幀之間，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀” ，用同樣的方法給“恭”圖層的第60幀至第80幀之間也創(chuàng)建形狀補(bǔ)間動畫。 用同樣的方法給“賀”、“新”、“禧”三個(gè)圖層的第20幀至第40幀之間、第60幀至第80幀之間也創(chuàng)建形狀補(bǔ)間動畫。 6、測試影片，保存文件，并導(dǎo)出影片。,3.3 “恭賀新禧”案例,三 、技術(shù)要點(diǎn),制作形狀補(bǔ)間動畫 形狀補(bǔ)間動畫的方法有如下三種： （1）選擇開始關(guān)鍵幀和結(jié)束關(guān)鍵幀間的任何一幀，在“屬性”面板中設(shè)置。 （2）右擊開始關(guān)鍵幀和結(jié)束關(guān)鍵幀間的

12、任何一幀，在快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”。 （3）單擊開始關(guān)鍵幀和結(jié)束關(guān)鍵幀間的任何一幀，選擇【插入】【時(shí)間軸】【創(chuàng)建補(bǔ)間形狀】菜單項(xiàng)。,3.3 “恭賀新禧”案例,三 、技術(shù)要點(diǎn),2. 設(shè)置形狀提示點(diǎn) 在已經(jīng)創(chuàng)建了一個(gè)基本的形狀補(bǔ)間動畫后，可以按照以下步驟添加形狀提示點(diǎn)： （1）首先在時(shí)間軸中的形狀補(bǔ)間動畫的開始關(guān)鍵幀中選擇一個(gè)形狀，然后單擊【修改】【形狀】【添加形狀提示】菜單項(xiàng)，F(xiàn)lash會在舞臺上放置一個(gè)用字母標(biāo)記的紅色小圓圈，這就是形狀提示點(diǎn)?？梢杂靡陨戏椒ㄌ砑佣鄠€(gè)形狀提示點(diǎn)，它們都按字母順序標(biāo)識。 （2）在開始關(guān)鍵幀的形狀上確定一個(gè)點(diǎn)，用【箭頭工具】進(jìn)行選擇并移動第一個(gè)形狀提示點(diǎn)，把

13、它放在形狀上一個(gè)用戶想要其與最終形狀中的一塊區(qū)域進(jìn)行匹配的區(qū)域上（比如說，一個(gè)棱角或一段曲線）,3.3 “恭賀新禧”案例,三 、技術(shù)要點(diǎn),（3）當(dāng)把播放頭移動到形狀補(bǔ)間動畫的結(jié)束幀上時(shí)，會看到一個(gè)與放在開始幀上的標(biāo)了字母的形狀提示點(diǎn)相匹配的另一個(gè)標(biāo)了相同字母的形狀提示點(diǎn)。把這個(gè)形狀提示點(diǎn)用【箭頭工具】定位，從而在最終形狀上標(biāo)記出一塊應(yīng)該與初始形狀上特定區(qū)域相匹配的區(qū)域。當(dāng)結(jié)束關(guān)鍵幀中的形狀提示點(diǎn)的顏色由紅色變成了綠色（如圖3.43所示），而在開始關(guān)鍵幀中的形狀提示點(diǎn)由紅色變成了黃色，則表示形狀提示點(diǎn)已經(jīng)與作品建立了正確的連接。 （4）將播放頭在時(shí)間軸上移動預(yù)覽新的形變過程。不停地加入形狀提示點(diǎn)

14、，或?qū)λ鼈冞M(jìn)行重新定位，直到動畫產(chǎn)生出了理想的形變過程。,3.3 “恭賀新禧”案例,（1）制作一個(gè)笑臉到哭臉的變臉形變動畫，效果如下圖所示。 （提示：笑臉系列形狀可采用【文本工具】輸入，字體采用“Windings”，輸入大寫字母“L”則可輸入一個(gè)笑臉，其它兩張臉對應(yīng)著大寫字母“K”和“L”。）,四、練習(xí),3.3 “恭賀新禧”案例,(2) 制作一個(gè)變手的形變動畫，并通過設(shè)置形狀提示點(diǎn)來控制手指之間的對應(yīng)變換位置。動畫中手的姿勢如下圖所示。 （提示：手的系列形狀可采用“文本工具”輸入，字體采用“Windings”，輸入大寫字母“A”“G”實(shí)現(xiàn)）,四、練習(xí),3.3 “恭賀新禧”案例,本節(jié)內(nèi)容,案例效

15、果,操作步驟,技術(shù)要點(diǎn),練習(xí),3.4 “宇宙集錦”案例,一、案例效果,重點(diǎn)與難點(diǎn)： 運(yùn)動補(bǔ)間動畫的制作方法和技巧，及如何設(shè)置旋轉(zhuǎn)、運(yùn)動的快慢和逐漸消失的效果。,3.4 “宇宙集錦”案例,二、操作步驟,1新建文檔并命名 啟動AdobeFlashCS3后，新建一個(gè)文檔，對舞臺大小進(jìn)行設(shè)置寬為400、高為300 ，保存文檔，命名為“宇宙集錦 ”。 2.創(chuàng)建宇宙圖形符號 新建一個(gè)“圖1”的圖形元件，導(dǎo)入本案例對應(yīng)的素材文件夾中的“宇宙1”的圖片文件 。 用同樣的方法導(dǎo)入文件名為“宇宙2”至“宇宙6”圖片文件，分別對應(yīng)生成名為“圖2”至“圖6”的圖形元件。,3.4 “宇宙集錦”案例,二、操作步驟,3創(chuàng)建

16、“Loading”文本的拉伸效果 第一步：新建一個(gè)名稱為“Loading”的影片剪輯元件。 第二步：選用【文本工具】輸入文字“Loading”，在“屬性”面板中設(shè)置此文字的字體為“黑體”，字號為25，字體顏色為白色。用Ctrl+B將文字打散。將第1幀復(fù)制到第2幀至第13幀。鼠標(biāo)單擊第1幀，只保留“L”字母，刪除其它字符圖形。從第2幀開始逐步增加字符圖形直至第13幀。鼠標(biāo)單擊第18幀，按F5鍵增加一個(gè)擴(kuò)展幀。,3.4 “宇宙集錦”案例,4創(chuàng)建“光線”圖形符號 第一步：新建名稱為“光線”的圖形元件。 第二步：利用“橢圓工具”繪制如下圖的光線效果：,二、操作步驟,3.4 “宇宙集錦”案例,5創(chuàng)建“光

17、束”影片剪輯 第一步：新建名稱為“光束”的影片剪輯元件 。 第二步：將“光線”圖形符號拖入舞臺中央，并用Ctrl+B打散。鼠標(biāo)單擊第25幀，按F6鍵插入關(guān)鍵幀，將光線沿直線運(yùn)動軌跡拖動至舞臺的邊緣。鼠標(biāo)點(diǎn)擊第30幀按F5鍵插入擴(kuò)展幀。單擊第1幀，將“光線”圖形符號縮小并移動至舞臺中心點(diǎn)。鼠標(biāo)右擊第1幀至第25幀之間，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”。再新建多個(gè)圖層，對每個(gè)圖層按照上述方法在舞臺的不同角度做“光線”圖形符號的形變動畫。最終結(jié)果如下圖,二、操作步驟,3.4 “宇宙集錦”案例,6設(shè)置背景圖片 導(dǎo)入背景圖片到場景1中，選擇本案例對應(yīng)的素材文件夾中的背景圖片文件“sky”。設(shè)置此圖

18、片的寬為400、高為300。通過設(shè)置“對齊”面板選項(xiàng)，使背景圖片位于舞臺中央 。 7創(chuàng)建“光”圖層 創(chuàng)建新圖層命名為“光”，將影片剪輯“光束”拖至舞臺中央，并擴(kuò)展制120幀。 8創(chuàng)建“Loading”圖層 創(chuàng)建新圖層命名為“Loading”，將影片剪輯“Loading”拖至舞臺左下角。并擴(kuò)展制120幀。,二、操作步驟,3.4 “宇宙集錦”案例,9創(chuàng)建宇宙圖片動畫 第一步：創(chuàng)建新圖層命名為“圖片1”，將圖形符號“圖1”拖到舞臺左端，并將圖形符號縮小。單擊第10幀按F6插入關(guān)鍵幀，水平移動圖形符號“圖1”的位置至屏幕中央，并放大。單擊第20幀按F6插入關(guān)鍵幀，選用【箭頭工具】，在“屬性”面板中設(shè)置

19、“顏色”選項(xiàng)為“Alpha”，值為“0%” 。鼠標(biāo)右擊第1幀至第10幀之間，在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間動畫”（或在“屬性”面板中的設(shè)置），這樣就創(chuàng)建了一個(gè)運(yùn)動補(bǔ)間動畫，此時(shí)在第1幀至第10幀之間將出現(xiàn)紫色帶箭頭區(qū)域。采用同樣的方法在第10幀至第20幀之間也創(chuàng)建運(yùn)動補(bǔ)間動畫。,二、操作步驟,3.4 “宇宙集錦”案例,第二步：按照以上方法，可設(shè)計(jì)“圖片2”至“圖片6”從舞臺邊緣的不同位置沿著不同的角度由小變大，或直接或旋轉(zhuǎn)地進(jìn)入舞臺中央，然后再慢慢淡出消失 掉。 10測試影片，保存文件，并導(dǎo)出影片,二、操作步驟,3.4 “宇宙集錦”案例,三 、技術(shù)要點(diǎn),制作運(yùn)動補(bǔ)間動畫 創(chuàng)建運(yùn)動補(bǔ)間動畫的方

20、法有如下三種： （1）選擇開始關(guān)鍵幀和結(jié)束關(guān)鍵幀間的任何一幀，在“屬性”面板中設(shè)置。 （2）右擊開始關(guān)鍵幀和結(jié)束關(guān)鍵幀間的任何一幀，在快捷菜單中選擇“創(chuàng)建補(bǔ)間動畫”。 （3）單擊開始關(guān)鍵幀和結(jié)束關(guān)鍵幀間的任何一幀，選擇【插入】【時(shí)間軸】【創(chuàng)建補(bǔ)間動畫】菜單項(xiàng)。,3.4 “宇宙集錦”案例,的,2.設(shè)置旋轉(zhuǎn)的運(yùn)動效果 旋轉(zhuǎn)的運(yùn)動效果是使實(shí)例在運(yùn)動的同時(shí)旋轉(zhuǎn)。設(shè)置方法是在起始關(guān)鍵幀和結(jié)束關(guān)鍵幀之間已經(jīng)設(shè)置好了運(yùn)動補(bǔ)間動畫后再通過“屬性”面板中的“旋轉(zhuǎn)”項(xiàng)來設(shè)置。其中“旋轉(zhuǎn)”項(xiàng)用于設(shè)置旋轉(zhuǎn)的方式，有“無”、“自動”、“順時(shí)針”、“逆時(shí)針”四個(gè)選項(xiàng)；后面的“次”項(xiàng)用于設(shè)置從運(yùn)動補(bǔ)間動畫開始到結(jié)束元件旋轉(zhuǎn)

21、幾次。,三 、技術(shù)要點(diǎn),3.4 “宇宙集錦”案例,3. 設(shè)置運(yùn)動的快慢效果 時(shí)快時(shí)慢的運(yùn)動效果也是在起始關(guān)鍵幀和結(jié)束關(guān)鍵幀之間已經(jīng)設(shè)置好了運(yùn)動補(bǔ)間動畫后再通過“屬性”面板中的來設(shè)置。其中“緩動”項(xiàng)用于調(diào)節(jié)對象運(yùn)動過程中的速度比例關(guān)系，正數(shù)表示先快后慢，負(fù)數(shù)表示先慢后快，零值表示動作勻速變化；后面的“編輯”按鈕用于打開“自定義緩入/緩出”面板。（詳細(xì)建書97頁） 4. 設(shè)置物體逐步消失的效果 逐步消失的運(yùn)動效果主要是通過設(shè)置運(yùn)動補(bǔ)間動畫的結(jié)束關(guān)鍵幀中物體的“Alpha”值為“0%”來實(shí)現(xiàn)的，此設(shè)置可通過“屬性”面板中的項(xiàng)來完成。,三 、技術(shù)要點(diǎn),3.4 “宇宙集錦”案例,四 、練習(xí),(1) 制作

22、一個(gè)紅色小球(如書圖126頁3.140所示)旋轉(zhuǎn)運(yùn)動的動畫。紅色小球繪制效果如書圖3.140所示(注意設(shè)置小球的亮點(diǎn)在左上端)。小球先從舞臺的左上角順時(shí)針旋轉(zhuǎn)兩周到達(dá)舞臺底端中央(要求：旋轉(zhuǎn)的速度是先慢后快，形狀是由小變大)，再從底端中央逆時(shí)針旋轉(zhuǎn)兩周到達(dá)舞臺右上角(要求：旋轉(zhuǎn)的速度是先快后慢，形狀是由大變小直至消失)。 (2) 自行制作一個(gè)人走路的影片剪輯(依照從前言中所提供的網(wǎng)址下載的本章的“練習(xí)參考”文件夾中的Flash工程文件“走路參考”)，制作一個(gè)人從舞臺左邊走到舞臺右邊的運(yùn)動動畫。,3.4 “宇宙集錦”案例,本節(jié)內(nèi)容,案例效果,操作步驟,技術(shù)要點(diǎn),練習(xí),3.5 “閃閃的紅星”遮罩動

23、畫案例,一、案例效果,重點(diǎn)與難點(diǎn)： 遮罩動畫的制作方法和技巧。,3.5 “閃閃的紅星”遮罩動畫案例,1新建文檔并命名 啟動AdobeFlashCS3后，新建一個(gè)文檔，背景顏色和舞臺大小都使用默認(rèn)，保存文檔，命名為“閃閃的紅星”。 2.繪制“放射圓”元件 第一步：使用“工具箱”中的橢圓工具 和線條工具 繪制 一個(gè)粗細(xì)為4的橢圓和直線。并用變形工具把直線的中心點(diǎn)調(diào)整至圓的中心點(diǎn).如下圖：,二、操作步驟,3.5 “閃閃的紅星”遮罩動畫案例,第二步：打開“窗口”菜單中的“變形”面板.設(shè)置旋轉(zhuǎn)角度為”10度“單擊”應(yīng)用復(fù)制”按鈕35次.選中所有線條，單擊“修改”“形狀”“將線條轉(zhuǎn)化為填充”，得到下面的左

24、邊的放射圓1圖形元件: 第三步：新建一個(gè)“放射圓2”的圖形元件。把“放射圓1”拉入舞臺中，并水平翻轉(zhuǎn)。得到上面的右圖。,二、操作步驟,3.5 “閃閃的紅星”遮罩動畫案例,3、制作“光芒閃閃”影片剪輯元件 第一步：新建一個(gè)“光芒閃閃”的影片剪輯元件。 把“放射圓1”拉入舞臺中，改變色調(diào)為“黃色調(diào)”，并設(shè)置一個(gè)100幀的動作補(bǔ)間動畫，使它“逆時(shí)針”旋轉(zhuǎn)一周。 第二步：再新建一個(gè)圖層，把“放射圓2”拉入舞臺中，設(shè)置該圖層為“遮罩層”。 得到效果如圖：,二、操作步驟,3.5 “閃閃的紅星”遮罩動畫案例,4、制作“五角星”圖形元件 第一步：新建一個(gè)“五角星”的圖形元件。 第二步：利用工具欄中的“多邊形工

25、具”和“線條工具”繪制一個(gè)五角星如下圖：,二、操作步驟,3.5 “閃閃的紅星”遮罩動畫案例,5、整合圖形 第一步：在場景1里分別新建“背景”、“光芒”和“五角星”3個(gè)圖層。 第二步：在“背景”圖層里繪制一個(gè)淺藍(lán)色的矩形背景。 第三步：把做好的“光芒閃閃”元件和“五角星”元件 分別拉入對應(yīng)的圖層里。 6、測試影片，保存文件，并導(dǎo)出影片。,二、操作步驟,3.5 “閃閃的紅星”遮罩動畫案例,三 、技術(shù)要點(diǎn),1. 制作遮罩動畫 在制作遮罩動畫的時(shí)候用到兩個(gè)圖層：遮罩層和被遮罩層。被遮罩層上的圖形通過遮罩層顯示出來。播放動畫的時(shí)候，遮罩層上的內(nèi)容不會被顯示出來，被遮罩層上位于遮罩層之外的內(nèi)容也不被顯示。

26、 2. 設(shè)置一個(gè)圖層遮罩多個(gè)圖層 在Flash中一個(gè)遮罩圖層可以同時(shí)遮罩多個(gè)被遮罩圖層。當(dāng)把某個(gè)圖層設(shè)置為遮罩層時(shí)，它下面的圖層自動被設(shè)置為被遮罩層。當(dāng)需要使一個(gè)圖層遮罩多個(gè)圖層時(shí)，可以通過下面的兩種方法實(shí)現(xiàn)：,3.5 “閃閃的紅星”遮罩動畫案例,（1）當(dāng)需要被添加為被遮罩層的圖層位于遮罩層的上方時(shí)，選中該圖層，單擊并拖動它到遮罩層下方。 （2）當(dāng)需要被添加為被遮罩層的圖層位于遮罩層的下方時(shí)，在該圖層上右擊彈出快捷菜單，選擇“屬性”，打開“圖形屬性”對話框，選擇類型。 如果需要取消遮罩與被遮罩的關(guān)系，可以在被遮罩層打開“圖層屬性”對話框，設(shè)置為類型；或者把該圖層拖動到遮罩層上方。,三 、技術(shù)要

27、點(diǎn),3.5 “閃閃的紅星”遮罩動畫案例,四 、練習(xí),請制作一個(gè)“瀑布”遮罩動畫，該動畫制作時(shí)截取了水流部分的圖像作為被遮罩層，遮罩層是使用筆刷工具繪制的水波線條，遮罩層的波紋從上到下做運(yùn)動 。效果如下圖：,3.5 “閃閃的紅星”遮罩動畫案例,本節(jié)內(nèi)容,案例效果,操作步驟,技術(shù)要點(diǎn),練習(xí),3.6 “蝴蝶飛”引導(dǎo)動畫案例,一、案例效果,重點(diǎn)與難點(diǎn)： 引導(dǎo)動畫的制作方法與技巧，以及應(yīng)用引導(dǎo)路徑的技巧。,3.6 “蝴蝶飛”引導(dǎo)動畫案例,1新建文檔并命名 啟動AdobeFlashCS3后，新建一個(gè)文檔，背景顏色和舞臺大小都使用默認(rèn)，保存文檔，命名為“蝴蝶飛”。 。 2導(dǎo)入背景圖片 修改“圖層1”的名稱為

28、“背景” 。導(dǎo)入本案例對應(yīng)的素材文件夾中的“花叢.bmp ”的圖片文件 ，利用“對齊”面板縮放成與舞臺大小一樣 。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,3制作“蝴蝶飛1”和“蝴蝶飛2”元件 第一步：新建一個(gè)命名為“身體” 的圖形元件。如下左圖： 第二步：新建一個(gè)“圖形”元件，命名為“翅膀”，導(dǎo)入圖片本案例對應(yīng)的素材文件夾中的“蝴蝶1” ，并進(jìn)行相應(yīng)的調(diào)整。效果如上右圖。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,第三步：新建一個(gè)“影片剪輯”，命名為“蝴蝶飛1” 。 A、在“蝴蝶飛1”元件中建立2個(gè)圖層，并給圖層分別命名為“身體”和“翅膀”。利用前面所做的“身體”和“翅膀”元件，組

29、成一只完整的蝴蝶效果如下左圖 B、在“翅膀”的第2幀插入關(guān)鍵幀， 然后選中【任意變形工具】，將左邊“翅膀1”實(shí)例的變形中心點(diǎn)調(diào)整到與身體接觸位置，然后向里壓，使用同樣的方法調(diào)整右邊的實(shí)例，效果如上右圖。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,C、為了讓蝴蝶有節(jié)奏的拍動翅膀，同時(shí)選中“翅膀”的第1、2幀，點(diǎn)右鍵“復(fù)制幀”，然后將其粘貼到第6、7幀、9、10幀、12、13幀、17、18幀、22、23幀，最后在25幀插入擴(kuò)展幀，這樣就有了蝴蝶不斷煽動翅膀的效果，幀的設(shè)置如圖 ： D、利用和“蝴蝶1”影片剪輯元件同樣的制作方法可以得到 “蝴蝶2”影片剪輯元件。只是翅膀利用素材文件夾中的“蝴蝶2

30、.jpg” 來制作。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,4制作“閃爍文字”元件 （1）新建一個(gè)“圖形”元件，命名為“星星”，在“顏色”面板中設(shè)置“填充色”類型為“放射狀”，左右“色標(biāo)”都為白色，右邊“色標(biāo)”的透明度為0，設(shè)置好后，繪制一個(gè)圓 。再利用【矩形工具】繪制出光線效果。效果如圖：,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,（2）新建一個(gè)“影片剪輯”，命名為“星星旋轉(zhuǎn)”，將“星星”元件拖放到影片剪輯中，適當(dāng)調(diào)整大小，在第15幀插入關(guān)鍵幀，創(chuàng)建運(yùn)動補(bǔ)間動畫，在“屬性”面板中設(shè)置“逆時(shí)針”旋轉(zhuǎn)“1”次。 （3）新建一個(gè)“圖形”元件，命名為“文字”，使用【文本工具】輸入“Ilo

31、veyou”，設(shè)置字體顏色為粉色（“#FF33CC”）。然后打散文字，使用【筆刷工具】適當(dāng)調(diào)整大小，把字之間連起來，效果如圖：,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,（4）新建一個(gè)“影片剪輯”，命名為“閃爍文字”，將“文字”元件拖放到影片剪輯中，并把“圖層1”命名為“文字”，然后在40幀按F5鍵插入擴(kuò)展幀； 新建一個(gè)圖層，命名為“星星1”，從“庫”中將“星星旋轉(zhuǎn)”元件拖放到該圖層，放在“文字”圖層中“i”的頂部 。在“星星1”圖層的第40幀插入關(guān)鍵幀，將該幀的“星星旋轉(zhuǎn)”實(shí)例拖動到“文字”圖層中“i”的底部，然后在1至40幀創(chuàng)建補(bǔ)間動畫。在“星星1”圖層上方創(chuàng)建一個(gè)引導(dǎo)層，將“文字”圖

32、層的第1幀復(fù)制到引導(dǎo)層的第1幀，并將文字打散成矢量圖形，這樣星星將沿著文字線條運(yùn)動。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,（5）在“星星1”圖層的上方新建兩個(gè)圖層，命名為“星星2”和“星星3” 。利用和“星星1”相同的方法制作，效果如下圖：,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,的,5布置主場景 （1）回到主場景，新建四個(gè)圖層，從上到下4個(gè)圖層為“文字”、“蝴蝶2”、 “閃爍”和“蝴蝶1” （2）從“庫”中將“星星”元件拖放到“閃爍”圖層，使用【任意變形工具】適當(dāng)調(diào)整大小，按住Ctrl鍵多復(fù)制幾個(gè)“星星”實(shí)例，選中該圖層的第1幀，按F8鍵將這些星星轉(zhuǎn)換為“影片剪輯”，命名為“

33、閃爍星星”。 （3）回到主場景，在“背景”和“閃爍”圖層的第300幀插入擴(kuò)展幀。接著從“庫”中把“蝴蝶飛1”影片剪輯拖放到“蝴蝶1”圖層，使用【任意變形工具】調(diào)整大小并旋轉(zhuǎn)一定的角度，并在第300幀插入擴(kuò)展幀。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,的,（4）從“庫”中把“蝴蝶飛2”拖放到“蝴蝶2”圖層的第1幀，并調(diào)整其大小和旋轉(zhuǎn)角度，在第150幀插入關(guān)鍵幀，并創(chuàng)建運(yùn)動補(bǔ)間動畫。在“蝴蝶2”圖層的上方新建一個(gè)“引導(dǎo)層”在引導(dǎo)層上使用【鉛筆工具】繪制一條引導(dǎo)線 ，并設(shè)置“蝴蝶2” 的引導(dǎo)動畫如下圖：,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,的,（5）在“蝴蝶2”圖層的第250幀和3

34、00幀插入關(guān)鍵幀，并在這兩個(gè)幀之間創(chuàng)建運(yùn)動補(bǔ)間動畫；在引導(dǎo)層的第151幀插入空白關(guān)鍵幀，在250幀插入關(guān)鍵幀，并在第250幀繪制一條引導(dǎo)線，將“蝴蝶2”圖層的第250幀、300幀上的蝴蝶對齊到引導(dǎo)線的首端和末端，制作引導(dǎo)動畫。,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,的,（6）在“文字”圖層的第150幀插入關(guān)鍵幀，將“閃爍文字”元件拖到該幀，放在舞臺左下方，如圖3.97所示；在該圖層的200幀插入關(guān)鍵幀，然后將150幀上的文字設(shè)為透明，并在兩個(gè)關(guān)鍵幀之間創(chuàng)建補(bǔ)間動畫，最后在300幀插入擴(kuò)展幀。 6測試影片，保存文件，并導(dǎo)出影片,二、操作步驟,3.6 “蝴蝶飛”引導(dǎo)動畫案例,制作引導(dǎo)動畫

35、引導(dǎo)層上繪制的是引導(dǎo)路徑，這些線條可以是使用鋼筆、鉛筆、線條、橢圓工具、矩形工具或畫筆工具繪制出的。 被引導(dǎo)層上可以創(chuàng)建的對象包括： 元件實(shí)例、文字或群組等，但是不能是分散的矢量圖形。 引導(dǎo)動畫的創(chuàng)建主要分為三大步驟： （1）建立運(yùn)動補(bǔ)間動畫，如本案例中先創(chuàng)建“蝴蝶2”圖層第1至150幀的運(yùn)動補(bǔ)間動畫。 （2）創(chuàng)建引導(dǎo)層，在引導(dǎo)層中繪制引導(dǎo)線。 （3）調(diào)整被引導(dǎo)層上對象的位置：引導(dǎo)動畫首幀上實(shí)例中心點(diǎn)與運(yùn)動引導(dǎo)線的首端對齊，引導(dǎo)動畫末幀上實(shí)例中心點(diǎn)與運(yùn)動引導(dǎo)線的末端對齊。,三、技術(shù)要點(diǎn),3.6 “蝴蝶飛”引導(dǎo)動畫案例,2. 應(yīng)用引導(dǎo)路徑的技巧 （1）引導(dǎo)線要平滑、流暢。轉(zhuǎn)折點(diǎn)過多或者轉(zhuǎn)彎過急、

36、線條中斷或者交叉重疊，都可能導(dǎo)致引導(dǎo)線不能成功引導(dǎo)。 （2）被引導(dǎo)層上的對象的變形中心一定要位于引導(dǎo)線上，否則無法引導(dǎo)，如果為不規(guī)則對象，可以適當(dāng)調(diào)整其變形中心的位置，另外，按下“工具箱”中的【貼緊至對象】按鈕，可以是對象更容易吸附到引導(dǎo)線上。 （3）在默認(rèn)情況下，被引導(dǎo)層上的對象按引導(dǎo)路徑平移，與切線方向無關(guān)，如果希望沿切線運(yùn)動，可在設(shè)置被引導(dǎo)層上對象的補(bǔ)間動畫后，選中復(fù)選框，本案例中就是如此。 （4）對齊引導(dǎo)線和對象時(shí)，選中復(fù)選框可以讓對象自動捕捉路徑。,三、技術(shù)要點(diǎn),3.6 “蝴蝶飛”引導(dǎo)動畫案例,四 、練習(xí),(1) 引導(dǎo)動畫中的兩個(gè)圖層各能放置哪些對象？ (2) 創(chuàng)建引導(dǎo)動畫時(shí)有什么注

37、意事項(xiàng)？ (3) 制作一個(gè)小鳥在天空中飛翔的引導(dǎo)動畫。,3.6 “蝴蝶飛”引導(dǎo)動畫案例,本節(jié)內(nèi)容,案例效果,操作步驟,技術(shù)要點(diǎn),練習(xí),3.7 “賀卡”綜合動畫案例,一、案例效果,重點(diǎn)與難點(diǎn)： 掌握時(shí)間軸特效的使用方法、“按鈕元件”的建立和使用及實(shí)例顏色的調(diào)節(jié)方法。,3.7 “賀卡”綜合動畫案例,1新建文檔并命名 啟動AdobeFlashCS3后，新建一個(gè)文檔，設(shè)置背景色為白色，文檔大小為400250，保存文檔，命名為“賀卡” 。 2設(shè)置背景 用文本工具設(shè)置如右圖的背景:,二、操作步驟,3.7 “賀卡”綜合動畫案例,3繪制所需的元件 （1）繪制“鐘面”、“時(shí)針”和“分針”元件 （2）繪制“心”元件 （3）繪制“飛舞的心”元件,二、操作步驟,3.7 “賀卡”綜合動畫案例,（4）繪制“沒你”和“有你”元件 （5）繪制“紅心臉”元件 （6）繪制“