學(xué)習(xí)目標(biāo)第5講制作形狀補(bǔ)間動畫掌握形狀補(bǔ)間動畫的原理和創(chuàng)建方法

。使用形狀補(bǔ)間動畫表現(xiàn)事物變化的過程

。掌握形狀提示點(diǎn)的原理和使用方法

。

使用形狀提示點(diǎn)動畫表現(xiàn)舌頭擺動效果的方法

。

/sundae_meng重點(diǎn)與難點(diǎn)分析

創(chuàng)建形狀補(bǔ)間動畫的元素及屬性設(shè)置教學(xué)難點(diǎn)教學(xué)重點(diǎn)形狀補(bǔ)間動畫的制作方法

/sundae_meng5.1形狀補(bǔ)間動畫原理5.2形狀提示點(diǎn)原理5.3課后作業(yè)本章大綱/sundae_meng1．形狀補(bǔ)間動畫的概念（1）形狀補(bǔ)間動畫的概念

在Flash的時間幀面板上，在一個時間點(diǎn)（關(guān)鍵幀）繪制一個形狀，然后在另一個時間點(diǎn)（關(guān)鍵幀）更改該形狀或繪制另一個形狀，F(xiàn)lash根據(jù)二者之間的幀的值或形狀來創(chuàng)建的動畫被稱為“形狀補(bǔ)間動畫”。/sundae_meng形狀補(bǔ)間動畫用于創(chuàng)建形狀變化的動畫效果，使一個形狀變成另一個形狀，同時也可以設(shè)置圖形形狀位置、大小、顏色的變化。只要創(chuàng)建出兩個關(guān)鍵幀中的對象，其他過渡幀便可以通過Flash自己制作出來。

4.1補(bǔ)間形狀動畫的基本概念/sundae_meng形狀補(bǔ)間動畫所謂形狀補(bǔ)間，就是創(chuàng)建對象的變形動畫，使某種形狀的對象逐漸地變形為另一種形狀。形變動畫的對象不能是元件、組或者直接導(dǎo)入的位圖圖像等，而必須是打散的圖形。/sundae_meng制作條件4.1補(bǔ)間形狀動畫的基本概念制作形狀補(bǔ)間動畫需要具備以下3個條件：在一個形狀補(bǔ)間動畫中至少有兩個關(guān)鍵幀。這兩個關(guān)鍵幀中的對象必須是可編輯圖形，如果是其他類型的對象，則必須將其轉(zhuǎn)換為可編輯的圖形。3.這兩個關(guān)鍵幀中的圖形必須有一些變化，否則制作的動畫將沒有動的效果。/sundae_meng1．形狀補(bǔ)間動畫的概念

（2）構(gòu)成形狀補(bǔ)間動畫的元素

首尾幀上的對象必須是矢量圖形,如果是圖形元件、按鈕、文字或位圖的話,必須首先打散（Ctrl+B）。（3）形狀補(bǔ)間動畫在時間幀面板上的表現(xiàn)形狀補(bǔ)間動畫建好后，時間幀面板的背景色變?yōu)榈G色。/sundae_menga、形狀改變b、顏色漸變c、位置變化d、大小變化e、透明度變化2、形變動畫分類/sundae_meng5.1形狀補(bǔ)間動畫原理5.1.1知識點(diǎn)講解形狀補(bǔ)間動畫是動畫制作中一種常用的動畫制作方法，它可以補(bǔ)間形狀的位置、大小和顏色等，使用形狀補(bǔ)間可以制作出千變?nèi)f化的動畫效果。一、形狀補(bǔ)間動畫的原理。形狀補(bǔ)間動畫可以實(shí)現(xiàn)兩個矢量圖形之間顏色、形狀、位置的變化，如圖5-1所示。圖5-1形狀補(bǔ)間動畫原理綠色漸變紅色漸變舞臺左邊舞臺右邊小蘋果大蘋果顏色補(bǔ)間位置補(bǔ)間形狀補(bǔ)間/sundae_meng任務(wù)一：圖形變形初始狀態(tài)終止?fàn)顟B(tài)形狀顏色位置大小練習(xí)：/sundae_meng圓形變方形？/sundae_meng見“五角星變成花”案例形狀變化用到的元素必須是非成組、非元件的矢量圖形，可以用分離功能把元件和成組打散后進(jìn)行形狀變化。/sundae_meng任務(wù)二：圖片變形注：先將位圖轉(zhuǎn)換為矢量圖（分離）/sundae_meng白雪公主變成小熊/sundae_meng任務(wù)三：文字變形注：（1）分散到圖層（2）文本分離

CTRL+B/sundae_meng【補(bǔ)間形狀動畫幀】

創(chuàng)建成功的的補(bǔ)間形狀動畫在兩個關(guān)鍵幀之間繪制一個淺綠色背景填充的實(shí)線箭頭。成功創(chuàng)建的形狀補(bǔ)間幀補(bǔ)間形狀幀4.1補(bǔ)間形狀動畫的基本概念/sundae_meng動畫欣賞倒計(jì)時效果/sundae_meng【未完成或中斷的漸變】

如果補(bǔ)間動畫出現(xiàn)錯誤，則本應(yīng)出現(xiàn)的實(shí)線箭頭符號顯示為虛線。未成功創(chuàng)建的形狀補(bǔ)間幀4.1補(bǔ)間形狀動畫的基本概念未完成或中斷的漸變/sundae_meng1、在第一個關(guān)鍵幀上繪制一個形狀，如果是文字、圖片、組合類對象或者元件，必須先分離，快捷鍵Ctrl+B。2、在第二個關(guān)鍵幀上繪制另一個形狀，如果是文字、圖片、組合類對象或者元件，必須先分離，快捷鍵Ctrl+B。3、在第一個關(guān)鍵幀上單擊右鍵，選擇“形狀補(bǔ)間”即可實(shí)現(xiàn)。創(chuàng)建步驟/sundae_meng4.2補(bǔ)間形狀動畫的制作方法

當(dāng)滿足了制作條件后，就可以制作補(bǔ)間形狀動畫。可以通過右鍵菜單，也可以通過菜單命令，兩者相比，前者更方便快捷，比較常用。1.通過右鍵菜單創(chuàng)建補(bǔ)間形狀動畫選擇同一圖層的兩個關(guān)鍵幀之間的任意一幀，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【創(chuàng)建補(bǔ)間形狀】命令。2.通過菜單創(chuàng)建補(bǔ)間形狀動畫選擇同一圖層的兩個關(guān)鍵幀之間的任意一幀，單擊菜單【插入】|【補(bǔ)間形狀】命令。創(chuàng)建補(bǔ)間形狀動畫/sundae_meng4.2補(bǔ)間形狀動畫的制作方法

如果想刪除創(chuàng)建的補(bǔ)間形狀動畫，可以通過右鍵菜單，也可以通過菜單命令，兩者相比，前者更方便快捷，比較常用。1.通過右鍵菜單刪除補(bǔ)間形狀動畫選擇已經(jīng)創(chuàng)建補(bǔ)間形狀的兩個關(guān)鍵幀之間的任意一幀，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【刪除補(bǔ)間】命令。2.通過菜單命令刪除補(bǔ)間形狀動畫選擇已經(jīng)創(chuàng)建補(bǔ)間形狀的兩個關(guān)鍵幀之間的任意一幀，單擊菜單【插入】|【刪除補(bǔ)間】命令。刪除補(bǔ)間形狀動畫/sundae_meng二、創(chuàng)建形狀補(bǔ)間動畫。同一圖層上，在繪制著不同矢量圖形的兩關(guān)鍵幀之間任選1幀，然后再在【屬性】面板上的【補(bǔ)間】下拉列表中選擇【形狀】選項(xiàng)，如圖5-2所示，就可創(chuàng)建一個形狀補(bǔ)間動畫。圖5-2創(chuàng)建形狀補(bǔ)間動畫

三、認(rèn)識形狀補(bǔ)間動畫的屬性面板。

Flash8的【屬性】面板隨選定的對象不同而發(fā)生相應(yīng)的變化。當(dāng)建立了一個形狀補(bǔ)間動畫后，單擊時間軸，其【屬性】面板如5-2所示。其中經(jīng)常使用的選項(xiàng)有如下兩種：（1）【緩動】選項(xiàng)。在【緩動】選項(xiàng)中輸入相應(yīng)的數(shù)值，形狀補(bǔ)間動畫則會隨之發(fā)生相應(yīng)的變化。（2）【混合】選項(xiàng)。在【混合】選項(xiàng)中包含“角形”和“分布式”兩個參數(shù)。/sundae_meng3、屬性面板(1)簡易：控制形變快慢（-100——100）負(fù)值:越來越快即加速運(yùn)動正值:越來越慢即減速運(yùn)動(2)混合分布式：該方式可使動畫過程中過渡幀的圖形比較平滑。角形：創(chuàng)建過渡幀中的圖形更多地保留了原來圖形的尖角或直線的特征。/sundae_meng思考一：如何改變形變的速度？“緩動”值：調(diào)節(jié)速度的變化“混合”選項(xiàng)：分布式和角形/sundae_meng4、形狀提示（1）形狀提示的作用在“起始形狀”和“結(jié)束形狀”中添加相對應(yīng)的“參考點(diǎn)”，使Flash在計(jì)算變形過渡時依一定的規(guī)則進(jìn)行，從而較有效地控制變形過程。/sundae_meng4、形狀提示/sundae_meng4.2補(bǔ)間形狀動畫的制作方法

在制作形變動畫時，如何要控制較為復(fù)雜的形變，則會出現(xiàn)變化過程雜亂無章的情況。這時，可以通過添加形狀提示，控制形狀變化。形狀提示是一個有顏色的實(shí)心小圓，上面標(biāo)志著小寫的英文字母，用于識別起始形狀和結(jié)束形狀中相對應(yīng)的點(diǎn)。

對于每一個形變過程，可以為它添加26個形狀提示，從a標(biāo)記到z標(biāo)記，實(shí)際上只用幾個就夠了。

在制作形狀補(bǔ)間動畫時，如果使用形狀提示在開始和結(jié)束形狀中選擇公共點(diǎn)，這些公共點(diǎn)在過渡形狀中保持不變，這樣就可以較為精確地控制整個形變過程。使用形狀提示控制形狀變化/sundae_meng（2）添加形狀提示的方法

先在形狀補(bǔ)間動畫的開始幀上單擊一下，再執(zhí)行【修改】|【形狀】|【添加形狀提示】命令

注：變形提示包含從(a--z)26個字母.在開始關(guān)鍵幀上提示點(diǎn)為黃色，結(jié)束為綠色,如提示點(diǎn)安放不成功或不在一條曲線上時為紅色.提示：如果開始關(guān)鍵幀和結(jié)束關(guān)鍵幀的形狀提示點(diǎn)沒有變黃或變綠，則說明這個形狀提示點(diǎn)沒有在兩個幀中對應(yīng)起來。/sundae_meng（3）添加形狀提示的技巧“形狀提示”可以連續(xù)添加，最多能添加26個。

確?！靶螤钐崾尽笔欠线壿嫷摹Ｐ螤钐崾疽谛螤畹倪吘壊拍芷鹱饔?。另外，要刪除所有的形狀提示，選擇【修改】|【形狀】|【刪除所有提示】。刪除單個形狀提示，單擊右鍵，在彈出菜單中選擇【刪除提示】。

/sundae_meng1、補(bǔ)間形狀動畫只能作用于形狀（要對組合、實(shí)例、位圖或文本對象應(yīng)用形狀補(bǔ)間動畫，必須先將這些對象分離為形狀）2、形狀間的漸變只能在同一圖層3、在復(fù)雜的形狀補(bǔ)間動畫中，最好創(chuàng)建中間形狀然后再進(jìn)行補(bǔ)間，而不要只定義起始和結(jié)束的形狀。4、在起始和結(jié)束的形狀中，形狀提示的順序必須是一致的。注意事項(xiàng)4.1補(bǔ)間形狀動畫的基本概念/sundae_meng4.2補(bǔ)間形狀動畫的制作方法

補(bǔ)間形狀動畫的屬性通過【屬性】面板的【補(bǔ)間】選項(xiàng)進(jìn)行設(shè)置。首先選擇已經(jīng)創(chuàng)建補(bǔ)間形狀動畫兩個關(guān)鍵幀之間的任意一幀，然后展開【屬性】面板。動畫屬性設(shè)置/sundae_meng4.2補(bǔ)間形狀動畫的制作方法（1）緩動：默認(rèn)情況下，過渡幀之間的變化速率是不變的，可以調(diào)整變化速率，創(chuàng)建更為自然地由慢到快的加速或先快后慢的減速效果【取值】

0：默認(rèn)，勻速

-100-0:加速

0-100

：減速（2）混合：共有兩種選項(xiàng)“分布式”、“角形”【分布式】：創(chuàng)建的動畫中間形狀更為平滑【角形】：創(chuàng)建的動畫中間形狀會保留明顯的角和直線動畫屬性設(shè)置/sundae_meng4.2補(bǔ)間形狀動畫的制作方法形狀提示點(diǎn)制作方法【步驟】1.選擇開始關(guān)鍵幀，單擊【修改】|【形狀】|【添加形狀提示】，可添加一個提示點(diǎn)，再次選擇可繼續(xù)添加提示點(diǎn)2.調(diào)整控制點(diǎn)到合適位置，提示點(diǎn)變黃色3.選擇結(jié)束關(guān)鍵幀，重復(fù)步驟1、2，提示點(diǎn)變綠色提示：如果開始關(guān)鍵幀和結(jié)束關(guān)鍵幀的形狀提示點(diǎn)沒有變黃或變綠，則說明這個形狀提示點(diǎn)沒有在兩個幀中對應(yīng)起來。/sundae_meng4.2補(bǔ)間形狀動畫的制作方法形狀提示點(diǎn)制作實(shí)例【正方形變心形】/sundae_meng【課堂實(shí)例——日月變換】4.3補(bǔ)間形狀動畫實(shí)例制作“日月變換”動畫/sundae_meng新建Flash文件，然后設(shè)置影片的屬性，包括背景色和屏幕大小在時間軸窗口選擇當(dāng)前圖層，然后單擊選擇一空白單元格，按F6鍵，建立起始關(guān)鍵幀。如果是第一幀，可省去此操作選擇工具箱中的工具繪制圖形，作為補(bǔ)間形狀的起始圖形。在本例中，選用橢圓工具、選擇工具、顏料桶工具繪制月牙

【步驟】制作“日月變換”動畫4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng在第30幀處插入關(guān)鍵幀，使用橢圓工具繪制太陽在兩個關(guān)鍵幀中任選一幀，單擊右鍵選擇“創(chuàng)建補(bǔ)間形狀”出現(xiàn)淺綠色填充的箭頭即可

制作“日月變換”動畫【步驟】4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng制作“進(jìn)度條”動畫4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng圖層1命名為“框”，編輯內(nèi)容：一個進(jìn)度條的框和文字loading新建一個圖層“顏色”，內(nèi)容：畫一個顏色條長寬剛好和框的大小一致在第50幀處插入關(guān)鍵幀，將顏色條的寬度調(diào)整為和“框”的寬度一樣在第1幀和第50幀之間的任意一幀處單擊右鍵，選擇【創(chuàng)建補(bǔ)間形狀】制作“進(jìn)度條”動畫【步驟】4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng

圖7-35制作完成的封面圖7-36入庫后的封面制作“翻書效果”動畫4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng

制作“文字變形”動畫4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng

文字對象分散到圖層

制作“文字變形”動畫【技巧】先使用【修改】|【分離】將要變形的文字打散（出現(xiàn)網(wǎng)格點(diǎn)），再進(jìn)行補(bǔ)間形狀設(shè)置，方法同幾何變形。(1)“分離”命令(2)“分散到圖層”命令4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng給“日月變換”動畫添加形變提示4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng給“日月變換”動畫添加形變提示1.添加變形提示關(guān)鍵點(diǎn)單擊【修改】|【形狀】|【添加形狀提示】，出現(xiàn)提示點(diǎn)a連續(xù)執(zhí)行該命令，可添加更多提示點(diǎn)快捷鍵（Ctrl+Shift+H）

2.調(diào)整變形提示關(guān)鍵點(diǎn)鼠標(biāo)拖拽可以調(diào)整提示點(diǎn)位置

4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng任務(wù)二：圖片變形注：先將位圖轉(zhuǎn)換為矢量圖（分離）/sundae_meng任務(wù)三：文字變形注：（1）分散到圖層（2）文本分離

CTRL+B/sundae_meng自主探究

利用提供的丑小鴨素材，制作丑小鴨變成小天鵝的變形過程。/sundae_meng思考二：

如何使形變按預(yù)期方式變化，使變形過程更加細(xì)膩？添加形狀提示/sundae_meng添加形狀提示前后的對比：/sundae_meng1、補(bǔ)間形狀動畫只能作用于形狀（要對組合、實(shí)例、位圖或文本對象應(yīng)用形狀補(bǔ)間動畫，必須先將這些對象分離為形狀）2、形狀間的漸變只能在同一圖層3、在復(fù)雜的形狀補(bǔ)間動畫中，最好創(chuàng)建中間形狀然后再進(jìn)行補(bǔ)間，而不要只定義起始和結(jié)束的形狀。4、在起始和結(jié)束的形狀中，形狀提示的順序必須是一致的。注意事項(xiàng)4.1補(bǔ)間形狀動畫的基本概念/sundae_meng案例：變化的字母1新建一個Flash文件，在圖層一的第1幀輸入字母“A”。2在第15幀處插入關(guān)鍵幀，并將字母“A”改為“B”。3在第30幀處插入關(guān)鍵幀，并將字母“B”改為“C”。4在第1幀到第15幀之間和第15幀到第30幀之間，創(chuàng)建形狀補(bǔ)間動畫。自主探究

/sundae_meng課堂總結(jié)1.形狀補(bǔ)間動畫的步驟：（1）.初始關(guān)鍵幀：編輯初始對象狀態(tài)（2）.終止關(guān)鍵幀：編輯終止對象狀態(tài)（3）.創(chuàng)建補(bǔ)間形狀特點(diǎn)形狀補(bǔ)間動畫在時間軸上的表現(xiàn)淡綠色背景加長箭頭組成元素矢量圖形；如果使用元件、按鈕、文字，則必須先打散完成作用實(shí)現(xiàn)兩個形狀之間的變化;或一個形狀的大小、位置、顏色等的變化。2./sundae_meng使用形狀提示創(chuàng)建補(bǔ)間形狀動畫，實(shí)現(xiàn)五個福娃依次變形的動畫效果。作業(yè)：/sundae_meng使用形狀提示創(chuàng)建補(bǔ)間形狀動畫，實(shí)現(xiàn)五個福娃依次變形的動畫效果。作業(yè)：/sundae_meng制作“進(jìn)度條”動畫4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng圖層1命名為“框”，編輯內(nèi)容：一個進(jìn)度條的框和文字loading新建一個圖層“顏色”，內(nèi)容：畫一個顏色條長寬剛好和框的大小一致在第50幀處插入關(guān)鍵幀，將顏色條的寬度調(diào)整為和“框”的寬度一樣在第1幀和第50幀之間的任意一幀處單擊右鍵，選擇【創(chuàng)建補(bǔ)間形狀】制作“進(jìn)度條”動畫【步驟】4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng制作“翻書效果”動畫1.制作封底新建圖層“封底”，在第1幀處使用矩形工具繪制封底矩形（黑色），并繪制一個小的內(nèi)頁矩形（藍(lán)色）放置其上方，在第90幀處插入幀（F5）。4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng制作“翻書效果”動畫2.制作封面新建圖層“封面”，在第1幀處使用矩形工具繪制矩形（橙色，與封底一樣大?。?，放置在封底上方，并對齊。在第15幀處插入關(guān)鍵幀（F6），修改矩形為棱形。選1-15之間的任意幀，添加補(bǔ)間形狀4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng4.3補(bǔ)間形狀動畫實(shí)例制作“翻書效果”動畫2.制作封面在第16幀處插入關(guān)鍵幀（F6），將菱形水平翻轉(zhuǎn)，并移動到封底左側(cè)。在第30幀處插入關(guān)鍵幀，將第1幀處的矩形復(fù)制粘貼過來，并對齊。選16-30之間的任意幀，添加補(bǔ)間形狀/sundae_meng4.3補(bǔ)間形狀動畫實(shí)例制作“翻書效果”動畫3.制作內(nèi)頁新建圖層“內(nèi)頁1”，在第31幀處插入關(guān)鍵幀（F6），將內(nèi)頁矩形復(fù)制粘貼過來。在第45幀處插入關(guān)鍵幀（F6），修改矩形為棱形。選31-45之間的任意幀，添加補(bǔ)間形狀/sundae_meng4.3補(bǔ)間形狀動畫實(shí)例制作“翻書效果”動畫3.制作內(nèi)頁在第46幀處插入關(guān)鍵幀（F6），將菱形水平翻轉(zhuǎn)，并移動到封底左側(cè)。在第60幀處插入關(guān)鍵幀，將第31幀處的矩形復(fù)制粘貼過來，并對齊。選46-60之間的任意幀，添加補(bǔ)間形狀/sundae_meng

更為復(fù)雜的翻書效果制作關(guān)鍵界面4.3補(bǔ)間形狀動畫實(shí)例/sundae_meng5.1.2范例解析（一）──創(chuàng)建形狀補(bǔ)間動畫練習(xí)請同學(xué)們在老師的帶領(lǐng)下對形狀補(bǔ)間動畫的創(chuàng)建方法和原理進(jìn)行進(jìn)一步的熟悉，并跟隨以下要求進(jìn)行操作訓(xùn)練。1、新建一個Flash文檔，然后利用【橢圓】工具在舞臺上繪制一個圓形，并在【屬性】面板中設(shè)置圓的顏色為“#00FF00”，寬高為“7px×7px”，如圖5-3所示。2、在第20幀處插入關(guān)鍵幀，然后以圓為基點(diǎn)繪制一片樹葉，如圖5-4所示。圖5-3繪制圓形圖5-4繪制樹葉/sundae_meng3、在第20幀處，首先刪除“圓”，然后填充樹葉，效果如圖5-5所示。

#FFFFFF#339900【顏色】面板

樹葉效果

圖5-5填充樹葉/sundae_meng4、在第40幀處插入關(guān)鍵幀，然后調(diào)節(jié)樹葉的顏色效果如圖5-6所示

【顏色】面板

樹葉效果

#FFFFFF#CC99005、在第60幀處將樹葉移出舞臺。6、選中第1幀，然后在【屬性】面板的【補(bǔ)間】下拉列表中選擇“形狀”選項(xiàng)，如圖5-7所示。則創(chuàng)建出第1幀～第20幀之間的形狀補(bǔ)間動畫。圖5-7創(chuàng)建補(bǔ)間動畫

/sundae_meng7、使用相同的方法，在第20幀、第40幀兩處分別創(chuàng)建形狀補(bǔ)間動畫。8、按Ctrl+Enter

快捷鍵測試播放影片，觀看這個由小圓成長為一片綠葉，再枯黃，再凋零的動畫。9、關(guān)閉測試播放器，選中第40幀，然后在屬性面板中分別設(shè)置【緩動】為“－100~100”之間不同的值，然后分別測試影片，觀看樹葉凋落動畫的速率變化。/sundae_meng5.1.3范例解析（二）──制作“浪漫綻放”

花是帶給人們幸福與浪漫的精靈。本例將使用形狀補(bǔ)間動畫來制作一個“浪漫的綻放”動畫，帶領(lǐng)讀者來一同體驗(yàn)自己繪制出的浪漫感覺，其設(shè)計(jì)思路及效果如圖5-8所示。圖5-8制作思路及效果

/sundae_meng1、制作葉片的生長。（1）打開教學(xué)資源中“素材\第5講\浪漫的綻放\浪漫的綻放-模板.fla”文件，場景效果如圖5-9所示。（2）在“背景”圖層之上新建并重命名圖層，直至圖層效果如圖5-10所示。圖5-9模板場景

圖5-10圖層效果/sundae_meng（3）選擇【矩形】工具，在【屬性】面板中設(shè)置【筆觸顏色】為“無”，【填充顏色】為“#37C030”，在“葉片1”圖層上繪制一個寬高為“5px×5px”的矩形，并將其置于花盆的后面，效果如圖5-11所示。（4）在“葉片1”圖層的第10幀處插入關(guān)鍵幀，利用【選擇】工具調(diào)整第10幀處“矩形”的形狀如圖5-12所示。（5）在“葉片1”圖層的第20幀處插入關(guān)鍵幀，利用【選擇】工具調(diào)整第20幀處“矩形”的形狀如圖5-13所示。矩形圖5-11第1幀葉片形狀

圖5-12第10幀葉片形狀

圖5-13第20幀葉片形狀

/sundae_meng（6）在第1幀～第10幀之間、第10幀～第20幀之間創(chuàng)建形狀補(bǔ)間動畫，這樣一片葉子的生長過程就制作完成。（7）使用同樣的方法在圖層“葉片2”、“葉片3”、“葉片4”、“葉片5”、“葉片6”上分別制作其他5片葉子的生長，完成葉片的生長動畫。此時的場景效果如圖5-14所示，【時間軸】效果如圖5-15所示。

葉片6葉片2葉片4葉片5葉片3葉片1圖5-14完成葉片制作

/sundae_meng在制作葉片生長動畫效果時，注意調(diào)整葉片生長的先后順序，盡量使葉片生長看起來貼近自然。每個葉片的生長時間也可根據(jù)葉片大小有所不同。建議將制作完成的圖層進(jìn)行鎖定，以免產(chǎn)生誤操作。圖5-15【時間軸】效果一

/sundae_meng2、制作花梗的生長。（1）在“葉片6”圖層之上新建一個圖層并重命名為“花?！眻D層。（2）在“花?！眻D層的第65幀處插入關(guān)鍵幀。（3）選擇【矩形】工具，在【屬性】面板中設(shè)置【筆觸顏色】為“無”，【填充顏色】為“#CCE492”，在“花?！眻D層的第65幀處繪制一個寬高為“5px×5px”的矩形，而后將其置于花盆的后面，效果如圖5-16所示。（4）利用【選擇】工具調(diào)整矩形的形狀如圖5-17所示。（5）在“花?！眻D層的第105幀處插入關(guān)鍵幀，利用【選擇】工具調(diào)整第105幀處“花?！钡男螤钊鐖D5-18所示。（6）在第65幀～第105幀之間創(chuàng)建形狀補(bǔ)間動畫，這樣花梗的生長過程就制作完成了?；üD5-16原始矩形

圖5-17花梗的原始形狀

圖5-18第105幀花梗形狀/sundae_meng3、制作花瓣的生長。（1）在“花?！眻D層之上新建并重命名圖層，直至圖層效果如圖5-19所示。（2）在“花瓣1”圖層的第105幀處插入關(guān)鍵幀。（3）選擇【橢圓】工具，在【屬性】面板中設(shè)置【筆觸顏色】為“無”，【填充顏色】為“#F997DC”，在“花瓣”圖層的第105幀處繪制一個寬高為“1.3px×1.1px”的橢圓，并將其置于花梗頂端花苞的上面，效果如圖5-20所示。橢圓圖5-19圖層效果

圖5-20第105幀花瓣形狀/sundae_meng在繪制花瓣的原始形狀時，需要將其放置在花苞上并適當(dāng)調(diào)整位置，使得花開得更自然，也達(dá)到掩蓋花苞的目的。（4）在“花瓣1”圖層的第135幀處插入關(guān)鍵幀，利用【選擇】工具調(diào)整第135幀處“花瓣”的形狀如圖5-21所示。（5）在第105幀～第135幀之間創(chuàng)建形狀補(bǔ)間動畫，這樣一片花瓣的生長過程就制作完成。（6）使用同樣的方法在圖層“花瓣2”、“花瓣3”、“花瓣4”、“花瓣5”、“花瓣6”上分別制作其他5片花瓣的生長，完成花瓣的生長動畫，效果如圖5-22所示。圖5-21第135幀花瓣形狀

花瓣4花瓣5花瓣6花瓣3花瓣1花瓣2圖5-22完成制作

/sundae_meng（7）最終的場景效果如圖5-23所示，時間軸效果如圖5-24所示。圖5-23最終場景效果

圖5-24制作完成后的【時間軸】效果（8）保存測試影片，一株美麗的花兒浪漫綻放的動畫效果制作完成。/sundae_meng5.1.4課堂練習(xí)──制作“魔幻撲克”請同學(xué)們自己動手制作一個撲克變幻的動畫，其效果如圖5-25所示。1、新建一個Flash文檔，設(shè)置文檔【尺寸】為“500px×353px”，文檔其他屬性使用默認(rèn)參數(shù)。圖5-25魔幻撲克效果

/sundae_meng2、執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】菜單命令，將教學(xué)資源中的“素材\第5講\魔幻撲克\魔幻撲克-素材.fla”文件打開，將外部庫里的元件和圖片復(fù)制到當(dāng)前庫中，效果如圖5-26所示。3、將【庫】面板中的“背景”位圖拖入場景中，設(shè)置其寬高為“500px×353px”，并相對舞臺居中對齊，效果如圖5-27所示。圖5-26【庫】面板

圖5-27導(dǎo)入背景圖片/sundae_meng4、將“背景”圖層鎖定，在“背景”圖層上新建并重命名圖層，直到圖層效果如圖5-28所示，并在所有圖層的第20幀處插入幀。5、選擇“紅桃2參考”圖層，將【庫】面板中的“紅桃2參考圖”圖形元件拖入到舞臺中，并相對舞臺居中對齊。在【屬性】面板中設(shè)置其【Alpha】參數(shù)為“50%”，效果如圖5-29所示。圖5-28設(shè)置大小和位置

圖5-29拖入“紅桃2參考圖”

/sundae_meng6、根據(jù)參考圖在各個圖層上繪制花色為“紅桃2”紙牌各個部分的形狀，如圖5-30所示。

圖5-30繪制紅桃2其中【字體】為“BookmanOldStyle”（讀者可以設(shè)置為自己喜歡的字體或者自行購買外部字體庫）。

/sundae_meng7、在“花色上”、“花色中”、“花色下”、“數(shù)字上”、“數(shù)字下”圖層的第20幀處按F7

快捷鍵插入空白關(guān)鍵幀。使用同樣的方法繪制花色為“黑桃A”的紙牌，效果如圖5-31所示。8、將“數(shù)字下”、“數(shù)字上”圖層的第1幀和第20幀處的數(shù)字打散。9、分別在“花色上”、“花色中”、“花色下”、“數(shù)字上”、“數(shù)字下”圖層的第1幀～第20幀之間創(chuàng)建“形狀補(bǔ)間“動畫，時間軸效果如圖5-32所示。圖5-31繪制黑桃A

圖5-32繪制傾斜為45°的線條10、保存測試影片，一個簡單而又神奇的撲克變幻動畫制作完成。/sundae_meng5.2形狀提示點(diǎn)原理當(dāng)用形狀補(bǔ)間動畫制作一些較為復(fù)雜的變形動畫時，常常會使畫面變得混亂，根本達(dá)不到用戶想要的變化過程，這時就需要使用形狀提示點(diǎn)來進(jìn)行控制。5.2.1知識點(diǎn)講解一、添加形狀提示。單擊形狀補(bǔ)間動畫的開始幀，執(zhí)行【修改】/【形狀】/【添加形狀提示】菜單命令。這樣在形狀上就會增加一個帶字母的紅色圓圈，相應(yīng)地在結(jié)束幀的形狀上也會增加形狀提示符，如圖5-33所示。分別將這兩個形狀提示符安放到適當(dāng)?shù)奈恢脮r，起始關(guān)鍵幀上的形狀提示點(diǎn)為黃色，結(jié)束關(guān)鍵幀的形狀提示點(diǎn)為綠色，如圖5-34所示第1幀

第10幀

顯示為黃色

顯示為綠色

圖5-33未調(diào)節(jié)

圖5-34調(diào)節(jié)成功

/sundae_meng二、形狀提示原理。繼續(xù)添加形狀提示點(diǎn)，并調(diào)節(jié)提示點(diǎn)位置，此時圖形變化的過程如圖5-35所示。圖5-35使用形狀提示

圖5-36所示為未添加形狀提示點(diǎn)的變化過程，經(jīng)過觀察可以清楚的了解形狀提示的功能和原理，即形狀提示點(diǎn)用于識別起始形狀和結(jié)束形狀中相對應(yīng)的點(diǎn)，并用字母a到z來表示。圖5-36未使用形狀提示/sundae_meng5.2.2范例解析（一）──使用形狀提示點(diǎn)練習(xí)請同學(xué)們在老師的帶領(lǐng)下對形狀提示點(diǎn)的創(chuàng)建方法和原理進(jìn)行進(jìn)一步的熟悉，并跟隨以下要求進(jìn)行操作訓(xùn)練。1、打開教學(xué)資源中“素材\第5講\形狀提示點(diǎn)練習(xí)\飛翔的蝙蝠.fla”文件。2、分別在第1幀～第10幀之間，第11幀～第20幀之間，第21幀～第30幀之間，第31幀～第40幀之間創(chuàng)建形狀補(bǔ)間動畫，拖動時間軸觀察圖形的漸變效果，如圖5-37所示。

圖5-37形狀補(bǔ)間效果

/sundae_meng3、選中“圖層1”的第1幀，執(zhí)行【修改】/【形狀】/【添加形狀提示】菜單命令添加一個形狀提示點(diǎn)，并將其拖動到蝙蝠的翅膀上，如圖5-38所示。選中第10幀，將提示點(diǎn)也拖動到蝙蝠的翅膀上，此時形狀提示點(diǎn)變?yōu)榫G色，如圖5-39所示。

通過觀察可以發(fā)現(xiàn)，此時的形狀補(bǔ)間動畫效果并不理想，整個形狀補(bǔ)間動畫效果顯的十分的雜亂無章，沒有達(dá)到預(yù)期的效果。圖5-38添加形狀提示點(diǎn)一

圖5-39調(diào)整形狀提示點(diǎn)一/sundae_meng4、使用同樣的方法添加3個形狀提示點(diǎn)，并分別在第1幀和第10幀調(diào)整提示點(diǎn)的位置，效果如圖5-40和圖5-41所示。圖5-40添加形狀提示點(diǎn)二

圖5-41調(diào)整形狀提示點(diǎn)二5、使用同樣的方法為后續(xù)的形狀補(bǔ)間動畫添加形狀提示點(diǎn)，圖5-42所示為第31幀處的形狀提示點(diǎn)，圖5-43所示為第40幀處的形狀提示點(diǎn)。

圖5-42添加形狀提示點(diǎn)三

圖5-43調(diào)整形狀提示點(diǎn)三/sundae_meng6、此時再拖動時間軸觀察這個形狀補(bǔ)間動畫的變換效果，如圖5-44所示。圖5-44添加形狀提示點(diǎn)后的效果

/sundae_meng5.2.3范例解析（二）──制作“旋轉(zhuǎn)的三棱錐”本例將使用形狀提示點(diǎn)動畫來制作一個旋轉(zhuǎn)的三棱錐效果，其設(shè)計(jì)思路及效果如圖5-45所示。1、素材準(zhǔn)備。（1）新建一個Flash文檔，文檔所有屬性使用默認(rèn)參數(shù)。圖5-45設(shè)計(jì)思路及效果

/sundae_meng（2）新建并重命名圖層，直至圖層效果如圖5-46所示。（3）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】菜單命令，將教學(xué)資源中的“素材\第5講\旋轉(zhuǎn)的三棱錐.fla”文件打開，將外部庫里的元件和圖片復(fù)制到當(dāng)前【庫】面板中，效果如圖5-47所示。

圖5-46圖層效果

圖5-47復(fù)制后的【庫】面板2、設(shè)置主場景。（1）選擇【矩形】工具，在【屬性】面板中設(shè)置【筆觸顏色】為“無”，【填充顏色】的【類型】為“線性”，從左至右第1個色塊顏色為“#00CCFF”，第2個色塊顏色為“#006666”，在“背景”圖層上繪制一個寬高為“550px×400px”的矩形，其位置坐標(biāo)x、y分別為“0”、“0”，如圖5-48所示

。/sundae_meng【顏色】面板

矩形最終效果

圖5-48繪制背景

（2）將【庫】面板中名為“邊框”的元件放置到“邊框”圖層上，并與舞臺居中對齊，效果如圖5-49所示。3、繪制輔助圖形。（1）選擇【多角星形】工具，在【屬性】面板中設(shè)置【筆觸高度】為“1”，【筆觸顏色】為“紅色”，設(shè)置【填充顏色】為“無”，單擊按鈕打開【工具設(shè)置】對話框，并設(shè)置【邊數(shù)】為“3”，單擊按鈕完成設(shè)置。/sundae_meng（2）在“輔助層”圖層上繪制一個寬高為“242.9px×213px”的三角形，其位置坐標(biāo)x、y分別為“153.6”、“93.5”，效果如圖5-50所示。圖5-49布置上下邊框

圖5-50繪制三角形（3）選擇【線條】工具，在【屬性】面板中設(shè)置【筆觸高度】為“1”，【筆觸顏色】為“紅色”，在“輔助層”圖層上的三角形右邊繪制兩條邊作為三棱錐的側(cè)邊，效果如圖5-51所示。/sundae_meng在繪制兩條邊時，注意線段需要兩兩相交，為后面填充圖形和對齊圖形做好準(zhǔn)備。圖5-51繪制側(cè)邊

（4）選中步驟（3）中繪制的兩條邊，按Ctrl+T快捷鍵打開【變形】面板，圖形旋轉(zhuǎn)的參數(shù)設(shè)置如圖5-52所示，然后單擊按鈕，復(fù)制兩條邊，水平移動到三角形的左側(cè)，效果如圖5-53所示。復(fù)制后的兩條邊圖5-52【變形】面板

圖5-53復(fù)制兩條邊/sundae_meng（5）在所有圖層的第60幀處插入幀，效果如圖5-54所示。4、制作旋轉(zhuǎn)三棱錐效果。（1）將【庫】面板中名為“圖片1.jpg”的圖片放置到“第一面”圖層上，并與舞臺居中對齊，然后選中舞臺上的圖片按Ctrl+B快捷鍵將圖片打散，效果如圖5-55所示打散圖片圖5-54在第60幀處插入幀

圖5-55放置第一張圖片（2）選中“輔助層”圖層的第1幀，按Ctrl+C快捷鍵復(fù)制當(dāng)前幀的圖形。

/sundae_meng在復(fù)制當(dāng)前幀圖形前，先檢查圖形是否都被打散，如果存在沒有打散的圖形，需要先將圖形打散后才進(jìn)行復(fù)制操作，這樣才能實(shí)現(xiàn)后面操作中分離圖的效果

（3）選中“第一面”圖層的第1幀，按Ctrl+Shift+V

快捷鍵將圖形粘貼到當(dāng)前位置，鎖定并隱藏“輔助層”圖層，效果如圖5-56所示。（4）選擇“第一面”圖層上的圖形，將多余的線條和填充區(qū)域刪除，只保留正面三角形區(qū)域的圖形，效果如圖5-57所示。鎖定并隱藏圖層圖5-56鎖定并隱藏“輔助層”圖層

圖5-57分離后的圖形/sundae_meng（5）在“第一面”圖層的第20幀、第40幀和第60幀處插入關(guān)鍵幀，然后在第21幀處插入空白關(guān)鍵幀。（6）取消隱藏“輔助層”圖層，選中“第一面”圖層的第20幀處的圖形，將圖形下面兩個頂點(diǎn)移動到如圖5-58所示的位置。然后選擇【填充變形】工具，向左上移動填充區(qū)域的中心點(diǎn)，效果如圖5-59所示。移動兩個頂點(diǎn)圖5-58改變圖形形狀

圖5-59調(diào)節(jié)漸變的中心位置/sundae_meng（7）選中“第一面”圖層的第40幀處的圖形，將圖形下面兩個頂點(diǎn)移動到如圖5-60所示的位置。然后選擇【填充變形】工具，向右上移動填充區(qū)域的中心點(diǎn)，效果如圖5-61所示。移動兩個頂點(diǎn)圖5-60改變圖形形狀圖5-61調(diào)節(jié)漸變的中心位置

（8）隱藏“輔助層”圖層，選擇“第一面”圖層，在第1幀和第20幀，第40幀和第60幀之間分別創(chuàng)建形狀補(bǔ)間動畫，觀察它們的變化，效果如圖5-62所示。

第10幀處的圖形

第50幀處的圖形

圖5-62變形對比

/sundae_meng