《二維動(dòng)畫制作Flash CS3案例教程》第5章 Flash基本動(dòng)畫制作

第5章Flash基本動(dòng)畫制作

知識(shí)概述：

1．進(jìn)一步掌握制作動(dòng)作動(dòng)畫的方法和技巧，掌握制作旋轉(zhuǎn)和擺動(dòng)動(dòng)畫的方法和技巧。

2．了解Flash動(dòng)畫的種類和特點(diǎn)，以及動(dòng)作動(dòng)畫關(guān)鍵幀的“屬性”面板的作用和設(shè)置方法。

3．掌握引導(dǎo)動(dòng)畫的制作方法和技巧，掌握形狀動(dòng)畫的基本制作方法和技巧。

4．“庫(kù)”面板內(nèi)圖層文件夾的使用方法。

5.1動(dòng)畫種類和動(dòng)作動(dòng)畫—【任務(wù)23】動(dòng)作動(dòng)畫集錦

【知識(shí)儲(chǔ)備】 1．Flash動(dòng)畫的種類和特點(diǎn) （1）幀幀動(dòng)畫：幀幀動(dòng)畫的每一幀都由制作者確定，而不是由Flash通過(guò)計(jì)算得到，然后連續(xù)依次播放這些畫面，即可生成動(dòng)畫效果。幀幀動(dòng)畫適于制作非常復(fù)雜的動(dòng)畫，Gif格式的動(dòng)畫就是屬于這種動(dòng)畫。與過(guò)渡動(dòng)畫相比，通常幀幀動(dòng)畫的文件字節(jié)數(shù)較大。為了使一幀的畫面顯示的時(shí)間長(zhǎng)一些，可以在關(guān)鍵幀后邊添加幾個(gè)與關(guān)鍵幀內(nèi)容一樣的普通幀。

158

（2）補(bǔ)間動(dòng)畫：它也叫過(guò)渡動(dòng)畫。制作若干關(guān)鍵幀畫面，由Flash計(jì)算生成各關(guān)鍵幀之間的各個(gè)幀，使畫面從一個(gè)關(guān)鍵幀過(guò)渡到另一個(gè)關(guān)鍵幀。補(bǔ)間動(dòng)畫又分為動(dòng)作動(dòng)畫和形狀動(dòng)畫。利用幀幀動(dòng)畫和補(bǔ)間動(dòng)畫，可以制作大小、位置、圍繞對(duì)象中心點(diǎn)旋轉(zhuǎn)角度、形狀、顏色、亮度、透明度等分別變化或同時(shí)變化的動(dòng)畫，可以制作圍繞對(duì)象中心點(diǎn)順時(shí)針或逆時(shí)針轉(zhuǎn)圈或者來(lái)回?cái)[動(dòng)的動(dòng)畫，可以制作沿著引導(dǎo)線移動(dòng)的動(dòng)畫，還可以制作其他各種變化形式的動(dòng)畫。動(dòng)作動(dòng)畫是補(bǔ)間動(dòng)畫中的一種。在FlashCS3中可以創(chuàng)建出豐富多彩的動(dòng)作動(dòng)畫效果，可以使一個(gè)對(duì)象在畫面中沿直線移動(dòng)，沿曲線移動(dòng)，變換大小、形狀和顏色，以中心為圓點(diǎn)自轉(zhuǎn)，以中心為圓點(diǎn)旋轉(zhuǎn)，產(chǎn)生淡入淡出效果等。各種變化可以獨(dú)立進(jìn)行，也可合成復(fù)雜的動(dòng)畫。例如一個(gè)對(duì)象不斷自轉(zhuǎn)的同時(shí)還水平移動(dòng)。FlashCS3可以使實(shí)例、圖形、圖像、文本和組合產(chǎn)生動(dòng)作動(dòng)畫。創(chuàng)建動(dòng)作動(dòng)畫后，自動(dòng)將對(duì)象轉(zhuǎn)換成補(bǔ)間的實(shí)例，“庫(kù)”面板中會(huì)自動(dòng)增加元件，名字為“補(bǔ)間l”和“補(bǔ)間2”等。動(dòng)作動(dòng)畫可以借助于引導(dǎo)層使對(duì)象沿任意路徑運(yùn)動(dòng)，即創(chuàng)建引導(dǎo)動(dòng)作動(dòng)畫。動(dòng)作動(dòng)畫可以借助遮罩層的作用產(chǎn)生千奇百態(tài)的動(dòng)畫效果。159

2．動(dòng)作動(dòng)畫關(guān)鍵幀的“屬性”面板 選中動(dòng)畫關(guān)鍵幀，調(diào)出動(dòng)畫關(guān)鍵幀的“屬性”面板。利用該面板可以設(shè)置動(dòng)畫類型和動(dòng)畫其他屬性。在“補(bǔ)間”下拉列表框中選擇了“動(dòng)畫”選項(xiàng)（應(yīng)該翻譯為“動(dòng)作”）后，該面板如圖5-4所示。該對(duì)話框內(nèi)有關(guān)選項(xiàng)的作用如下（其中關(guān)于聲音的選項(xiàng)參看第4.3節(jié)）。圖5-4動(dòng)畫關(guān)鍵幀的“屬性”面板

（1）“<幀標(biāo)簽>”文本框：用來(lái)輸入關(guān)鍵幀的標(biāo)簽名稱。 （2）“標(biāo)簽類型”下拉列表框：在輸入關(guān)鍵幀的標(biāo)簽名稱后“標(biāo)簽類型”下拉列表框才會(huì)生效。該下拉列表框可以用來(lái)定義標(biāo)簽的類型，其中有三個(gè)選項(xiàng)“名稱”、“注釋”、“錨點(diǎn)”。 例如：選中動(dòng)作動(dòng)畫的第1關(guān)鍵幀，在其“屬性”面板“<幀標(biāo)簽>”文本框中輸入“第1幀”文字后，時(shí)間軸的第1關(guān)鍵幀內(nèi)會(huì)顯示標(biāo)簽的名稱。如果在“標(biāo)簽類型”下拉列表框中選擇不同選項(xiàng)，則

160

該關(guān)鍵幀內(nèi)的紅色標(biāo)記圖案會(huì)不一樣，其作用也會(huì)不一樣。選擇“名稱”選項(xiàng)時(shí)，程序中可以利用該名稱。（3）“補(bǔ)間”下拉列表框：用來(lái)選擇動(dòng)畫類型。它有三個(gè)選項(xiàng)：選擇“無(wú)”選項(xiàng)，是沒(méi)有動(dòng)畫；選擇“動(dòng)畫”選項(xiàng)，是創(chuàng)建動(dòng)作動(dòng)畫；選擇“形狀”選項(xiàng)，是創(chuàng)建“形狀”動(dòng)畫。（4）“緩動(dòng)”文本框：可輸入數(shù)據(jù)或調(diào)整滑條的滑塊（數(shù)值范圍是-100到100），來(lái)調(diào)整運(yùn)動(dòng)的加速度。其值為負(fù)數(shù)時(shí)為動(dòng)畫在結(jié)束時(shí)加速，其值為正數(shù)時(shí)為動(dòng)畫在結(jié)束時(shí)減速。（5）“旋轉(zhuǎn)”下拉列表框：用來(lái)控制對(duì)象在運(yùn)動(dòng)時(shí)的旋轉(zhuǎn)方式。選擇“無(wú)”選項(xiàng)是不旋轉(zhuǎn)；選擇“自動(dòng)”選項(xiàng)是按照盡可能少運(yùn)動(dòng)的情況下旋轉(zhuǎn)；選擇“順時(shí)針”選項(xiàng)是順時(shí)針旋轉(zhuǎn)；選擇“逆時(shí)針”選項(xiàng)是逆時(shí)針旋轉(zhuǎn)。可以在其右邊的“次”文本框內(nèi)輸入旋轉(zhuǎn)的次數(shù)。（6）“調(diào)整到路徑”復(fù)選框：選中它后，可將運(yùn)動(dòng)對(duì)象的基線調(diào)整到運(yùn)動(dòng)路徑。（7）“同步”復(fù)選框：選中它后，可使圖形元件實(shí)例的動(dòng)畫與時(shí)間軸同步。（8）“貼緊”復(fù)選框：選中它后，可使運(yùn)動(dòng)對(duì)象的中心點(diǎn)標(biāo)記與運(yùn)動(dòng)路徑對(duì)齊。161

5.2引導(dǎo)層動(dòng)畫1—【任務(wù)24】海底世界

【知識(shí)儲(chǔ)備】 1．引導(dǎo)層 可以在引導(dǎo)層內(nèi)創(chuàng)建圖形等，這可以在繪制圖形時(shí)起到輔助作用，以及起到運(yùn)動(dòng)路徑的引導(dǎo)作用。引導(dǎo)層中的圖形只能在舞臺(tái)工作區(qū)內(nèi)看到，在輸出的電影中不會(huì)出現(xiàn)的。另外，還可以把多個(gè)普通圖層關(guān)聯(lián)到一個(gè)引導(dǎo)層上。在時(shí)間軸窗口中，引導(dǎo)層名字的左邊有圖標(biāo)（運(yùn)動(dòng)引導(dǎo)層）或圖標(biāo)（普通引導(dǎo)層）。它們代表了不同的引導(dǎo)層，不同的引導(dǎo)層有不同的作用。 （1）運(yùn)動(dòng)引導(dǎo)層：它可以引導(dǎo)對(duì)象沿輔助線移動(dòng)，產(chǎn)生引導(dǎo)動(dòng)作動(dòng)畫。單擊時(shí)間軸左下角的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，即可在選中圖層的上邊增加一個(gè)運(yùn)動(dòng)引導(dǎo)層。

（2）普通引導(dǎo)層：它只起到輔助繪圖的作用。創(chuàng)建普通引導(dǎo)層的方法是：創(chuàng)建一個(gè)普通圖層。將鼠標(biāo)指針移到該圖層名字處，單擊鼠標(biāo)右鍵，調(diào)出圖層快捷菜單，如圖5-42所示。再單擊快捷菜單中的“引導(dǎo)層”菜單命令，其結(jié)果如圖5-43所示。

162

圖5-42圖層快捷菜單圖5-43創(chuàng)建普通引導(dǎo)層

2．引導(dǎo)動(dòng)畫的制作方法（1）按照上述方法建立沿直線移動(dòng)的動(dòng)作動(dòng)畫，例如圓球從左移到右邊的動(dòng)畫。（2）單擊時(shí)間軸左下角的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，則選中圖層（此處是“圖層1”圖層）的上邊會(huì)增加一個(gè)引導(dǎo)層（也叫導(dǎo)向圖層），同時(shí)選中的圖層自動(dòng)成為與引導(dǎo)層相關(guān)聯(lián)的被引導(dǎo)層。關(guān)聯(lián)的圖層名字向右縮進(jìn)，表示它是關(guān)聯(lián)的圖層。此外，還可以通過(guò)單擊“插入”→“時(shí)間軸”→“運(yùn)動(dòng)引導(dǎo)層”菜單命令，來(lái)增加一個(gè)引導(dǎo)層。

（3）選中引導(dǎo)層，在舞臺(tái)工作區(qū)圖5-44所示。選中引導(dǎo)層的第30

163

圖

5-44

導(dǎo)向動(dòng)作動(dòng)畫的時(shí)間軸和舞臺(tái)工作區(qū)內(nèi)繪制路徑曲線（輔助線），如幀，按F5鍵，創(chuàng)建一個(gè)普通幀。（4）選中圖層1圖層第1幀，選中“屬性”面板內(nèi)的“貼緊”復(fù)選框，拖曳對(duì)象（圓球）到輔助線起始端或線上，使對(duì)象的中心十字與輔助線重合。再選中終止幀，拖曳圓球到輔助線終止端或線上，使對(duì)象的中心十字與輔助線重合。（5）按Enter鍵，播放動(dòng)畫，可以看到小球沿輔助線移動(dòng)。按Ctrl+Enter鍵，播放動(dòng)畫，此時(shí)輔助線不會(huì)顯示出來(lái)。5.3引導(dǎo)層動(dòng)畫2—【任務(wù)25】玩具小火車【知識(shí)儲(chǔ)備】1．引導(dǎo)層與普通圖層的關(guān)聯(lián)及圖層屬性（1）引導(dǎo)層與普通圖層的關(guān)聯(lián)：其方法是把一個(gè)圖層控制區(qū)域內(nèi)的普通圖層拖曳到運(yùn)動(dòng)引導(dǎo)層或普通引導(dǎo)層的右下邊，如圖5-60所示（如果原來(lái)的引導(dǎo)層是普通引導(dǎo)層，與普通圖層關(guān)聯(lián)后會(huì)自動(dòng)變?yōu)檫\(yùn)動(dòng)引導(dǎo)層）。一個(gè)引導(dǎo)層可以與多個(gè)普通圖層關(guān)聯(lián)。如果要斷開圖層與引導(dǎo)層的關(guān)聯(lián)，可用鼠標(biāo)把一個(gè)圖層控制區(qū)域內(nèi)的已關(guān)聯(lián)的圖層拖曳到運(yùn)動(dòng)引導(dǎo)層的下邊。此時(shí)，如果運(yùn)動(dòng)引導(dǎo)層沒(méi)有與它相關(guān)聯(lián)的圖層，則該運(yùn)動(dòng)引導(dǎo)層會(huì)自動(dòng)變?yōu)槠胀ㄒ龑?dǎo)層。164

（2）引導(dǎo)層轉(zhuǎn)換為普通圖層：選中引導(dǎo)層，再單擊圖層快捷菜單中的“引導(dǎo)層”菜單命令，使它左邊的對(duì)勾消失，這時(shí)它就轉(zhuǎn)換為普通圖層了。

2．設(shè)置圖層的屬性 選中一個(gè)圖層，單擊圖層快捷菜單中的“屬性”菜單命令或單擊“修改”→“時(shí)間軸”→“圖層屬性”菜單命令，調(diào)出“圖層屬性”對(duì)話框，如圖5-61所示。其中各選項(xiàng)的作用如下。 （1）“名稱”文本框：給選定的圖層命名。 （2）“顯示”復(fù)選框：選中它后，表示該層處于顯示狀態(tài)，否則處于隱藏狀態(tài)。圖5-60兩個(gè)普通圖層與引導(dǎo)層關(guān)聯(lián)圖5-61“圖層屬性”對(duì)話框（3）“鎖定”復(fù)選框：選中它后，表示該層處于鎖定狀態(tài)，否則處于解鎖狀態(tài)。

165

（4）“類型”欄：利用該欄的單選項(xiàng)，可以用來(lái)確定選定圖層的類型。（5）“輪廓顏色”按鈕：?jiǎn)螕羲鼤?huì)調(diào)出顏色板，用調(diào)色板可以設(shè)定在以輪廓線顯示圖層對(duì)象時(shí)，輪廓線的顏色。它僅在“輪廓線方式查看圖層”復(fù)選框被選中時(shí)有效。（6）“將圖層視為輪廓”復(fù)選框：選中它后，將以輪廓線方式顯示該圖層內(nèi)的對(duì)象。（7）“圖層高度”下拉列表框：用來(lái)選擇一種百分?jǐn)?shù)，在時(shí)間軸窗口中可以改變圖層幀單元格的高度，它在觀察聲波圖形時(shí)非常有用。5.4形狀動(dòng)畫1—【任務(wù)26】彩球彈性撞擊【知識(shí)儲(chǔ)備】1．形狀動(dòng)畫的基本制作方法形狀動(dòng)畫也叫變形動(dòng)畫，它是由一種形狀對(duì)象逐漸變?yōu)榱硗庖环N形狀對(duì)象。FlashCS3可以將圖形、分離的文字、分離后的點(diǎn)陣圖和由點(diǎn)陣圖轉(zhuǎn)換的矢量圖形進(jìn)行變形。FlashCS3不能將實(shí)例、未分離的文字、點(diǎn)陣圖像、群組對(duì)象進(jìn)行變形。在形狀動(dòng)畫中，對(duì)象位置和顏色的變換是在兩個(gè)對(duì)象之間發(fā)生的，而在動(dòng)作動(dòng)畫中，變化的是同166

一個(gè)對(duì)象的位置和顏色屬性。下面通過(guò)制作一個(gè)彩球變化為五角星的形狀動(dòng)畫來(lái)介紹形狀動(dòng)畫的制作方法。（1）選中在時(shí)間軸內(nèi)一個(gè)空白關(guān)鍵幀作為動(dòng)畫的開始幀。然后，在舞臺(tái)工作區(qū)內(nèi)創(chuàng)建一個(gè)符合要求的對(duì)象，作為形狀動(dòng)畫的初始對(duì)象。此處繪制一個(gè)紅色立體彩球。（2）選中形狀動(dòng)畫的第1個(gè)關(guān)鍵幀，再選中“屬性”面板內(nèi)“補(bǔ)間”下拉列表框中的“形狀”選項(xiàng)，此時(shí)該面板如圖5-80所示。（3）單擊形狀動(dòng)畫的終止幀，按F6鍵，創(chuàng)建動(dòng)畫的終止幀為關(guān)鍵幀。此時(shí)，在時(shí)間軸上，從第1幀到終止幀之間會(huì)出現(xiàn)一個(gè)指向右邊的箭頭，幀單元格的背景為淺綠色。（4）在舞臺(tái)工作區(qū)內(nèi)繪制一個(gè)紅色五角星，再將該幀內(nèi)原有的對(duì)象紅色立體彩球刪除。注意：一定先創(chuàng)建新對(duì)象，再刪除原對(duì)象；關(guān)鍵幀內(nèi)創(chuàng)建的對(duì)象必須是圖形、打碎的文字或打碎的點(diǎn)陣圖像。2．形狀動(dòng)畫關(guān)鍵幀的“屬性”面板形狀動(dòng)畫關(guān)鍵幀的“屬性”面板如圖5-78所示，該“屬性”面板中各選項(xiàng)的作用如下。167

圖5-78形狀動(dòng)畫關(guān)鍵幀的“屬性”面板

（1）“緩動(dòng)”文本框：用來(lái)設(shè)置動(dòng)畫的加速度。 （2）“混合”下拉列表框：該下拉列標(biāo)框內(nèi)各選項(xiàng)的作用如下。 ◎“角形”選項(xiàng)：選擇它后，創(chuàng)建的過(guò)渡幀中的圖形更多地保留了原來(lái)圖形的尖角或直線的特征。如果關(guān)鍵幀中圖形沒(méi)有尖角，則與選擇“分布式”的效果一樣。 ◎“分布式”選項(xiàng)：選擇它后，可使形狀動(dòng)畫過(guò)程中創(chuàng)建的中間過(guò)渡幀的圖形較平滑。

5.5形狀動(dòng)畫2—【任務(wù)27】動(dòng)畫畫面開關(guān)門式切換

【知識(shí)儲(chǔ)備】 1．添加形狀提示的方法 為了使形狀動(dòng)畫中間過(guò)程不一樣，可使用形狀提示，來(lái)控制特殊的變形過(guò)程。形狀提示就是在形狀

168

的初始圖形與結(jié)束圖形上，分別指定一些形狀的關(guān)鍵點(diǎn)，并使這些關(guān)鍵點(diǎn)在起始幀中和結(jié)束幀中一一對(duì)應(yīng)，這樣Flash就會(huì)根據(jù)這些關(guān)鍵點(diǎn)的對(duì)應(yīng)關(guān)系來(lái)計(jì)算形狀變化的過(guò)程。（1）選中時(shí)間軸上第1幀單元格，再單擊“修改”→“形狀”→“添加形狀提示”菜單命令，或按Ctrl+Shift+H鍵，即可在第1幀圓形中加入一個(gè)形狀提示標(biāo)記“a”。再重復(fù)上述過(guò)程，可以繼續(xù)增加“b”到“z”25個(gè)形狀提示標(biāo)記（分別用26個(gè)英文小寫字母表示）。（2）添加形狀提示標(biāo)記“a”到“e”5個(gè)形狀提示標(biāo)記，用鼠標(biāo)拖曳這些形狀提示標(biāo)記，分別放置在第1幀圖形的一些位置處，如圖5-101所示。（3）選中終止幀單元格，會(huì)看到終止幀五角星中也有“a”到“e”形狀提示標(biāo)記（幾個(gè)形狀提示標(biāo)記重疊）。用鼠標(biāo)拖曳這些形狀提示標(biāo)記，分別放置在五角星的適當(dāng)位置，如圖5-102所示。如果沒(méi)有形狀提示標(biāo)記顯示，可單擊“視圖”→“顯示形狀提示”菜單命令。169

圖5-101第1幀圓球形狀提示標(biāo)記圖5-102起始幀和終止幀的形狀提示標(biāo)記

（4）最多可提添加26個(gè)形狀提示標(biāo)記。起始幀的形狀提示標(biāo)記用黃色圓圈表示，終止幀的形狀提示標(biāo)記用綠色圓圈表示。如果形狀提示標(biāo)記的位置不在曲線上，會(huì)顯示紅色。

2．添加形狀提示的原則 為了獲得更好的形狀效果，通常應(yīng)注意以下幾個(gè)原則。 （1）如果過(guò)渡比較復(fù)雜，可以在中間增加一個(gè)或多個(gè)關(guān)鍵幀。 （2）起始關(guān)鍵幀與終止關(guān)鍵幀中形狀提示標(biāo)記的順序最好一致。例如在一條線上添加了3個(gè)形狀提示標(biāo)記，應(yīng)依次為“a”、“b”和“c”。這樣無(wú)論這條線如何變形，這三個(gè)點(diǎn)在線上始終會(huì)保持“a”、“b”和“c”的順序。 （3）最好使各形狀關(guān)鍵點(diǎn)沿逆時(shí)針?lè)较蚺帕?，并且從圖形的左上角開始。

170

（4）形狀提示標(biāo)記不一定越多越好，重要的是放置的位置合適。這可以通過(guò)實(shí)驗(yàn)來(lái)決定。

5.6圖層文件夾—【任務(wù)28】文字圍繞自轉(zhuǎn)地球

【知識(shí)儲(chǔ)備】圖層文件夾 當(dāng)一個(gè)Flash影片的圖層較多時(shí)，會(huì)給閱讀、調(diào)整、修改Flash影片等帶來(lái)不便。圖層文件夾就是用來(lái)解決該問(wèn)題?？梢詫⑼活愋偷膱D層放置到一個(gè)圖層文件夾中，形成圖層文件夾結(jié)構(gòu)。例如