falsh制作基礎(chǔ)課件第五章

1、/第五章 / 動(dòng)畫基礎(chǔ) 本章主要介紹時(shí)間軸和幀的概念、場(chǎng)景及基本操作等方面的知識(shí)和技巧，同時(shí)還將對(duì)逐幀動(dòng)畫、形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫的動(dòng)畫原理和制作方法等進(jìn)行介紹和講解。通過(guò)本章的學(xué)習(xí)，讀者可以掌握時(shí)間軸和場(chǎng)景等方面的知識(shí)，制作出基本的動(dòng)畫效果，為深入學(xué)習(xí)Flash CS5奠定基礎(chǔ)。 第一節(jié) Flash動(dòng)畫基礎(chǔ) 在第一章已詳細(xì)介紹過(guò)時(shí)間軸的相關(guān)知識(shí)，此處不再詳述。時(shí)間軸是幀和圖層操作的地方，是Flash編輯動(dòng)畫的主要工具，也是用于組織和控制動(dòng)畫中幀和層在一定時(shí)間內(nèi)播放的坐標(biāo)軸。在本章節(jié)，我們將會(huì)深入理解和體會(huì)時(shí)間軸和幀在Flash動(dòng)畫制作過(guò)程中所發(fā)揮的具體功能和作用。/第五章 / 動(dòng)畫基礎(chǔ)

2、二、幀 幀是Flash動(dòng)畫制作中最基本的單位，在制作動(dòng)畫時(shí)，每個(gè)畫面在Flash中都被稱為幀，每個(gè)幀上都放置畫面、文字、聲音等多種對(duì)象，如果是連續(xù)的多個(gè)幀按照一定速率連續(xù)播放即可形成動(dòng)畫。 （一）幀的分類 按照功能的不同，幀可以分為3種：關(guān)鍵幀、空白關(guān)鍵幀和普通幀。 普通幀 起著延長(zhǎng)關(guān)鍵幀的作用。 關(guān)鍵幀 包含畫面、文字等內(nèi)容，用來(lái)定義動(dòng)畫的幀。在逐幀動(dòng)畫中每個(gè) 幀都是關(guān)鍵幀；在補(bǔ)間動(dòng)畫中，只需要將動(dòng)畫發(fā)生變化的兩端設(shè)置為關(guān)鍵幀。 空白關(guān)鍵幀 指沒(méi)有內(nèi)容的幀，一般新建圖層的第一幀都為空白關(guān)鍵幀，如果加入了圖像或文字等內(nèi)容，則會(huì)變?yōu)殛P(guān)鍵幀。 如圖5-1所示，圖層1為普通幀，圖層2為關(guān)鍵幀，圖層3

3、為空白關(guān)鍵幀。/第五章 / 動(dòng)畫基礎(chǔ) （二）幀的頻率 幀的頻率指每秒鐘播放幀的數(shù)量。頻率越快，動(dòng)畫中的動(dòng)作越流暢；頻率越慢，動(dòng)畫中的動(dòng)作連貫性越差。在電影中，通常是是以每秒24或25幀播放，在使用Flash軟件制作動(dòng)畫時(shí)，以最少每秒12幀的速度制作會(huì)取得較好的視覺(jué)效果。/第五章 / 動(dòng)畫基礎(chǔ) 一部動(dòng)畫只能設(shè)置1個(gè)幀頻，幀頻具體可以在【文檔設(shè)置】中修改。執(zhí)行【修改】【文檔】命令或按快捷鍵【Ctrl】+【J】，打開【文檔設(shè)置】對(duì)話框，在左下角【幀頻】處修改數(shù)值可修改頻率，如圖5-2所示。/第五章 / 動(dòng)畫基礎(chǔ) （三）幀的基本操作 每一部動(dòng)畫都是由幀組成的，F(xiàn)lash動(dòng)畫就是通過(guò)對(duì)幀進(jìn)行相應(yīng)的編輯和

4、操作形成多種影片，以下列舉一些具體幀的操作方式和方法，為進(jìn)一步制作影片建立基礎(chǔ)。 （1）選擇幀（2）插入幀（3）復(fù)制幀（4）粘貼幀（5）移動(dòng)幀（6）刪除幀（7）清除幀（8）將幀轉(zhuǎn)為關(guān)鍵幀（9）將幀轉(zhuǎn)為空白關(guān)鍵幀第二節(jié) 逐幀動(dòng)畫 逐幀動(dòng)畫是和傳統(tǒng)動(dòng)畫制作原理相同的一種動(dòng)畫形式，制作逐幀動(dòng)畫時(shí)需要在時(shí)間軸的每幀上繪制連續(xù)的、不同的內(nèi)容，通過(guò)順序播放得到連貫的動(dòng)作效果，如圖5-3所示。這種類型的動(dòng)畫效果連貫靈活，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容。需要注意的是，由于逐幀動(dòng)畫的每幀內(nèi)容均不一樣，每一幀都是關(guān)鍵幀，導(dǎo)致最終輸出的文件會(huì)很大，與補(bǔ)間動(dòng)畫有較大的差別。/第五章 / 動(dòng)畫基礎(chǔ) 一、創(chuàng)建逐幀動(dòng)畫的方法

5、 下面將通過(guò)制作人臉喜怒快速變化的例子來(lái)具體介紹創(chuàng)建逐幀動(dòng)畫的方法。 （1）新建文檔，在【時(shí)間軸】面板圖層1的第1幀，用【鋼筆工具】繪制出人物臉部輪廓，在第2幀按【F5】鍵插入幀，如圖5-4所示。/第五章 / 動(dòng)畫基礎(chǔ) （2）在【時(shí)間軸】面板點(diǎn)擊【新建圖層】按鈕，新建圖層2，在圖層2的第1幀繪制人物表情“喜”，如圖5-5所示。 （3）選中圖層2的第2幀位置，點(diǎn)擊鼠標(biāo)右鍵，在彈出菜單中選擇【插入空白關(guān)鍵幀】，如圖5-6所示。 （4）在繪制人物表情“怒”之前，為了使圖像能夠和第1幀圖像的位置保持一致，可點(diǎn)擊時(shí)間軸下端的【繪圖紙外觀】按鈕，觀看繪制的幀圖像，如圖5-7所示。/第五章 / 動(dòng)畫基礎(chǔ) （

6、5）在圖層2第2幀繪制人物表情“怒”，如圖5-8所示。/第五章 / 動(dòng)畫基礎(chǔ) （6）關(guān)閉【繪圖紙外觀】，按【Enter】鍵觀看效果。調(diào)整時(shí)間軸下端的【幀速率】為“8”，如圖5-9所示。（7）按【Ctrl】+【Enter】組合鍵，檢測(cè)剛剛創(chuàng)建的動(dòng)畫。/第五章 / 動(dòng)畫基礎(chǔ) 二、繪圖紙 繪圖紙功能是Flash軟件最重要的輔助功能之一。在傳統(tǒng)動(dòng)畫的制作過(guò)程中大量使用賽璐珞透明膠片，透過(guò)膠片可以露出下一層畫面的內(nèi)容，繪圖紙類同于這種透明膠片，可使制作者在場(chǎng)景中繪畫下一幀畫面的時(shí)候可以準(zhǔn)確地知道上一幀的內(nèi)容，便于把握?qǐng)D像的定位和動(dòng)作的連貫性，尤其是在制作逐幀動(dòng)畫時(shí)，這種功能顯得極其重要。 下面具體講解繪

7、圖紙各部分的功能： 【幀居中】 將當(dāng)前幀顯示到控制區(qū)窗口中間。 【繪圖紙外觀】 在時(shí)間軸上設(shè)置一個(gè)連續(xù)的顯示幀區(qū)域，區(qū)域內(nèi)的幀所包含的內(nèi)容同時(shí)顯示在舞臺(tái)上，如圖5-10所示。/第五章 / 動(dòng)畫基礎(chǔ) 【繪圖紙外觀輪廓】 在時(shí)間軸上設(shè)置一個(gè)連續(xù)的顯示區(qū)域，除當(dāng)前幀外，區(qū)域內(nèi)的幀所包含的內(nèi)容僅顯示圖形外框，如圖5-11所示。【編輯多個(gè)幀】 在時(shí)間軸上設(shè)置一個(gè)連續(xù)的顯示區(qū)域，區(qū)域內(nèi)的幀所包含的內(nèi)容可同時(shí)顯示和編輯，如圖5-12所示。【修改標(biāo)記】 單擊該按鈕會(huì)顯示一個(gè)選項(xiàng)菜單，可顯示標(biāo)記范圍，如圖5-13所示。/第五章 / 動(dòng)畫基礎(chǔ) 三、實(shí)例制作 逐幀動(dòng)畫每一幀的內(nèi)容都不同，需要用多個(gè)關(guān)鍵幀組成影片。下

8、面以制作翻書效果為例，詳細(xì)講解制作逐幀動(dòng)畫的具體步驟和方法。 （1）在Flash中新建文檔，執(zhí)行【插入】 【新建元件】命令建立元件1。在元件1中繪制出翻開的書本，如圖5-14所示。 （2）點(diǎn)擊場(chǎng)景1回到場(chǎng)景界面，將元件1拖到舞臺(tái)中。在【時(shí)間軸】面板新建圖層2，在圖層2的第2幀按【F6】鍵插入關(guān)鍵幀，繪制書本剛開始翻動(dòng)的效果，如圖5-15 所示。/第五章 / 動(dòng)畫基礎(chǔ) /第五章 / 動(dòng)畫基礎(chǔ) （3）點(diǎn)擊【繪圖紙外觀】，接下來(lái)在圖層2依次建立空白關(guān)鍵幀，在每幀繪制書本翻頁(yè)效果圖像。復(fù)制圖層1的第1幀，粘貼到圖層2最后1幀下方的位置，如圖5-16 所示。 （4）按【Ctrl】+【Enter】組合鍵，

9、檢測(cè)剛剛創(chuàng)建的動(dòng)畫。/第五章 / 動(dòng)畫基礎(chǔ) 第三節(jié) 形狀補(bǔ)間動(dòng)畫 在Flash軟件中可以創(chuàng)建形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫兩種補(bǔ)間動(dòng)畫。能夠創(chuàng)建形狀補(bǔ)間是Flash軟件的一項(xiàng)重要功能，這種功能可以使一種圖形形狀變化為另外一種圖形形狀，同時(shí)也可以使兩個(gè)圖形之間的大小、位置、顏色進(jìn)行相互變化，非常適用于在兩個(gè)關(guān)鍵幀之間創(chuàng)建圖形變形的效果。本節(jié)將詳細(xì)介紹形狀補(bǔ)間動(dòng)畫方面的知識(shí)。 一、形狀補(bǔ)間動(dòng)畫基礎(chǔ) 形狀補(bǔ)間動(dòng)畫是利用形狀發(fā)生變化的動(dòng)畫，其變形的靈活性介于逐幀動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫兩者之間。在時(shí)間軸上的某一幀上繪制一個(gè)圖像，然后在該圖層的另一幀上修改對(duì)象，或重新繪制另外一個(gè)新對(duì)象，兩幀之間的變化過(guò)程可由Fl

10、ash自動(dòng)生成，無(wú)須繪制。/第五章 / 動(dòng)畫基礎(chǔ) 能夠?qū)崿F(xiàn)補(bǔ)間動(dòng)畫的元素有很多，其中包括兩個(gè)圖形之間形狀、位置、大小、顏色等。這些變化的圖形可以是繪制的，也可以是圖形元件、文字等元素，通常我們對(duì)要進(jìn)行形狀補(bǔ)間的元素進(jìn)行分離才能制作補(bǔ)間動(dòng)畫。創(chuàng)建了形狀補(bǔ)間之后，創(chuàng)建形狀補(bǔ)間的幀會(huì)變?yōu)榈G色，并且在起始幀和結(jié)束幀之間出現(xiàn)一條長(zhǎng)箭頭，如圖5-17所示。/第五章 / 動(dòng)畫基礎(chǔ) 二、形狀補(bǔ)間動(dòng)畫的屬性設(shè)置 現(xiàn)在通過(guò)簡(jiǎn)單的元素進(jìn)行變換來(lái)了解形狀補(bǔ)間動(dòng)畫的屬性設(shè)置。 （1）打開Flash軟件新建文檔，使用【矩形工具】 在圖層1的第1幀繪制一個(gè)橙色的方形，如圖5-18所示。 （2）在圖層1的第30幀按【F6】

11、鍵添加關(guān)鍵幀，使用【橢圓工具】在此幀繪制一個(gè)藍(lán)色的圓形，并刪除此幀上的橙色方形，如圖5-19所示。/第五章 / 動(dòng)畫基礎(chǔ) （3）此時(shí)【時(shí)間軸】面板中圖層1的所有幀都是灰色，如圖5-20所示。（4）在圖層1的第1幀第30幀之間，點(diǎn)擊鼠標(biāo)右鍵，在彈出菜單欄中選擇【創(chuàng)建補(bǔ)間形狀】，如圖5-21所示。/第五章 / 動(dòng)畫基礎(chǔ) （5）時(shí)間軸上的幀變?yōu)榈G色，并出現(xiàn)了長(zhǎng)箭頭，如圖5-22所示。（6）按【Enter】鍵觀察形狀補(bǔ)間動(dòng)畫效果。可以發(fā)現(xiàn)橙色的方形逐步變形、變色，最后轉(zhuǎn)變?yōu)樗{(lán)色的圓形，如圖5-23所示。/第五章 / 動(dòng)畫基礎(chǔ) 三、實(shí)例制作 創(chuàng)建形狀補(bǔ)間動(dòng)畫可以對(duì)圖形進(jìn)行形狀的變化，下面以制作“氣球變

12、文字”動(dòng)畫為例，詳細(xì)講解創(chuàng)建形狀補(bǔ)間動(dòng)畫的具體步驟和方法。 （1）打開Flash軟件新建Flash文檔，執(zhí)行【插入】【新建元件】命令新建元件1，將名稱改為“氣球”，如圖5-24所示。 （2）在元件“氣球”里使用【橢圓工具】繪制出氣球圖案，如圖5-25所示。/第五章 / 動(dòng)畫基礎(chǔ) （3）依次新建元件“氣球1”、“氣球2”、“氣球3”，在其元件內(nèi)繪制色彩不一的氣球，如圖5-26所示。 （4）點(diǎn)擊按鈕回到場(chǎng)景 界面，在【時(shí)間軸】面板上添加圖層2、圖層3、圖層4，如圖5-27所示。/第五章 / 動(dòng)畫基礎(chǔ) （5）分別將元件“氣球”、“氣球1”、“氣球2”、“氣球3”放到圖層1、圖層2、圖層3、圖層4的空

13、白關(guān)鍵幀上，并使用【任意變形工具】修改各個(gè)氣球的大小或位置，如圖5-28 所示。 （6）在4個(gè)圖層的第20幀分別按【F6】鍵添加關(guān)鍵幀，如圖5-29所示。/第五章 / 動(dòng)畫基礎(chǔ) （7）選擇【文本工具】，在其【屬性】面板設(shè)置文字字體為“華文琥珀”，大小為“100”點(diǎn)，顏色為“黑色”，如圖5-30所示。 （8）在每層的第20幀添加文字，并使用【任意變形工具】調(diào)整文字的方向，如圖5-31所示。/第五章 / 動(dòng)畫基礎(chǔ) （9）將所有圖層第20幀的氣球圖案刪除，選擇文字，在其【屬性】面板里變換字體顏色，如圖5-32所示。 （10）選中各層第1幀的氣球圖案，執(zhí)行【修改】【分離】命令或直接按快捷鍵【Ctrl】

14、+【B】，對(duì)圖案進(jìn)行打散處理，如圖5-33所示。/第五章 / 動(dòng)畫基礎(chǔ) （11）選中各層第20幀的文字圖案，執(zhí)行【修改】【分離】命令或直接按快捷鍵【Ctrl】+【B】，對(duì)文字進(jìn)行打散處理，如圖5-34所示。 （12）在各層的第1幀第20幀之間，分別點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【創(chuàng)建補(bǔ)間形狀】，時(shí)間軸上的幀全變?yōu)榫G色，如圖5-35所示。 /第五章 / 動(dòng)畫基礎(chǔ) （13）在各圖層第50幀按【F5】鍵添加幀，再按【Enter】鍵觀察形狀補(bǔ)間動(dòng)畫效果，如圖5-36所示。/第五章 / 動(dòng)畫基礎(chǔ) 第四節(jié) 動(dòng)作補(bǔ)間動(dòng)畫 在Flash CS5軟件中，動(dòng)作補(bǔ)間動(dòng)畫可以通過(guò)軟件中的【創(chuàng)建傳統(tǒng)補(bǔ)間】或【創(chuàng)建補(bǔ)間

15、動(dòng)畫】命令來(lái)實(shí)現(xiàn)。能夠創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫是Flash軟件基于元件進(jìn)行變化的一項(xiàng)重要功能，這種功能可以使一個(gè)元件從一種形態(tài)（包括一個(gè)位置、大小、透明度等）變化為另一種形態(tài)。本節(jié)將詳細(xì)介紹動(dòng)作補(bǔ)間動(dòng)畫方面的知識(shí)。 一、動(dòng)作補(bǔ)間動(dòng)畫基礎(chǔ) 在Flash的【時(shí)間軸】面板上，如果使用【創(chuàng)建傳統(tǒng)補(bǔ)間】命令制作動(dòng)畫，首先需要在時(shí)間軸上創(chuàng)建一個(gè)空白關(guān)鍵幀，然后在舞臺(tái)上繪制一個(gè)元件，并在結(jié)束處再創(chuàng)建一個(gè)關(guān)鍵幀，在結(jié)束的關(guān)鍵幀上改變這個(gè)元件的大小、顏色、位置、透明度等，F(xiàn)lash軟件通過(guò)計(jì)算兩個(gè)關(guān)鍵幀之間的不同的數(shù)據(jù)自動(dòng)生成中間/第五章 / 動(dòng)畫基礎(chǔ) 幀，從而形成流暢的動(dòng)畫。當(dāng)時(shí)間軸上的幀創(chuàng)建了傳統(tǒng)補(bǔ)間之后，創(chuàng)建傳統(tǒng)

16、補(bǔ)間的幀會(huì)變?yōu)榈仙⑶以谄鹗紟徒Y(jié)束幀之間出現(xiàn)一條箭頭符號(hào)，如圖5-37所示。 如果使用【創(chuàng)建補(bǔ)間動(dòng)畫】命令制作動(dòng)畫，只需要在時(shí)間軸上創(chuàng)建一個(gè)開始的關(guān)鍵幀然后執(zhí)行相關(guān)命令即可。創(chuàng)建補(bǔ)間動(dòng)畫的幀會(huì)變?yōu)榈{(lán)色，沒(méi)有箭頭符號(hào)，如圖5-38所示。/第五章 / 動(dòng)畫基礎(chǔ) 二、動(dòng)作補(bǔ)間動(dòng)畫的屬性設(shè)置 現(xiàn)在通過(guò)簡(jiǎn)單的元素進(jìn)行變換了解動(dòng)作補(bǔ)間動(dòng)畫的屬性設(shè)置。首先先了解如何使用【創(chuàng)建傳統(tǒng)補(bǔ)間】命令制作動(dòng)作補(bǔ)間動(dòng)畫。 （1）打開Flash軟件新建文檔，使用【矩形工具】在圖層1的第1幀繪制一個(gè)方形，放置在場(chǎng)景的最左邊，如圖5-39所示。 （2）在場(chǎng)景中選中方形，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】，如

17、圖5-40所示。/第五章 / 動(dòng)畫基礎(chǔ) （3）在圖層1的第30幀按【F6】鍵添加關(guān)鍵幀。使用【任意變形工具】把畫面中的方形拖動(dòng)到場(chǎng)景的右邊，按住【Shift】鍵不放，同時(shí)用鼠標(biāo)拖動(dòng)方形一角將其等比例變大，如圖5-41所示。此時(shí)圖層1的所有幀都是灰色，如圖5-42所示。/第五章 / 動(dòng)畫基礎(chǔ) （4）在圖層1的第1幀第30幀之間，點(diǎn)擊鼠標(biāo)右鍵，在彈出菜單欄中選擇【創(chuàng)建傳統(tǒng)補(bǔ)間】，如圖5-43所示。此時(shí)，圖層1上的幀變?yōu)榈仙?，并出現(xiàn)了長(zhǎng)箭頭，如圖5-44所示。/第五章 / 動(dòng)畫基礎(chǔ) （5）按【Enter】鍵觀察動(dòng)作補(bǔ)間動(dòng)畫效果?？梢园l(fā)現(xiàn)小方形逐步向右滑動(dòng)變大，最后成為大方形，如圖5-45所示。/第

18、五章 / 動(dòng)畫基礎(chǔ) 接下來(lái)介紹如何使用【創(chuàng)建補(bǔ)間動(dòng)畫】命令制作動(dòng)作補(bǔ)間動(dòng)畫。 （1）打開Flash軟件新建文檔，使用【矩形工具】在圖層1的第1幀繪制一個(gè)方形，放在場(chǎng)景的最左邊，如圖5-46所示。 （2）在場(chǎng)景中選中方形，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】，如圖5-47所示。/第五章 / 動(dòng)畫基礎(chǔ) （3）在圖層1的第30幀按【F5】鍵插入幀，此時(shí)圖層1面板上的幀都是灰色的，每幀內(nèi)容也是一樣的，如圖5-48所示。 （4）在圖層1的第1幀第30幀之間單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【創(chuàng)建補(bǔ)間動(dòng)畫】，圖層1上的幀變?yōu)榈{(lán)色，如圖5-49所示。/第五章 / 動(dòng)畫基礎(chǔ) （5）選中圖層1的第30

19、幀，使用【任意變形工具】把方塊拖動(dòng)到場(chǎng)景的右邊，按住【Shift】鍵不放，同時(shí)用鼠標(biāo)拖動(dòng)方形一角將其等比例變大，此時(shí)畫面當(dāng)中會(huì)出現(xiàn)一條綠色的軌跡線，如圖5-50所示。 （6）按【Enter】鍵觀察動(dòng)作補(bǔ)間動(dòng)畫效果。小方形沿綠色的軌跡線向右滑動(dòng)變大成為大方形，如圖5-51所示。/第五章 / 動(dòng)畫基礎(chǔ) 三、實(shí)例制作 創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫可以對(duì)元件進(jìn)行位置、大小的變化，下面以制作風(fēng)車轉(zhuǎn)動(dòng)為例，詳細(xì)講解制作動(dòng)作補(bǔ)間動(dòng)畫的具體步驟和方法。 （1）打開Flash軟件新建文檔，執(zhí)行【插入】【新建元件】命令創(chuàng)建元件1，修改名稱為“風(fēng)車”，如圖5-52所示。 （2）選擇【直線工具】，繪制出風(fēng)車的第一片扇葉，如圖5-53所示