?
動作補間動畫也是 Flash 中非常重要的表現手段之一，與“形狀補間動畫”不同的是，動作補間動畫的對象必需是“元件”或“成 組對象”。
?
運用動作補間動畫，你可以設置元件的大小、位置、顏色、透明度、旋轉等種種屬性，配合別的手法，你甚 至能做出令人稱奇的仿 3D 的效果來。本節詳細講解了動作補間動畫的特點及創建方法，并分析了動作補間動畫和形狀補間動畫的區別，精心設計的兩個實例將帶你進一步加深對動 作補間動畫的了解。
?
1 ．動作補 間動畫的概念
（ 1 ）動作補間動畫的概念
?
在一個關鍵幀上放置一個元件，然后在另一個關鍵幀改變這個元件的大小、顏色、位置、透明度等， Flash 根據二者之間的幀的值創建的動畫被稱為動作補間動畫。
?
（ 2）構成動作補間動畫的元素
?
構成動作補間動畫的元素是元件，包括影片剪輯、圖形元件、按鈕、文字、位圖、組合等等，但不能是形 狀，只有把形狀“組合”或者轉換成“元件”后才可以做“動作補間動畫”。
?
（ 3）動作補間動畫在時間幀面板上的表現
?
動作補間動畫建立后，時間幀面板的背景色變為淡紫色，在起始幀和結束幀之 間有一個長長的箭頭，如圖 3-4-1所示。
?
圖 3-4-1 動作補間動畫在時間幀上的表現 ?
?
（ 4）形狀補間動畫和動作補間動畫的區別
?
形狀補間動畫和動作補間動畫都屬于補間動畫。前后都各有一個起始幀和結束 幀，二者之間的區別如下表所示。
?
|
區別之處 |
動作補間動畫 |
形狀補間動畫 |
|
在時間軸上的表現 |
淡紫色背景加長箭頭 |
淡綠色背景加長箭頭 |
|
組成元素 |
影片剪輯、圖形元件、按鈕、文字、位圖等 |
形狀，如果使用圖形元件、按鈕、文字，則必先打散 再變形。 |
|
完成的作用 |
實現一個元件的大小、位置、顏色、透明等的變化。 |
實現二個形狀之間的變化，或一個形狀的大小、位 置、顏色等的變化。 |
?
?
?
?
?
?
?
?
?
（ 5）創建動作補間動畫的方 法
?
在時間軸面板上 動畫 開始播放的地方創建或選擇一個關鍵幀并設置一個元件，一幀中只能放一個項目，在動畫要結束的地方創建或選擇一個關鍵幀并設置該元件的屬性，再單擊開始幀， 在【屬性】面板上單擊 【補間】旁邊的“小三角”，在彈出的菜單中選擇【動 作】，或單擊右鍵，在彈出的菜單中選擇【創建補間動畫】，就建立了“動作補間動畫”。
?
2 ．認識動 作補間動畫的屬性面板
?
在時間線“動作補間動畫”的起始幀上單擊，幀屬性面板會變成如圖 3-4-2所示。 ?
?
圖 3-4-2動作補間動畫屬性面板
?
（ 1）【簡易】選項
?
用鼠標單擊【簡易】右邊的 按鈕，彈出拉動滑桿，拖動上面的滑塊，可設置參數值，當然也可以直接在文本框中輸入具體的數值，設置完 后，補間動作動畫效果會以下面的設置作出相應的變化：
?
u ?????? 在 -1 到 -100 的負值之間，動畫運動的速度從慢到快，朝運動結束的方向加速補間。
u ?????? 在 1 到 100 的正值之間，動畫運動的速度從快到慢，朝運動結束的方向減慢補間。
u ?????? 默認情況下，補間幀之間的變化速率是不變的。
?
（ 2 ）【旋轉】選項
?
有四個選擇，選擇【無】（默認設置）可禁止元件旋轉；選擇【自動】可使元件在需要最小動作的方向上旋 轉對象一次；選擇【順時針】 (CW) 或【逆時針】 (CCW) ，并在后面輸入數字，可使元件在運動時順時針或逆時針旋轉相應的圈數。
?
（ 3）【調整到路徑】
?
將補間元素的基線調整到運動路徑，此項功能主要用于引導線運動，我們在下一節中會介紹此功能。
?
（ 4）【 同步】復 選框
?
使圖形元件實例的動畫和主時間軸同步。
?
（ 5）【對齊】選項
?
可以根據其注冊點將補間元素附加到運動路徑，此項功能主要也用于引導線運動。
?
?
3．實例1——飛行的飛機
?
實例簡介
?
巍巍群山，茫茫云海，輕煙似的白云緩緩飄過，一架飛機由近而遠的飛去，漸漸消失在遠方，如圖 3-4-3 所示。本例制作不難，但通過它， 你可以掌握創建動作補間動畫的方法。
?
圖 3-4-3 飛機飛行動畫
?
知識提要
● ???? 創建動作補間動畫
● ???? 制作元件由大變小的效果
● ???? 制作元件透明度變化的效果
?
（ 1）創建影片文檔
?
步驟 1 設置影片文檔屬性
?
執行 【文件】 |【新建】命令，在彈出的面板中選擇【常規】|【Flash文檔】選項后，點擊【確定】按鈕，新建一個影片文檔，在【屬性】 面板上設置文件大小為650×255像素，【背景色】為白色，如圖3-4-4所示。
?
圖 3-4-4 影片文檔屬性
?
步驟 2 創建背景圖層
?
執行【文件】 | 【導入】 | 【導入到舞臺】命令，山峰 .jpg 的圖片導入到場景中 。 用【箭頭工具】調整圖片在舞臺上的位置，使其居于舞臺的中央。如果圖片大小不合適，再選 擇【任意變形工具】調整圖片大小。選擇第 100 幀，按 F5 鍵，添加普通幀。
?
?
（ 2）創建元件
?
步驟 1 創建飛機元件
?
執行【插入】 | 【新建元件】命令，新建一個圖形元件，名稱為“飛機”。這時進入新元件編輯場景，選擇第一幀，執行 【文件】 | 【導 入】 | 【導入到舞 臺】命令，將為飛機 .png 圖片導入到場景中 。
?
步驟 2 創建白云元件
?
執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱為 “白云”。這時進入新元件編輯場景，選擇第一幀， 執行【文 件】 | 【導入】 | 【導入到舞臺】命令，將名為“白云 .png ”的圖片導入到場景中 。
?
?
（ 3 ）創建動畫
?
步驟 1 創建飛行效果
?
單擊時間軸右上角的 【編 輯場景】按鈕，選擇【場景 1 】，轉換到主場景中。 新建一層，把庫里名為“飛機”的元件拖到 場景的左側，執行【修改 】 | 【變形 】 | 【水平翻轉 】命令 ，將飛機元件實例水平翻轉。在【屬性】面板上打開【顏色】旁邊的小三角，設置【 Alpha】值為80%，如圖3-3-5所示。
?
圖 3-3-5 第一幀中飛機在場景中的位置和Alpha值 ?
?
飛機向遠處飛去，應該越來越小，越來越模糊，來看看這種效果是什么做出來的吧，選中【圖層 2】的第100幀，按F6鍵，添加一個關鍵幀，在【屬性】面板中設置飛機的大小，【W】值是飛機的寬值，為32；【H】值是 飛機的高值，為18.9；【X】、【Y】則是飛機在場景中的X、Y坐標，分別是628.5,51，如圖3-4-6所示。
?
圖 3-4-6 飛機在100幀處的位置和大小 ?
?
在【屬性】面板上，設置【 Alpha】值為20%。
?
用鼠標右鍵單擊【圖層 2】的第一幀，選擇【創建補間動畫】。
步驟 2創建白云飄過的效果
?
新建一層，從庫中拖出名為“白云”的元件，放置在背景圖右側的山峰處，設置【 Alpha】值為80%，在第100幀處添加關鍵幀，把元件移到場景的左上方，設置【Alpha】值為40%。
?
用鼠標右鍵單擊圖層的第一幀，選擇【創建補間動畫】。
?
執行【控制】 |【測試影片】命令，觀察動畫效果，如果滿意， 執行【文件】|【保存】命令，將文件保存成“飛機.fla”，如果要導出Flash的播放文件，執行【文件】|【導出】|【導出影片】命令，保存成“飛 機.swf”文件。
?
?
?
3． 動作補間動畫應用——網站Banner
?
在第一章 中，我們已經學習了一個簡單動作補間動畫的制作全過程，這里來學習一個比較綜合的案例應用。
?
實例簡介
?
當你訪問一個網站時，最先吸引你的可能是網站上方的廣告條吧？這就是 Banner,它具有 靈活的實時性、強烈的交互性與感官性， 你可以用它來說明自己網站的特點，提升網站的形象，如果你能用 Flash做成動畫的形式，那無疑會大大 增加吸引力。
?
我們來看看網站 的Banner， 播放效果如圖3-4-7所示。
?
圖 3-4-7 啟航網站的 Banner
?
知識提要
?
● ???? 創建文字變色效果
● ???? 創建文字改變大小效果
● ???? 創建文字改變透明度效果
?
制作步驟
?
（ 1）創建影片文檔
?
步驟 1 設置影片文檔屬性
?
執行 【文件】 |【新建】命令，在彈出的面板中選擇【常規】|【Flash文檔】選項后，單擊【確定】按 鈕，新建一個影片文檔，在【屬性】面板上設置文件大小為520×60像素，【背景色】為白色，如圖3-4-8所示
?
圖 3-4-8 啟航Banner文檔屬性 ?
?
步驟 2 設置背景圖層
?
執行【文件】 | 【導入】 | 【導入到舞臺】命令，將名為“啟航 banner.bmp ”圖片導入到場景中 ，選擇工具箱中的 【選擇工具】和【任意變形工具】調整圖片的大小和位置。 選中第 205 幀，按 F5 鍵，添加普通幀，如圖 3-4-9 所 示。
?
圖 3-4-9 設置背景 ?
?
（ 2 ）創建元件
?
步驟 1 創建“電腦動畫”元件
?
執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱為 “電腦動畫”。在新元件編輯場景中選擇第一幀，單擊工具箱中的【文字工具】 ，在場景中單擊一下，然后在【屬性】面板上設置文本類型為【靜態文本】、字體為【隸書】、字體大小為 32、顏色值為#FF9900，設置完后，在場景中輸入“電腦動畫”四個字，如圖3-4-10所示。
?
圖 3-4-10 創建“電腦動畫元件”
?
?
步驟 2 創建“網頁設計”元件
?
執行【插入】 | 【新建元件】命令，新建一個圖形元件，名稱為“網頁設計”。在編輯場景中選擇第一幀，按上面的方法， 在場景中輸入“網頁設計”四個字，參數同上。
?
步驟 3 創建“圖像制作 ” 元件
?
執行【插入】 | 【新建元件】命令，新建一個圖形元件，名稱為“圖像制作”。在編輯場景中選擇第一幀，按上面的方法， 在場景中輸入“圖像制作”四個字，參數同上。
?
步驟 4 創建“閃客啟航”元件
?
執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱為 “閃客啟航”。在編輯場景中選擇第1幀，單擊工具箱上的文字工具 ，在【屬性】面板上設置文本類型為【靜態文本】、字體為【隸書】、字體大小為50、顏色值 為#FF6600,在場景中輸入“閃客沙龍”四個字，如圖3-4-11所示。 ?
?
圖 3-4-11 創建“閃客啟航”元件 ?
?
步驟 5 創建“語音教學”
?
執行【插入】 |【新建元件】命令，新建一個圖形元件，名稱為 “語音教學”。在編輯場景中選擇第1幀，單擊工具箱中的【文字工具】 ，文字屬性不變,在場景中輸入“語音教學”四個字。
?
（ 3）創建動畫
?
??? “電腦動畫”、“網頁設計”和“圖像制作”三組字體分別從大到小、由近及遠以漸顯的方式運動到舞臺中央停留片刻，再移動到舞臺左邊，字體顏色和大小相應改 變。然后“閃客啟航”一組字以同樣的方式移動到舞臺中央，突然消失，最后“語音教學”以旋轉的方式移動到舞臺正中，這就是本實例中文字的動畫效果。下面， 我們就來實現這一動畫效果。
步驟 1 創建“電腦動畫”文字效果
?
單擊時間軸右上角的 【編 輯場景】按鈕，選擇【場景 1 】轉換到主場景中。 在場景中新建一個圖層。選擇第 1幀，把庫里的“電腦動畫”元件拖到場景的外面，在【屬性】面板上設置元件的【W】值為260.0，【H】值為45.0, 【X】值為58.0，【Y】值為48.0,【Alpha】值為3%，然后在第20幀處添加關鍵幀，在場景中選中文字，在【屬性】面板中，設置【W】值為 141,【H】值為36，【X】值為127，【Y】值為12,選擇【顏色】為【無】。
?
圖 3-4-12是“電腦動畫”元件在【屬性】面板中的第1、 20幀處的位置參數。 ?
?
???????????
(a)第 1幀屬性??????????????? （b）第20幀屬性
圖 3-4-12 “電腦動畫”屬性設置 ?
?
在第 28幀處添加關鍵幀，不改參數，這是為了給該文字對象一 個停頓，讓別人能看清楚。
?
在第 48幀處添加關鍵幀，在【屬性】面板上，設置【W】值為 75，【H】值為12,【X】值為12，【Y】值為9，選擇【顏色】為【色調】、黑色，如圖3-4-13所示。
?
圖 3-4-13 設置第48幀上實例的屬性 ?
?
分別用鼠標右鍵單擊第 1幀和第28幀，在彈出的菜單中選擇 【創建補間動畫】。
?
?
步驟 2 創建“網頁設計”文字效果
?
在場景中新建一個圖層。在此圖層的第 49幀處添加關鍵幀，把 庫里的“網頁設計”元件拖到場景中，在【屬性】面板上設置元件的【W】值為300，【H】值為83，【X】值為43，【Y】值為20，【Alpha】值為 6%。然后在第71幀處添加關鍵幀，在場景中選中文字，在【屬性】面板中設置【W】值為135,【H】值為36，【X】值為131，【Y】值為11,選擇 【顏色】為【無】，如圖3-4-14所示。
?
圖 3-4-14 在第49、71幀中的“網頁設計” ?
?
再在第 78幀處添加關鍵幀，不改參數，在第97幀處添加關鍵 幀，在【屬性】面板上，設置【W】值為81，【H】值為22,【X】值為18,【Y】值為20，選擇【顏色】為【色調】、黑色。最后在第49和第78幀處 分別建立動作補間動畫，在第205幀添加普通幀，效果如圖3-4-15。
?
?
圖 3-4-15? 創建補間后的時間軸結構及實例在第78幀的效果
?
?
?
步驟 3 創建“圖像制作”文字效果
?
在場景中新建一個圖層。先在第 98幀處添加關鍵幀，把庫里的 “圖像制作”元件拖到場景的外面，在【屬性】面板上設置元件的【W】值為360，【H】值為90,【X】值20,【Y】值23，【Alpha】值為5％, 然后在第119幀處添加關鍵幀，在場景中選中文字，在【屬性】面板中，設置【W】值為144,【H】值為36，【X】值128,【Y】值10，【顏色】選 項為【無】,再在第126幀處添加關鍵幀，不改參數，在第146幀加關鍵幀，在【屬性】面板中，設置【W】值為86，【H】值為22,【X】值為27, 【Y】值為35，選擇【顏色】為【色調】、黑色，最后在第98和第126幀處分別建立動作補間動畫，在第205幀添加普通幀，如圖3-4-16所示。 ?
?
?
圖 3-4-16 “圖像制作”元件在第126、146幀的位置 ?
?
步驟 4 創建“閃客啟航”文字效果
?
在場景中新建一個圖層。先在第 147幀處添加關鍵幀，把庫里 的“閃客啟航”元件拖到場景中，在【屬性】面板中，設置元件的【W】值為487，【H】值為124,【X】值為-28，【Y】值-144，【Alpha】 值為3%，然后在第166幀處添加關鍵幀，在場景中選中文字，在【屬性】面板中，設置【W】值為212,【H】值為54，【X】值123,【Y】值5，選 擇【顏色】為【無】。最后在第147幀處建立動作補間動畫，在第174幀插入空白關鍵幀。
?
?
步驟 5 創建“語音教學”文字效果
?
在場景中新建一個圖層。先在第 174幀處添加關鍵幀，把庫里 的“語音教學”元件拖到場景中，在【屬性】面板上，設置【W】值為450，【H】值為115,【X】值-20,【Y】值29，【Alpha】值為3%。然 后在第194幀處添加關鍵幀，在場景中選中文字，在【屬性】面板中，設置【W】值為210,【H】值為54，【X】值為123,【Y】值為3，選擇【顏 色】為【無】。最后在第174幀處建立補間動畫，順時鐘旋轉一圈，如圖3-4-17所示。
?
圖 3-4-17 “語音教學”元件在第174幀的【屬性】面板參數 ?
?
完成后的部分時間線情況如圖 3-4-18所示。 ?
?
圖 3-4-18 【時間幀】面板上的各層 ?
?
在實際制作中，本例中各圖形元件的大小、位置均不必拘束于數值，你可自行調整至滿意為止。
?
課堂實例：
搖擺的蠟燭光
迎奧運的banner
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
