形狀補(bǔ)間動(dòng)畫詳解及實(shí)例

1、形狀補(bǔ)間動(dòng)畫是Flash中非常重要的表現(xiàn)手法之一，運(yùn)用它，你可以變幻出各種奇妙的不可思議的變形效果。本節(jié)從形狀補(bǔ)間動(dòng)畫基本概念入手，帶你認(rèn)識(shí)形狀補(bǔ)間動(dòng)畫在時(shí)間幀上的表現(xiàn)，了解補(bǔ)間動(dòng)畫的創(chuàng)建方法，學(xué)會(huì)應(yīng)用“形狀提示”讓圖形的形變自然流暢，最后，提供了二個(gè)實(shí)例練手，幫助你更深地理解形狀補(bǔ)間動(dòng)畫。1形狀補(bǔ)間動(dòng)畫的概念 （1）形狀補(bǔ)間動(dòng)畫的概念在Flash的時(shí)間幀面板上，在一個(gè)時(shí)間點(diǎn)（關(guān)鍵幀）繪制一個(gè)形狀，然后在另一個(gè)時(shí)間點(diǎn)（關(guān)鍵幀）更改該形狀或繪制另一個(gè)形狀，F(xiàn)lash 根據(jù)二者之間的幀的值或形狀來(lái)創(chuàng)建的動(dòng)畫被稱為“形狀補(bǔ)間動(dòng)畫”。（2）構(gòu)成形狀補(bǔ)間動(dòng)畫的元素 形狀補(bǔ)間動(dòng)畫可以實(shí)現(xiàn)兩個(gè)圖形之間顏色、

2、形狀、大小、位置的相互變化，其變形的靈活性介于逐幀動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫二者之間，使用的元素多為用鼠標(biāo)或壓感筆繪制出的形狀，如果使用圖形元件、按鈕、文字，則必先“打散”再變形。（3）形狀補(bǔ)間動(dòng)畫在時(shí)間幀面板上的表現(xiàn) 形狀補(bǔ)間動(dòng)畫建好后，時(shí)間幀面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有一個(gè)長(zhǎng)長(zhǎng)的箭頭，如圖3-3-1所示。圖3-3-1 形狀補(bǔ)間動(dòng)畫在時(shí)間幀面板上的標(biāo)記（4）創(chuàng)建形狀補(bǔ)間動(dòng)畫的方法 在時(shí)間軸面板上動(dòng)畫開始播放的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要開始變形的形狀，一般一幀中以一個(gè)對(duì)象為好，在動(dòng)畫結(jié)束處創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要變成的形狀，再單擊開始幀，在【屬性】面板上單擊【補(bǔ)間】旁邊的小

3、三角，在彈出的菜單中選擇【形狀】，此時(shí)，時(shí)間軸上的變化如圖3-3-1所示，一個(gè)形狀補(bǔ)間動(dòng)畫就創(chuàng)建完畢。2認(rèn)識(shí)形狀補(bǔ)間動(dòng)畫的屬性面板 Flash的【屬性】面板隨鼠標(biāo)選定的對(duì)象不同而發(fā)生相應(yīng)的變化。當(dāng)我們建立了一個(gè)形狀補(bǔ)間動(dòng)畫后，點(diǎn)擊時(shí)間幀，【屬性】面板如圖3-3-2所示。圖3-3-2 形狀補(bǔ)間動(dòng)畫【屬性】面板形狀補(bǔ)間動(dòng)畫的【屬性】面板上只有二個(gè)參數(shù)：（1）“簡(jiǎn)單”選項(xiàng) 在“0”邊有個(gè)滑動(dòng)拉桿按鈕 ，單擊后上下拉動(dòng)滑桿或填入具體的數(shù)值，形狀補(bǔ)間動(dòng)畫會(huì)隨之發(fā)生相應(yīng)的變化。在1到 -100 的負(fù)值之間，動(dòng)畫運(yùn)動(dòng)的速度從慢到快，朝運(yùn)動(dòng)結(jié)束的方向加速度補(bǔ)間。 在1 到 100 的正值之間，動(dòng)畫運(yùn)動(dòng)的速度從

4、快到慢，朝運(yùn)動(dòng)結(jié)束的方向減慢補(bǔ)間。 默認(rèn)情況下，補(bǔ)間幀之間的變化速率是不變的。 （2）“混合”選項(xiàng) “混合”選項(xiàng)中有二項(xiàng)供選擇：“角形”選項(xiàng)：創(chuàng)建的動(dòng)畫中間形狀會(huì)保留有明顯的角和直線，適合于具有銳化轉(zhuǎn)角和直線的混合形狀。 “分布式”選項(xiàng)：創(chuàng)建的動(dòng)畫中間形狀比較平滑和不規(guī)則。 至此，“形狀補(bǔ)間動(dòng)畫”的相關(guān)知識(shí)大家都已經(jīng)有所了解，下面動(dòng)手個(gè)實(shí)例，體會(huì)一下形狀補(bǔ)間動(dòng)畫的奇妙。實(shí)例:慶祝國(guó)慶 實(shí)例簡(jiǎn)介 國(guó)慶的夜空絢麗多彩，朵朵禮花在天空中綻放，遠(yuǎn)處傳來(lái)禮炮的轟鳴聲，讓我們來(lái)給這美麗的夜晚增加點(diǎn)喜慶，掛幾個(gè)大紅燈籠來(lái)慶祝祖國(guó)的生日吧。實(shí)例播放效果如圖 3-3-4所示。圖3-3-4 慶祝國(guó)慶實(shí)例畫面知識(shí)提

5、要 創(chuàng)建矢量圖形 創(chuàng)建形狀補(bǔ)間動(dòng)畫 將文字轉(zhuǎn)變?yōu)樾螤?用混色器設(shè)置顏色 制作步驟 1、 創(chuàng)建新文檔執(zhí)行【文件】|【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文檔】選項(xiàng)后，點(diǎn)擊【確定】按鈕，新建一個(gè)影片文檔，在【屬性】面板上設(shè)置文件大小為400*330象素，【背景色】為白色，如圖3-3-5所示。圖3-3-5 文檔屬性2、 創(chuàng)建背景圖層執(zhí)行【文件】|【導(dǎo)入到場(chǎng)景】命令，將本實(shí)例中名為“節(jié)日夜空.jpg”圖片導(dǎo)入到場(chǎng)景中，在第80幀處按下F5，加普通幀。如圖3-3-6所示。圖3-3-6 插入背景圖片3、 創(chuàng)建燈籠形狀 我們先來(lái)畫燈籠，執(zhí)行【窗口】|【設(shè)計(jì)面板】|【混色器】命令，打開混色器面

6、板，如圖3-3-7所示設(shè)置混色器面板的各項(xiàng)參數(shù)。圖3-3-7 混色器面板設(shè)置之一選擇工具欄上的橢圓工具 ，去掉邊線 ，在場(chǎng)景中畫一個(gè)橢圓做燈籠的主體，大小為65*40象素。接著我們來(lái)畫燈籠上下的邊，打開【混色器】面板，按照如圖3-3-8設(shè)置參數(shù)。圖3-3-8 混色器面板設(shè)置之二選擇工具欄上的矩形工具 ，去掉邊線，畫一個(gè)矩形，大小為30*10象素，復(fù)制這個(gè)矩形，分別放在燈籠的上下方，再畫一個(gè)小的矩形，長(zhǎng)寬為7*10象素，作為燈籠上面的提手。最后用直線工具 在燈籠的下面畫幾條黃色線條做燈籠穗，一個(gè)漂亮的燈籠就畫好了。如圖3-3-9所示（為了能清楚的顯示燈籠，可暫時(shí)將背景色改為藍(lán)色）。圖3-3-9

7、畫好的燈籠4、 復(fù)制粘貼四個(gè)燈籠復(fù)制剛畫好的燈籠，新建三個(gè)圖層，在每個(gè)圖層中粘貼一個(gè)燈籠，調(diào)整燈籠的位置，使其錯(cuò)落有致的排列在場(chǎng)景中。在第20、40幀處為各圖層添加關(guān)鍵幀，如圖3-3-10所示。圖3-3-10 錯(cuò)落有致的燈籠及時(shí)間軸面板5、把文字轉(zhuǎn)為形狀取代燈籠選取第一個(gè)燈籠，在第40幀處用文字“慶”取代燈籠，文字的的【屬性】面板上的參數(shù)：【文本類型】為靜態(tài)文本，【字體】為隸書，【字體大小】為60，【顏色】為紅色。對(duì)“慶”字執(zhí)行【修改】|【分散】命令，把文字轉(zhuǎn)為形狀。如圖 3-3-11上半部分所示。依照以上步驟，在第40幀處的相應(yīng)圖層上依次用“?！?、“國(guó)”、“慶”三個(gè)字取代另外三個(gè)燈籠，并執(zhí)行

8、【分散】操作，其結(jié)果如圖 3-3-11下半部分所示。圖3-3-11 用文字形狀取代燈籠形狀及文字打散6、 設(shè)置文字形狀到燈籠形狀的轉(zhuǎn)變。在“燈籠”各圖層的第60幀及80幀處，分別添加關(guān)鍵幀，現(xiàn)在，在80幀處各“燈籠”圖層中的內(nèi)容為“文字圖形”，應(yīng)該把它們換成“燈籠”。具體辦法可以分別選擇第20幀中的“燈籠”圖形，再一個(gè)個(gè)“粘貼”進(jìn)第80幀中，當(dāng)然，你先應(yīng)該清除第80幀處4個(gè)“燈籠”圖層中的內(nèi)容哦！7、 創(chuàng)建形狀補(bǔ)間動(dòng)畫。在“燈籠”各圖層的第20、60幀處單擊幀，在【屬性】面板上單擊【補(bǔ)間】旁邊的小三角在彈出的菜單中選擇【形狀】，建立形狀補(bǔ)間動(dòng)畫，如圖3-3-12所示。圖3-3-12 創(chuàng)建形狀補(bǔ)

9、間動(dòng)畫8、 測(cè)試存盤執(zhí)行【控制】|【測(cè)試影片】命令，觀察本例swf文件生成的動(dòng)畫有無(wú)問(wèn)題，如果滿意，執(zhí)行【文件】|【保存】命令，將文件保存成“慶祝國(guó)慶.fla”文件存盤，如果要導(dǎo)出Flash的播放文件，執(zhí)行【導(dǎo)出】|【導(dǎo)出影片】命令保存成“慶祝國(guó)慶.swf”文件。使用形狀提示 形狀補(bǔ)間動(dòng)畫看似簡(jiǎn)單，實(shí)則不然，F(xiàn)lash在“計(jì)算”2個(gè)關(guān)鍵幀中圖形的差異時(shí)，遠(yuǎn)不如我們想象中的“聰明”，尤其前后圖形差異較大時(shí)，變形結(jié)果會(huì)顯得亂七八糟，這時(shí)，“形狀提示”功能會(huì)大大改善這一情況。形狀提示的作用在“起始形狀”和“結(jié)束形狀”中添加相對(duì)應(yīng)的“參考點(diǎn)”，使Flash在計(jì)算變形過(guò)渡時(shí)依一定的規(guī)則進(jìn)行，從而較有效地

10、控制變形過(guò)程。（2）添加形狀提示的方法先在形狀補(bǔ)間動(dòng)畫的開始幀上單擊一下，再執(zhí)行【修改】|【形狀】|【添加形狀提示】命令，該幀的形狀就會(huì)增加一個(gè)帶字母的紅色圓圈，相應(yīng)地，在結(jié)束幀形狀中也會(huì)出現(xiàn)一個(gè)“提示圓圈”，用鼠標(biāo)左鍵單擊并分別按住這2個(gè)“提示圓圈”，在適當(dāng)位置安放，安放成功后開始幀上的“提示圓圈”變?yōu)辄S色，結(jié)束幀上的“提示圓圈”變?yōu)榫G色，安放不成功或不在一條曲線上時(shí)，“提示圓圈”顏色不變，如圖3-3-3所示。圖3-3-3 添加形狀提示后各幀的變化（3）添加形狀提示的技巧 “形狀提示”可以連續(xù)添加，最多能添加26個(gè)。 按逆時(shí)針順序從形狀的左上角開始放置形狀提示，它們的工作效果最好。 確保“形

11、狀提示”是符合邏輯的。例如，前后關(guān)鍵幀中有2個(gè)三角形，我們使用3個(gè)“形狀提示”，那么2個(gè)三角形中的“形狀提示”順序必須是一致的，而不能第一個(gè)形狀是 abc，而在第二個(gè)形狀是 acb， 形狀提示要在形狀的邊緣才能起作用，在調(diào)整形狀提示位置前，要打開工具欄上【選項(xiàng)】下面的【吸咐開關(guān)】，這樣，會(huì)自動(dòng)把“形狀提示”吸咐到邊緣上，如果你發(fā)覺(jué)“形狀提示”仍然無(wú)效，則可以用工具欄上的放大工具 點(diǎn)擊形狀，放大到2000倍，以確保“形狀提示”位于圖形邊緣上。 另外，要?jiǎng)h除所有的形狀提示，選擇【修改】|【形狀】|【刪除所有提示】。刪除單個(gè)形狀提示，單擊右鍵，在彈出菜單中選擇【刪除提示】。 實(shí)例:添加形狀提示練習(xí)

12、實(shí)例簡(jiǎn)介 上面我們?cè)劦?，為得到流暢自然的形狀變形?dòng)畫，可以添加形狀提示，本例是專為此而設(shè)計(jì)的練習(xí)。請(qǐng)你在光盤的相關(guān)目錄中找到“添加形狀提示練習(xí).swf”文件，如圖3-3-15所示。這2個(gè)同樣是“形狀變形”，其中右邊的變形用了變形“參考點(diǎn)”，從中，我們可以看出變形效果有明顯的差異。圖3-3-15 添加形狀提示實(shí)例界面知識(shí)提要 添加形狀提示 創(chuàng)建形狀補(bǔ)間動(dòng)畫 1、 創(chuàng)建新文檔執(zhí)行【文件】|【新建】命令新建一個(gè)影片文檔，設(shè)置舞臺(tái)尺寸為300*200象素，【背景色】為藍(lán)色#0000FF。2、 創(chuàng)建變形對(duì)象。我們要在場(chǎng)景中寫二個(gè)數(shù)字“1”，讓它們同時(shí)變形，一個(gè)加形狀提示，一個(gè)不加形狀提示，看看這二個(gè)變形有什么不同。先在圖層一的場(chǎng)景左邊中寫入數(shù)字“1”，【屬性】面板上設(shè)置【文本格式】為靜態(tài)文本、【字體】為隸書、【字號(hào)】100、【顏色】白色。再建一個(gè)圖層二，在場(chǎng)景右邊寫入數(shù)字“1”，參數(shù)同上，此層是添加形狀提示層。然后在二層各40幀的地方加關(guān)鍵幀，各寫入數(shù)字“2”,在第60幀處加普通幀，使變形后的文字稍做停留。3、 把字符轉(zhuǎn)為形狀逐一選取各層數(shù)字的第1、40幀，執(zhí)行【修改】|【分散】命令，把數(shù)字打散轉(zhuǎn)為形狀。4、 創(chuàng)建補(bǔ)間動(dòng)畫在圖層一、二的第一幀處各自建立形狀補(bǔ)間動(dòng)畫。5、 添加形狀提示 在圖層二的第一幀處，執(zhí)行【修改】|【形狀】|【添