第7課 動(dòng)作補(bǔ)間動(dòng)畫
動(dòng)作補(bǔ)間動(dòng)畫也是Flash中非常重要的表現(xiàn)手段之一，與“形狀補(bǔ)間動(dòng)畫”不同的是，動(dòng)作補(bǔ)間動(dòng)畫的對(duì)象必需是“元件”或“群組對(duì)象”。
運(yùn)用動(dòng)作補(bǔ)間動(dòng)畫，你可以設(shè)置元件的大小、位置、顏色、透明度、旋轉(zhuǎn)等種種屬性，充分利用動(dòng)作補(bǔ)間動(dòng)畫這些特性，可以制作出令人眼花繚亂的動(dòng)畫效果。
學(xué)習(xí)目的
本節(jié)你將學(xué)會(huì)以下知識(shí)：
u 動(dòng)作補(bǔ)間動(dòng)畫的制作方法
u 網(wǎng)站Banner的制作方法
u “文本工具”的使用方法
u 制作文字變色效果
u 制作文字大小縮放效果
u 制作文字改變透明度效果
課前熱身
當(dāng)你訪問一個(gè)網(wǎng)站時(shí)，最先吸引你的可能是網(wǎng)站上方的廣告條吧？這就是Banner,它具有靈活的實(shí)時(shí)性、強(qiáng)烈的交互性與感染力，你可以用它來說明自己網(wǎng)站的特點(diǎn)，提升網(wǎng)站的形象，如果你能用Flash將Banner做成動(dòng)畫的形式，那無疑會(huì)大大增加網(wǎng)站的吸引力。
下面先用動(dòng)作補(bǔ)間動(dòng)畫制作一個(gè)網(wǎng)站Banner實(shí)例，效果如圖3.1所示。
圖3.1 網(wǎng)站Banner
（1）．創(chuàng)建影片文檔
步驟1設(shè)置影片文檔屬性
執(zhí)行【文件】|【新建】命令，在彈出的面板中選擇【常規(guī)】|【Flash文檔】選項(xiàng)后，單擊【確定】按鈕，新建一個(gè)影片文檔。打開【文檔屬性】對(duì)話框，設(shè)置文件大小為520×60像素，【背景色】為白色，如圖3.2所示。
圖3.2 設(shè)置文檔屬性
步驟2設(shè)置背景圖層
執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到舞臺(tái)】命令，將配套光盤中的名為“banner背景.bmp”圖片導(dǎo)入到場(chǎng)景中（文件路徑：配套光盤\ch3\素材\ch3.2\banner背景.bmp），選擇工具箱中的【箭頭工具】和【任意變形工具】調(diào)整圖片的大小和位置。選中第205幀，按F5鍵，添加普通幀，圖片效果如圖3.3所示。
圖3.3 設(shè)置背景
（2）．創(chuàng)建元件
步驟1 創(chuàng)建“電腦動(dòng)畫”元件
執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“電腦動(dòng)畫”。在新元件編輯場(chǎng)景中選擇第一幀，單擊工具箱中的【文字工具】
，在場(chǎng)景中單擊一下，然后在【屬性】面板上設(shè)置文本類型為【靜態(tài)文本】、字體為【隸書】、字體大小為32、顏色值為#FF9900，設(shè)置完后，在場(chǎng)景中輸入“電腦動(dòng)畫”四個(gè)字，如圖3.4所示。
圖3.4 創(chuàng)建“電腦動(dòng)畫元件”
步驟2創(chuàng)建“網(wǎng)頁設(shè)計(jì)”元件
執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“網(wǎng)頁設(shè)計(jì)”。在編輯場(chǎng)景中選擇第一幀，按上面的方法，在場(chǎng)景中輸入“網(wǎng)頁設(shè)計(jì)”四個(gè)字，參數(shù)同上。
步驟3 創(chuàng)建“圖像制作”元件
執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“圖像制作”。在編輯場(chǎng)景中選擇第一幀，按上面的方法，在場(chǎng)景中輸入“圖像制作”四個(gè)字，參數(shù)同上。
步驟4 創(chuàng)建“閃客啟航”元件
執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“閃客啟航”。在編輯場(chǎng)景中選擇第1幀，單擊工具箱上的文字工具
，在【屬性】面板上設(shè)置文本類型為【靜態(tài)文本】、字體為【隸書】、字體大小為50、顏色值為#FF6600,在場(chǎng)景中輸入“閃客沙龍”四個(gè)字，如圖3-4-11所示。
圖3-4-11 創(chuàng)建“閃客啟航”元件
步驟5 創(chuàng)建“語音教學(xué)”
執(zhí)行【插入】|【新建元件】命令，新建一個(gè)圖形元件，名稱為“語音教學(xué)”。在編輯場(chǎng)景中選擇第1幀，單擊工具箱中的【文字工具】
，文字屬性不變,在場(chǎng)景中輸入“語音教學(xué)”四個(gè)字。
（3）創(chuàng)建動(dòng)畫
“電腦動(dòng)畫”、“網(wǎng)頁設(shè)計(jì)”和“圖像制作”三組字體分別從大到小、由近及遠(yuǎn)以漸顯的方式運(yùn)動(dòng)到舞臺(tái)中央停留片刻，再移動(dòng)到舞臺(tái)左邊，字體顏色和大小相應(yīng)改變。然后“閃客啟航”一組字以同樣的方式移動(dòng)到舞臺(tái)中央，突然消失，最后“語音教學(xué)”以旋轉(zhuǎn)的方式移動(dòng)到舞臺(tái)正中，這就是本實(shí)例中文字的動(dòng)畫效果。下面，我們就來實(shí)現(xiàn)這一動(dòng)畫效果。
步驟1 創(chuàng)建“電腦動(dòng)畫”文字效果
單擊時(shí)間軸右上角的【編輯場(chǎng)景】按鈕，選擇【場(chǎng)景1】轉(zhuǎn)換到主場(chǎng)景中。在場(chǎng)景中新建一個(gè)圖層。選擇第1幀，把庫里的“電腦動(dòng)畫”元件拖到場(chǎng)景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為260.0，【H】值為45.0,【X】值為58.0，【Y】值為48.0,【Alpha】值為3%，然后在第20幀處添加關(guān)鍵幀，在場(chǎng)景中選中文字，在【屬性】面板中，設(shè)置【W(wǎng)】值為141,【H】值為36，【X】值為127，【Y】值為12,選擇【顏色】為【無】。
圖3-4-12是“電腦動(dòng)畫”元件在【屬性】面板中的第1、20幀處的位置參數(shù)。
(a)第1幀屬性 （b）第20幀屬性
圖3-4-12 “電腦動(dòng)畫”屬性設(shè)置
在第28幀處添加關(guān)鍵幀，不改參數(shù)，這是為了給該文字對(duì)象一個(gè)停頓，讓別人能看清楚。
在第48幀處添加關(guān)鍵幀，在【屬性】面板上，設(shè)置【W(wǎng)】值為75，【H】值為12,【X】值為12，【Y】值為9，選擇【顏色】為【色調(diào)】、黑色，如圖3-4-13所示。
圖3-4-13 設(shè)置第48幀上實(shí)例的屬性
分別用鼠標(biāo)右鍵單擊第1幀和第28幀，在彈出的菜單中選擇【創(chuàng)建補(bǔ)間動(dòng)畫】。
步驟2 創(chuàng)建“網(wǎng)頁設(shè)計(jì)”文字效果
在場(chǎng)景中新建一個(gè)圖層。在此圖層的第49幀處添加關(guān)鍵幀，把庫里的“網(wǎng)頁設(shè)計(jì)”元件拖到場(chǎng)景中，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為300，【H】值為83，【X】值為43，【Y】值為20，【Alpha】值為6%。然后在第71幀處添加關(guān)鍵幀，在場(chǎng)景中選中文字，在【屬性】面板中設(shè)置【W(wǎng)】值為135,【H】值為36，【X】值為131，【Y】值為11,選擇【顏色】為【無】，如圖3-4-14所示。
圖3-4-14 在第49、71幀中的“網(wǎng)頁設(shè)計(jì)”
再在第78幀處添加關(guān)鍵幀，不改參數(shù)，在第97幀處添加關(guān)鍵幀，在【屬性】面板上，設(shè)置【W(wǎng)】值為81，【H】值為22,【X】值為18,【Y】值為20，選擇【顏色】為【色調(diào)】、黑色。最后在第49和第78幀處分別建立動(dòng)作補(bǔ)間動(dòng)畫，在第205幀添加普通幀，效果如圖3-4-15。
圖3-4-15 創(chuàng)建補(bǔ)間后的時(shí)間軸結(jié)構(gòu)及實(shí)例在第78幀的效果
步驟3 創(chuàng)建“圖像制作”文字效果
在場(chǎng)景中新建一個(gè)圖層。先在第98幀處添加關(guān)鍵幀，把庫里的“圖像制作”元件拖到場(chǎng)景的外面，在【屬性】面板上設(shè)置元件的【W(wǎng)】值為360，【H】值為90,【X】值20,【Y】值23，【Alpha】值為5％,然后在第119幀處添加關(guān)鍵幀，在場(chǎng)景中選中文字，在【屬性】面板中，設(shè)置【W(wǎng)】值為144,【H】值為36，【X】值128,【Y】值10，【顏色】選項(xiàng)為【無】,再在第126幀處添加關(guān)鍵幀，不改參數(shù)，在第146幀加關(guān)鍵幀，在【屬性】面板中，設(shè)置【W(wǎng)】值為86，【H】值為22,【X】值為27,【Y】值為35，選擇【顏色】為【色調(diào)】、黑色，最后在第98和第126幀處分別建立動(dòng)作補(bǔ)間動(dòng)畫，在第205幀添加普通幀，如圖3-4-16所示。
圖3-4-16 “圖像制作”元件在第126、146幀的位置
步驟4 創(chuàng)建“閃客啟航”文字效果
在場(chǎng)景中新建一個(gè)圖層。先在第147幀處添加關(guān)鍵幀，把庫里的“閃客啟航”元件拖到場(chǎng)景中，在【屬性】面板中，設(shè)置元件的【W(wǎng)】值為487，【H】值為124,【X】值為-28，【Y】值-144，【Alpha】值為3%，然后在第166幀處添加關(guān)鍵幀，在場(chǎng)景中選中文字，在【屬性】面板中，設(shè)置【W(wǎng)】值為212,【H】值為54，【X】值123,【Y】值5，選擇【顏色】為【無】。最后在第147幀處建立動(dòng)作補(bǔ)間動(dòng)畫，在第174幀插入空白關(guān)鍵幀。
步驟5 創(chuàng)建“語音教學(xué)”文字效果
在場(chǎng)景中新建一個(gè)圖層。先在第174幀處添加關(guān)鍵幀，把庫里的“語音教學(xué)”元件拖到場(chǎng)景中，在【屬性】面板上，設(shè)置【W(wǎng)】值為450，【H】值為115,【X】值-20,【Y】值29，【Alpha】值為3%。然后在第194幀處添加關(guān)鍵幀，在場(chǎng)景中選中文字，在【屬性】面板中，設(shè)置【W(wǎng)】值為210,【H】值為54，【X】值為123,【Y】值為3，選擇【顏色】為【無】。最后在第174幀處建立補(bǔ)間動(dòng)畫，順時(shí)鐘旋轉(zhuǎn)一圈，如圖3-4-17所示。
圖3-4-17 “語音教學(xué)”元件在第174幀的【屬性】面板參數(shù)
完成后的部分時(shí)間線情況如圖3-4-18所示。
圖3-4-18 【時(shí)間幀】面板上的各層
在實(shí)際制作中，本例中各圖形元件的大小、位置均不必拘束于書中的數(shù)值，你可自行調(diào)整至滿意為止。
課堂講解
1．動(dòng)作補(bǔ)間動(dòng)畫的概念
（1）動(dòng)作補(bǔ)間動(dòng)畫的概念
在一個(gè)關(guān)鍵幀上放置一個(gè)元件，然后在另一個(gè)關(guān)鍵幀改變這個(gè)元件的大小、顏色、位置、透明度等，F(xiàn)lash 根據(jù)二者之間的幀的值創(chuàng)建的動(dòng)畫被稱為動(dòng)作補(bǔ)間動(dòng)畫。
（2）構(gòu)成動(dòng)作補(bǔ)間動(dòng)畫的元素
構(gòu)成動(dòng)作補(bǔ)間動(dòng)畫的元素是元件，包括影片剪輯、圖形元件、按鈕、文字、位圖、組合等等，但不能是形狀，只有把形狀“組合”或者轉(zhuǎn)換成“元件”后才可以做“動(dòng)作補(bǔ)間動(dòng)畫”。
（3）動(dòng)作補(bǔ)間動(dòng)畫在時(shí)間幀面板上的表現(xiàn)
動(dòng)作補(bǔ)間動(dòng)畫建立后，時(shí)間幀面板的背景色變?yōu)榈仙?，在起始幀和結(jié)束幀之間有一個(gè)長(zhǎng)長(zhǎng)的箭頭，如圖3-4-1所示。
圖3-4-1 動(dòng)作補(bǔ)間動(dòng)畫在時(shí)間幀上的表現(xiàn)
（4）形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫的區(qū)別
形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫都屬于補(bǔ)間動(dòng)畫。前后都各有一個(gè)起始幀和結(jié)束幀，二者之間的區(qū)別如下表所示。
區(qū)別之處
動(dòng)作補(bǔ)間動(dòng)畫
形狀補(bǔ)間動(dòng)畫
在時(shí)間軸上的表現(xiàn)
淡紫色背景加長(zhǎng)箭頭
淡綠色背景加長(zhǎng)箭頭
組成元素
影片剪輯、圖形元件、按鈕、文字、位圖等
形狀，如果使用圖形元件、按鈕、文字，則必先打散再變形。
完成的作用
實(shí)現(xiàn)一個(gè)元件的大小、位置、顏色、透明等的變化。
實(shí)現(xiàn)二個(gè)形狀之間的變化，或一個(gè)形狀的大小、位置、顏色等的變化。
（5）創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫的方法
在時(shí)間軸面板上動(dòng)畫開始播放的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置一個(gè)元件，一幀中只能放一個(gè)項(xiàng)目，在動(dòng)畫要結(jié)束的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置該元件的屬性，再單擊開始幀，在【屬性】面板上單擊【補(bǔ)間】旁邊的“小三角”，在彈出的菜單中選擇【動(dòng)作】，或單擊右鍵，在彈出的菜單中選擇【創(chuàng)建補(bǔ)間動(dòng)畫】，就建立了“動(dòng)作補(bǔ)間動(dòng)畫”。
2．認(rèn)識(shí)動(dòng)作補(bǔ)間動(dòng)畫的屬性面板
在時(shí)間線“動(dòng)作補(bǔ)間動(dòng)畫”的起始幀上單擊，幀屬性面板會(huì)變成如圖3-4-2所示。
圖3-4-2動(dòng)作補(bǔ)間動(dòng)畫屬性面板
（1）【簡(jiǎn)易】選項(xiàng)
用鼠標(biāo)單擊【簡(jiǎn)易】右邊的
按鈕，彈出拉動(dòng)滑桿，拖動(dòng)上面的滑塊，可設(shè)置參數(shù)值，當(dāng)然也可以直接在文本框中輸入具體的數(shù)值，設(shè)置完后，補(bǔ)間動(dòng)作動(dòng)畫效果會(huì)以下面的設(shè)置作出相應(yīng)的變化：
u 在-1到 -100 的負(fù)值之間，動(dòng)畫運(yùn)動(dòng)的速度從慢到快，朝運(yùn)動(dòng)結(jié)束的方向加速補(bǔ)間。
u 在1 到 100 的正值之間，動(dòng)畫運(yùn)動(dòng)的速度從快到慢，朝運(yùn)動(dòng)結(jié)束的方向減慢補(bǔ)間。
u 默認(rèn)情況下，補(bǔ)間幀之間的變化速率是不變的。
（2）【旋轉(zhuǎn)】選項(xiàng)
有四個(gè)選擇，選擇【無】（默認(rèn)設(shè)置）可禁止元件旋轉(zhuǎn)；選擇【自動(dòng)】可使元件在需要最小動(dòng)作的方向上旋轉(zhuǎn)對(duì)象一次；選擇【順時(shí)針】(CW) 或【逆時(shí)針】(CCW) ，并在后面輸入數(shù)字，可使元件在運(yùn)動(dòng)時(shí)順時(shí)針或逆時(shí)針旋轉(zhuǎn)相應(yīng)的圈數(shù)。
（3）【調(diào)整到路徑】
將補(bǔ)間元素的基線調(diào)整到運(yùn)動(dòng)路徑，此項(xiàng)功能主要用于引導(dǎo)線運(yùn)動(dòng)，我們?cè)谙乱还?jié)中會(huì)介紹此功能。
（4）【同步】復(fù)選框
使圖形元件實(shí)例的動(dòng)畫和主時(shí)間軸同步。
（5）【對(duì)齊】選項(xiàng)
可以根據(jù)其注冊(cè)點(diǎn)將補(bǔ)間元素附加到運(yùn)動(dòng)路徑，此項(xiàng)功能主要也用于引導(dǎo)線運(yùn)動(dòng)。
