第六課 動作補間動畫
    動作補間動畫也是Flash中非常重要的表現(xiàn)手段之一，與“形狀補間動畫”不同的是，動作補間動畫的對象必需是“元件”或“成組對象”。

運用動作補間動畫，您可以設(shè)置元件的大小、位置、顏色、透明度、旋轉(zhuǎn)等種種屬性，配合別的手法，您甚至能做出令人稱奇的仿3D的效果來。本實例詳細講解了動作補間動畫的特點及創(chuàng)建方法，并分析了動作補間動畫和形狀補間動畫的區(qū)別，我們精心設(shè)計的一個實例將帶您進一步加深對動作補間動畫的了解。

1．動作補間動畫的概念

（1）動作補間動畫的概念

在Flash的時間幀面板上，在一個時間點（關(guān)鍵幀）放置一個元件，然后在另一個時間點（關(guān)鍵幀）改變這個元件的大小、顏色、位置、透明度等等，F(xiàn)lash 根據(jù)二者之間的幀的值創(chuàng)建的動畫被稱為動作變形動畫。

（2）構(gòu)成動作補間動畫的元素

構(gòu)成動作補間動畫的元素是元件，包括影片剪輯、圖形元件、按鈕等等，除了元件,其他元素包括文本都不能創(chuàng)建補間動畫的,其他的位圖、文本等等都必須要轉(zhuǎn)換成元件才行，只有把形狀“組合”或者轉(zhuǎn)換成“元件”后才可以做“動作補間動畫”。

（3）動作補間動畫在時間幀面板上的表現(xiàn)

動作補間動畫建立后，時間幀面板的背景色變?yōu)榈仙?，在起始幀和結(jié)束幀之間有一個長長的箭頭，如圖3-4-1所示。

 

圖3-4-1 動作補間動畫在時間幀上的表現(xiàn)

 

（4）形狀補間動畫和動作補間動畫的區(qū)別

形狀補間動畫和動作補間動畫都屬于補間動畫。前后都各有一個起始幀和結(jié)束幀，二者之間的區(qū)別如下表所示。

區(qū)別之處	動作補間動畫	形狀補間動畫
在時間軸上的表現(xiàn)	淡紫色背景加長箭頭	淡綠色背景加長箭頭
組成元素	影片剪輯、圖形元件、按鈕	形狀，如果使用圖形元件、按鈕、文字，則必先打散再變形。
完成的作用	實現(xiàn)一個元件的大小、位置、顏色、透明等的變化。	實現(xiàn)二個形狀之間的變化，或一個形狀的大小、位置、顏色等的變化。

 

 

5）創(chuàng)建動作補間動畫的方法

在時間軸面板上動畫開始播放的地方創(chuàng)建或選擇一個關(guān)鍵幀并設(shè)置一個元件，一幀中只能放一個項目，在動畫要結(jié)束的地方創(chuàng)建或選擇一個關(guān)鍵幀并設(shè)置該元件的屬性，再單擊開始幀，在【屬性面板】上單擊【補間】旁邊的“小三角”，在彈出的菜單中選擇【動作】，或單擊右鍵，在彈出的菜單中選擇【新建補間動畫】，就建立了“動作補間動畫”。

2．認識動作補間動畫的屬性面板

在時間線“動作補間動畫”的起始幀上單擊，幀屬性面板會變成如圖3-4-2所示。

 

圖3-4-2動作補間動畫屬性面板

 

（1）“簡單”選項

在“0”邊有個滑動拉桿按鈕

 ，單擊后上下拉動滑桿或填入具體的數(shù)值，補間動作動畫效果會以下面的設(shè)置作出相應(yīng)的變化：

1. 在1到 -100 的負值之間，動畫運動的速度從慢到快，朝運動結(jié)束的方向加速補間。
2. 在1 到 100 的正值之間，動畫運動的速度從快到慢，朝運動結(jié)束的方向減慢補間。
3. 默認情況下，補間幀之間的變化速率是不變的。

（2）“旋轉(zhuǎn)”選項

有四個選擇，選擇“無”（默認設(shè)置）禁止元件旋轉(zhuǎn)；選擇“自動”可以使元件在需要最小動作的方向上旋轉(zhuǎn)對象一次；選擇“順時針”(CW) 或“逆時針”(CCW) ，并在后面輸入數(shù)字，可使元件在運動時順時針或逆時針旋轉(zhuǎn)相應(yīng)的圈數(shù)。

（3）“調(diào)整到路徑”

將補間元素的基線調(diào)整到運動路徑，此項功能主要用于引導(dǎo)線運動，我們在下一節(jié)中要談到此功能。

（4）“同步”復(fù)選框

使圖形元件實例的動畫和主時間軸同步。

（5）“對齊”選項

可以根據(jù)其注冊點將補間元素附加到運動路徑，此項功能主要也用于引導(dǎo)線運動。

實例：網(wǎng)站Banner

實例簡介

當(dāng)您訪問一個網(wǎng)站時，最先吸引您的目光的可能是網(wǎng)站上方的廣告了吧？這就是Banner,它具有靈活的實時性、強烈的交互性與感官性，您可以用它來說明自己網(wǎng)站的特點，提升網(wǎng)站的形象，如果您能用Flash做成動畫的形式，那無疑會大大增加對眼球的吸引力。　

我們來看看“閃客啟航”網(wǎng)站(http://www.flasher123.com/)的Banner，“閃客啟航”這是一個提供免費學(xué)習(xí)Flash及網(wǎng)頁制作等知識的網(wǎng)站，“閃客啟航視頻語音教室”(UC合作專區(qū)-合作免費教學(xué)專區(qū)-閃客啟航)是提供免費語音視頻教學(xué)的網(wǎng)上教室，本例通過動畫手段，使“Banner”較好地顯示了網(wǎng)站的性質(zhì)與特點，播放效果如圖3-4-7所示。

 

圖3-4-7 啟航網(wǎng)站的Banner

 

知識提要

1. 創(chuàng)建文字變色效果
2. 創(chuàng)建文字改變大小效果
3. 創(chuàng)建文字改變透明度效果

 

制作步驟

（1）創(chuàng)建影片文檔

1、 設(shè)置影片文檔屬性

執(zhí)行【文件】|【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文檔】選項后，點擊【確定】按鈕，新建一個影片文檔，在【屬性】面板上設(shè)置文件大小為520*60象素，【背景色】為白色。如圖3-4-8所示。

 

圖3-4-8 啟航Banner文檔屬性

 

2、 設(shè)置背景圖層

執(zhí)行【文件】|【導(dǎo)入到場景】命令，將本實例中名為“啟航banner.bmp”圖片導(dǎo)入到場景中，在第205幀處按F5，加普通幀，如圖3-4-9所示。

 

圖3-4-9 設(shè)置背景

 

（2）創(chuàng)建元件

1、 創(chuàng)建“電腦動畫”元件

執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“電腦動畫”。在“新元件編輯窗口”中選擇第一幀，單擊工具欄上的文字工具

，在場景中點擊一下，然后在【屬性】面板上設(shè)置【文本類型】為靜態(tài)文本、【字體】為隸書、【字體大小】32、【顏色】#FF9900，最后在場景中寫下“電腦動畫”四個字，如圖3-4-10所示。

 

圖3-4-10 創(chuàng)建“電腦動畫元件”

 

2、創(chuàng)建“網(wǎng)頁設(shè)計”元件

執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“網(wǎng)頁設(shè)計”。在編輯窗口選擇第一幀，按上面的方法,在場景中寫下“網(wǎng)頁設(shè)計”四個字，參數(shù)同上。

3、 創(chuàng)建“圖象制作”元件

執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“圖象制作”。在編輯窗口選擇第一幀，按上面的方法，在場景中寫下“圖象制作”四個字，參數(shù)同上。

4、 創(chuàng)建“閃客啟航”元件

執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“閃客啟航”。在編輯窗口選擇第1幀，單擊工具欄上的文字工具

，在【屬性】面板上設(shè)置【文本類型】為靜態(tài)文本、【字體】為隸書、【字體大小】為50、【顏色】為#FF6600,在場景中寫下“閃客沙龍”四個字，如圖3-4-11所示。

 

圖3-4-11 創(chuàng)建“閃客沙龍”元件

5、 創(chuàng)建“語音教學(xué)”

執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“語音教學(xué)”。在編輯窗口選擇第1幀，單擊工具欄上的文字工具

，文字屬性不變,在場景中寫下“語音教學(xué)”四個字。

（3）創(chuàng)建動畫

1、 創(chuàng)建“電腦動畫”文字效果

在場景中新建一個圖層。先在第1幀中，把庫里的“電腦動畫”元件拖到場景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為300，【H】值為76, 【X】值為47，【Y】值為27, 【Alpha】值為3％，然后在第20幀處加關(guān)鍵幀，把“電腦動畫”元件拖到場景的中間，設(shè)置【屬性】面板的【W(wǎng)】值為141,【H】值為36，【X】值為127，【Y】值為12,【顏色】選項為“無”。

圖3-4-12是“電腦動畫”元件在【屬性】面板的第1、20幀處的位置設(shè)置。

 

圖3-4-12 “電腦動畫”屬性設(shè)置

 

在第28幀處加關(guān)鍵幀，不改參數(shù)，這是為了給該文字對象一個停頓，讓別人能看清楚。

在第48幀加關(guān)鍵幀，設(shè)置【屬性】面板上參數(shù)【W(wǎng)】值84，【H】值21,【X】值9, 【Y】值3，【顏色】選色調(diào)，黑色。

在第1和第28幀處分別動建立動作補間動畫，在第205幀添加普通幀使幀內(nèi)容延續(xù)。

2、 創(chuàng)建“網(wǎng)頁設(shè)計”文字效果

在場景中新建一個圖層。在此圖層的第49幀加關(guān)鍵幀，把庫里的“網(wǎng)頁設(shè)計”元件拖到場景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為300，【H】值為83, 【X】值為43，【Y】值為20, 【Alpha】值為6％,然后在第71幀處加關(guān)鍵幀，把“網(wǎng)頁設(shè)計”元件拖到場景的中間，設(shè)置【屬性】面板的【W(wǎng)】值為135,【H】值為36，【X】值為131，【Y】值為11,【顏色】選項為“無”，如圖3-4-13所示。

圖3-4-13 “網(wǎng)頁設(shè)計”元件在第49、71幀的位置

 

再在第78幀處加關(guān)鍵幀，不改參數(shù)，在第97幀加關(guān)鍵幀，設(shè)置【屬性】面板上參數(shù)【W(wǎng)】值81，【H】值22,【X】值18, 【Y】值20，【顏色】選色調(diào)，黑色。最后在第49和第78幀處分別建立動作補間動畫，在第205幀添加普通幀。

3、 創(chuàng)建“圖象制作”文字效果

在場景中新建一個圖層。先在第98幀加關(guān)鍵幀，把庫里的“圖象制作” 元件拖到場景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為360，【H】值為90, 【X】值20, 【Y】值23，【Alpha】值為5％,然后在第119幀處加關(guān)鍵幀，把“圖象制作”元件拖到場景的中間，設(shè)置【屬性】面板的【W(wǎng)】值為144,【H】值為36，【X】值128, 【Y】值10，【顏色】選項為“無”,再在第126幀處加關(guān)鍵幀，不改參數(shù)，在第146幀加關(guān)鍵幀，設(shè)置【屬性】面板上參數(shù)【W(wǎng)】值86，【H】值22, 【X】值27, 【Y】值35，【顏色】選色調(diào)，黑色，最后在第98和第126幀處分別建立動作補間動畫，在第205幀添加普通幀，如圖 3-4-14所示。

 

圖3-4-14 “圖象制作”元件在第126、146幀的位置

 

4、 創(chuàng)建“閃客啟航”文字效果

在場景中新建一個圖層。先在第147幀處加關(guān)鍵幀，把庫里的“閃客啟航”元件拖到場景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為487，【H】值為124, 【X】值-28, 【Y】值-144，【Alpha】值為3％，然后在第166幀處加關(guān)鍵幀，把“閃客啟航”元件拖到場景的中間，設(shè)置【屬性】面板的【W(wǎng)】值為212, 【H】值為54，【X】值123, 【Y】值5，【顏色】選項無。最后在第147幀處建立動作補間動畫，在第173幀添加普通幀。

5、 創(chuàng)建“語音教學(xué)”文字效果

在場景中新建一個圖層。先在第174幀處加關(guān)鍵幀，把庫里的“語音教學(xué)”元件拖到場景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為450，【H】值為115, 【X】值-20, 【Y】值29，【Alpha】值為3％。然后在第194幀處加關(guān)鍵幀，把“語音教學(xué)”元件拖到場景的中間，設(shè)置【屬性】面板的【W(wǎng)】值為210,【H】值為54，【X】值123, 【Y】值3，【顏色】選項無。最后在第174幀處動作建立補間動畫，順時鐘旋轉(zhuǎn)一圈，在第205幀添加普通幀，如圖3-4-15所示。

 

圖3-4-15 “語音教學(xué)”元件在第174幀的【屬性】面板參數(shù)

 

完成后的部分時間線情況如圖3-4-16所示。

 

圖3-4-16 時間幀面板上的各層

 

在實際制作中，本例中各圖形元件的大小、位置均不必拘束于書中所示的數(shù)字，您可自行調(diào)整至滿意為止。