第3章+逐幀動(dòng)畫.ppt

1、第3章逐幀動(dòng)畫,教師：楊萌 QQ：229781818 Email：xian_, 3.1 逐幀動(dòng)畫的基本概念, 3.2 幀的標(biāo)識(shí)和編輯, 3.3 逐幀動(dòng)畫實(shí)例,本章內(nèi)容,第3章 逐幀動(dòng)畫,常用的快捷鍵,第3章 逐幀動(dòng)畫,了解逐幀動(dòng)畫的基本概念、特點(diǎn)、適用領(lǐng)域等概念。,3.1 逐幀動(dòng)畫的基本概念,3 逐幀動(dòng)畫,定義：將動(dòng)畫中的每一幀都設(shè)置為關(guān)鍵幀，在每一個(gè)關(guān)鍵幀中創(chuàng)建不同的內(nèi)容，就成為逐幀動(dòng)畫。逐幀動(dòng)畫是指動(dòng)畫的每一幀的內(nèi)容都是由一幅繪制的圖象組成。 原理：將對(duì)象的運(yùn)動(dòng)過程分解成多個(gè)靜態(tài)圖形，再將這些連續(xù)的靜態(tài)圖形置于連續(xù)的關(guān)鍵幀中，就構(gòu)成了逐幀動(dòng)畫。,什么是逐幀動(dòng)畫,3.1 逐幀動(dòng)畫的基本概念,

2、缺點(diǎn) 是太耗費(fèi)時(shí)間和精力，而且最終生成的動(dòng)畫文件偏大。 優(yōu)點(diǎn) 即能最大限度地控制動(dòng)畫的變化細(xì)節(jié)。 適用領(lǐng)域 適用于表現(xiàn)細(xì)膩、復(fù)雜的動(dòng)畫效果。通過更改每一幀中的舞臺(tái)內(nèi)容而獲得動(dòng)畫效果，它最適合于每一幀中的圖像都在更改而不是僅僅簡單地在舞臺(tái)中移動(dòng)的復(fù)雜動(dòng)畫。,逐幀動(dòng)畫的特點(diǎn),3.1 逐幀動(dòng)畫的基本概念,學(xué)習(xí)幀的基本標(biāo)識(shí)，并掌握幀的各種操作方法。,3.2 幀的標(biāo)識(shí)和編輯,3 逐幀動(dòng)畫,【空白關(guān)鍵幀】 用空心圓表示，代表這個(gè)幀中沒有內(nèi)容，在空白關(guān)鍵幀中加入對(duì)象即可變?yōu)殛P(guān)鍵幀。,各種幀在時(shí)間軸上的標(biāo)識(shí),新打開文件時(shí)的空白關(guān)鍵幀,3.2 幀的標(biāo)識(shí)和編輯,【普通幀】 顯示為一個(gè)單元格，普通幀中的內(nèi)容永遠(yuǎn)和離

3、它最近的關(guān)鍵幀中的內(nèi)容保持一致。,各種幀在時(shí)間軸上的標(biāo)識(shí),延續(xù)第一幀內(nèi)容的普通幀,3.2 幀的標(biāo)識(shí)和編輯,【傳統(tǒng)補(bǔ)間幀】 用底色為淺藍(lán)色的箭頭符號(hào)表示，代表這個(gè)區(qū)域存在運(yùn)動(dòng)補(bǔ)間動(dòng)畫。,各種幀在時(shí)間軸上的標(biāo)識(shí),運(yùn)動(dòng)補(bǔ)間幀,3.2 幀的標(biāo)識(shí)和編輯,【形狀補(bǔ)間幀】 用底色為淺綠色的箭頭符號(hào)表示，代表這個(gè)區(qū)域存在形狀補(bǔ)間動(dòng)畫。,各種幀在時(shí)間軸上的標(biāo)識(shí),形狀補(bǔ)間幀,3.2 幀的標(biāo)識(shí)和編輯,【未完成或中斷的漸變】 如果補(bǔ)間動(dòng)畫出現(xiàn)錯(cuò)誤，則本應(yīng)出現(xiàn)的箭頭符號(hào)顯示為虛線。,各種幀在時(shí)間軸上的標(biāo)識(shí),未完成或中斷的漸變,3.2 幀的標(biāo)識(shí)和編輯,【一般空白幀】 代表空白區(qū)域中沒有任何內(nèi)容。,各種幀在時(shí)間軸上的標(biāo)識(shí),

4、空白幀,3.2 幀的標(biāo)識(shí)和編輯,【添加了動(dòng)作語句的幀】 如果在某一關(guān)鍵幀上有一個(gè)小字母a，表示在這一幀中分配了動(dòng)作Action，當(dāng)動(dòng)畫播放到這一幀時(shí)將執(zhí)行相應(yīng)的動(dòng)作,各種幀在時(shí)間軸上的標(biāo)識(shí),添加了動(dòng)作語句的幀,3.2 幀的標(biāo)識(shí)和編輯,【課堂實(shí)例】給動(dòng)畫添加動(dòng)作,【添加了標(biāo)簽后的幀】 如果在關(guān)鍵幀的小黑點(diǎn)上有一個(gè)小紅旗，表明該關(guān)鍵幀包含標(biāo)簽，如下圖所示，將幀命名為圓,各種幀在時(shí)間軸上的標(biāo)識(shí),添加了標(biāo)簽后的幀,3.2 幀的標(biāo)識(shí)和編輯,【設(shè)置了注釋后的幀】 如果在標(biāo)簽名字前加“/”，表示為該幀加注釋，如果在標(biāo)簽名字前加 ，表示為該幀加錨記，在時(shí)間軸上的效果如下圖所示,各種幀在時(shí)間軸上的標(biāo)識(shí),設(shè)置了注

5、釋后的幀,3.2 幀的標(biāo)識(shí)和編輯,3.2 幀的標(biāo)識(shí)和編輯,選取幀,選取單個(gè)幀，單擊時(shí)間軸上的某一幀，即可以選取它 選取連續(xù)幀 單擊開始幀，按住Shift鍵選取結(jié)束幀 或拖拽鼠標(biāo) 選取不連續(xù)幀 按住Ctrl鍵，單擊選取多個(gè)不連續(xù)的幀,【同一圖層】,選取連續(xù)幀，單擊開始幀，按住Shift鍵選取結(jié)束幀 選取不連續(xù)幀 按住Ctrl鍵，單擊選取多個(gè)不連續(xù)的幀,【不同圖層】,3.2 幀的標(biāo)識(shí)和編輯,創(chuàng)建關(guān)鍵幀,創(chuàng)建關(guān)鍵幀是設(shè)計(jì)制作Flash動(dòng)畫的一項(xiàng)最基本操作。 【方法】 用鼠標(biāo)在時(shí)間線處選中所要?jiǎng)?chuàng)建關(guān)鍵幀的位置，然后單擊菜單欄中的“插入”“時(shí)間軸”“關(guān)鍵幀” 用鼠標(biāo)在時(shí)間線處選中所要?jiǎng)?chuàng)建關(guān)鍵幀的位置后，

6、使用快捷鍵(F6) 用鼠標(biāo)選中所要?jiǎng)?chuàng)建關(guān)鍵幀的位置，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“插入關(guān)鍵幀” 用鼠標(biāo)選中所要?jiǎng)?chuàng)建關(guān)鍵幀的位置，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“轉(zhuǎn)換為關(guān)鍵幀”,在時(shí)間軸面板中選中需要復(fù)制的幀，然后選擇“編輯”“時(shí)間軸”“復(fù)制幀”命令 在時(shí)間軸面板中選中需要復(fù)制的幀，單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇“復(fù)制幀”命令 按快捷鍵,幀的復(fù)制,【方法】,3.2 幀的標(biāo)識(shí)和編輯,在時(shí)間軸面板中選中要進(jìn)行粘貼的幀的位置，然后選擇“編輯”“時(shí)間軸”“粘貼幀”命令 在時(shí)間軸面板中選中要進(jìn)行粘貼的幀的位置，然后選擇“編輯”“時(shí)間軸”“粘貼幀”命令 按快捷鍵,幀的粘貼,【方法】,3.2 幀的標(biāo)識(shí)

7、和編輯,移動(dòng)幀和幀的內(nèi)容,【步驟】,選中需要移動(dòng)的幀 用鼠標(biāo)拖放到時(shí)間軸的任意位置，這個(gè)位置可以是同層的也可以是其他層的 松開鼠標(biāo)，即完成幀的移動(dòng) 該操作相當(dāng)于幀的剪切和粘貼,3.2 幀的標(biāo)識(shí)和編輯,刪除幀,【步驟】,在時(shí)間軸面板中選中一個(gè)或多個(gè)幀 選擇下面的方法之一： “編輯”“時(shí)間軸”“刪除幀”命令 鼠標(biāo)右擊，在彈出的快捷菜單中選擇“刪除幀” 按快捷鍵,3.2 幀的標(biāo)識(shí)和編輯,插入幀,3.2 幀的標(biāo)識(shí)和編輯,【方法】,在時(shí)間軸面板中選擇要插入幀的單元格 選擇“插入”“時(shí)間軸” “幀”命令，或者按快捷鍵F5，即可在選中的單元格中新增加一幀,翻轉(zhuǎn)幀,3.2 幀的標(biāo)識(shí)和編輯,Flash中幀的翻轉(zhuǎn)

8、就是將選擇的一段連續(xù)幀的序列進(jìn)行頭尾翻轉(zhuǎn) 【步驟】,在時(shí)間軸面板中選擇要進(jìn)行翻轉(zhuǎn)的各幀 選擇下面的方法之一： 選擇“修改”“時(shí)間軸” “翻轉(zhuǎn)幀”命令 鼠標(biāo)右擊，在彈出的快捷菜單中選擇“翻轉(zhuǎn)幀”命令,幀頻率：也就是動(dòng)畫的播放速度，以每秒播放的幀的多少計(jì)算,設(shè)置幀頻率的步驟： 可以選擇“修改”“文檔”命令 然后在彈出的“文檔屬性”對(duì)話框中的“幀頻”輸入框中，輸入設(shè)定的頻率，如圖所示，默認(rèn)值為12,修改幀頻率,3.2 幀的標(biāo)識(shí)和編輯,設(shè)置幀頻率,繪圖紙工具（洋蔥皮工具）,3.2 幀的標(biāo)識(shí)和編輯,通常情況下，在flash動(dòng)畫制作過程中，舞臺(tái)中一次只能顯示或編輯一個(gè)關(guān)鍵幀中的對(duì)象，如果需要顯示多個(gè)關(guān)鍵幀

9、或同時(shí)編輯多個(gè)關(guān)鍵幀中的對(duì)象，就需要使用繪圖紙工具（洋蔥皮工具）。,繪圖紙工具,繪圖紙外觀工具,繪圖紙外觀效果,繪圖紙外觀輪廓顯示,繪圖紙標(biāo)記修改,3.2 幀的標(biāo)識(shí)和編輯,繪圖紙工具（洋蔥皮工具）,繪圖紙工具（洋蔥皮工具）,3.2 幀的標(biāo)識(shí)和編輯,1.在舞臺(tái)上同時(shí)查看多個(gè)幀,單擊時(shí)間軸面板下方的【繪圖紙外觀】 按鈕，顯示兩個(gè)繪圖紙外觀之間的所有幀，當(dāng)前幀為實(shí)體顯 示，其它幀為半透明顯示 單擊時(shí)間軸面板下方的【繪圖紙外觀輪廓】 按鈕，當(dāng)前幀以實(shí)體顯示，其它幀以輪廓線顯示,繪圖紙工具（洋蔥皮工具）,3.2 幀的標(biāo)識(shí)和編輯,2.控制繪圖紙外觀的顯示,單擊時(shí)間軸面板下方的【編輯多個(gè)幀】 按鈕，顯示兩個(gè)

10、繪圖紙外觀之間的所有關(guān)鍵幀的實(shí)體,繪圖紙工具（洋蔥皮工具）,3.2 幀的標(biāo)識(shí)和編輯,3.更改繪圖紙外觀標(biāo)識(shí)的顯示范圍和屬性,單擊時(shí)間軸面板下方的【修改繪圖紙標(biāo)記】 按鈕，修改外觀標(biāo)記的顯示范圍與屬性 始終顯示標(biāo)記：始終顯示繪圖紙外觀的起止標(biāo)記 錨記繪圖紙：鎖定繪圖紙外的起止標(biāo)記的位置 繪圖紙2：在當(dāng)前幀的兩側(cè)顯示2幀 繪圖紙5：在當(dāng)前幀的兩側(cè)顯示5幀 所有繪圖紙：在當(dāng)前幀的兩側(cè)顯示所有幀,使用繪圖紙外觀工具可以移動(dòng)整個(gè)動(dòng)畫，方法如下： 將所有圖層解鎖，而不移動(dòng)某一層的對(duì)象，可將其隱藏或鎖定 單擊繪圖紙外觀工具中的“編輯多個(gè)幀”按鈕 單擊繪圖紙外觀工具的“修改繪圖紙標(biāo)記”“繪制全部”命令 選擇“

11、編輯”“全部選擇”命令，選中所有圖層及對(duì)象 使用鼠標(biāo)拖動(dòng)整個(gè)動(dòng)畫到新的位置,繪圖紙工具實(shí)例移動(dòng)整個(gè)動(dòng)畫,3.2 幀的標(biāo)識(shí)和編輯,并通過實(shí)例的講解，熟練掌握逐幀動(dòng)畫的制作方法和技巧。,3.3 逐幀動(dòng)畫實(shí)例,3 逐幀動(dòng)畫,任務(wù)概述 外部導(dǎo)入方式是創(chuàng)建逐幀動(dòng)畫最為常用的方法。 本實(shí)例首先導(dǎo)入動(dòng)畫文件，并對(duì)其進(jìn)行修改，完成最終動(dòng)畫效果,外部導(dǎo)入的方式創(chuàng)建逐幀動(dòng)畫,3.3 逐幀動(dòng)畫實(shí)例,Gif圖像,Flash動(dòng)畫,1.新建文件并修改文檔屬性 新建空白文檔 修改文檔屬性：寬高均為150像素，背景為白色，幀頻為10 2.導(dǎo)入gif 單擊【文件】|【導(dǎo)入】|【導(dǎo)入到舞臺(tái)】,外部導(dǎo)入的方式創(chuàng)建逐幀動(dòng)畫,3.3

12、逐幀動(dòng)畫實(shí)例,任務(wù)概述 通過【工具】面板中各種繪圖工具與各種幀的操作的結(jié)合使用繪制一個(gè)“生長的小花”的逐幀動(dòng)畫實(shí)例。,第 1 幀 第 4 幀 第 7 幀 第 9 幀,生長的小花,3.3 逐幀動(dòng)畫實(shí)例,生長的小花,3.3 逐幀動(dòng)畫實(shí)例,1 繪制“花盆” 修改圖層1的名稱為“花盆” 使用黑色的刷子工具繪制花盆輪廓 使用顏料桶工具填充花盆顏色為#cd9933 在第4幀處插入幀（F5）,第 1 4幀,生長的小花,3.3 逐幀動(dòng)畫實(shí)例,2 繪制“葉子” 新建“葉子”圖層 在第1幀，使用“刷子工具”（顏色#3a5836）繪制一個(gè)小芽 在第2幀處插入關(guān)鍵幀（F6），使用“選擇工具”修改枝條為合適的大小和高度

13、 在第3幀處插入關(guān)鍵幀，在用“刷子工具”繪制更高的枝條和葉子 在第4幀處插入幀（F5）,第 1 幀,第 2 幀,第 3、4 幀,生長的小花,3.3 逐幀動(dòng)畫實(shí)例,3 繪制“花朵” 新建“花朵”圖層 在第3幀，使用“刷子工具”（顏色#ff0000）繪制一個(gè)花苞 在第4幀處插入空白關(guān)鍵幀（F7），使用使用“刷子工具”（顏色#ff0000）繪制盛開的花瓣，使用#ffff00繪制花心,第 4 幀,第 5 幀,任務(wù)概述 原動(dòng)畫出現(xiàn)頻率太快，文字、圖片效果只有淡入沒有淡出。通過使用基本的幀操作來豐富動(dòng)畫效果。,蝴蝶廣告,3.3 逐幀動(dòng)畫實(shí)例,原動(dòng)畫,修改后的動(dòng)畫,蝴蝶廣告,1.修改文字的幀數(shù) 在“文字”圖

14、層第10幀處，按2次F5，插入2個(gè)普通幀 依次選擇每個(gè)字的關(guān)鍵幀，按2次F5，插入2個(gè)普通幀 選擇“文字”圖層第10到24幀，復(fù)制幀，在第35幀處粘貼幀，再選中35到49幀，翻轉(zhuǎn)幀,3.3 逐幀動(dòng)畫實(shí)例,蝴蝶廣告,2.修改背景的幀數(shù) 選中在“背景”圖層第1幀到第10幀（按住shift鍵），復(fù)制幀 在“背景”圖層第47幀處，粘貼幀 選中第47到56幀進(jìn)行翻轉(zhuǎn)幀操作 在60幀處，向上拖拽同時(shí)選中“文字”層，插入幀（F5）,3.3 逐幀動(dòng)畫實(shí)例,提示：通過復(fù)制幀并對(duì)其進(jìn)行翻轉(zhuǎn)幀操作，可以制作淡入淡出動(dòng)畫效果,卡通走路動(dòng)畫,任務(wù)概述 創(chuàng)建動(dòng)畫背景，導(dǎo)入外部gif圖像，借助繪圖紙工具，移動(dòng)導(dǎo)入的整個(gè)動(dòng)畫到合適的位置,3.3 逐幀動(dòng)畫實(shí)例,原gif圖像,修改后的動(dòng)畫,卡通走路動(dòng)畫,3.3 逐幀動(dòng)畫實(shí)例,1 新建文檔 尺寸：300*200像素 背景顏色：白色（#ffffff） 幀頻：30 2 創(chuàng)建背景 修改圖層1名為“背景”