?

?

?

?

?

（ 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)。

?

?

動(dòng)作補(bǔ)間動(dòng)畫(2)

3．實(shí)例1——飛行的飛機(jī)

?

實(shí)例簡(jiǎn)介

?

巍巍群山，茫茫云海，輕煙似的白云緩緩飄過，一架飛機(jī)由近而遠(yuǎn)的飛去，漸漸消失在遠(yuǎn)方，如圖 3-4-3 所示。本例制作不難，但通過它， 你可以掌握創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫的方法。

?

圖 3-4-3 飛機(jī)飛行動(dòng)畫

?

知識(shí)提要

● ???? 創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫

● ???? 制作元件由大變小的效果

● ???? 制作元件透明度變化的效果

?

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

?

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

?

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

?

圖 3-4-4 影片文檔屬性

?

步驟 2 創(chuàng)建背景圖層

?

執(zhí)行【文件】 | 【導(dǎo)入】 | 【導(dǎo)入到舞臺(tái)】命令，山峰 .jpg 的圖片導(dǎo)入到場(chǎng)景中 。 用【箭頭工具】調(diào)整圖片在舞臺(tái)上的位置，使其居于舞臺(tái)的中央。如果圖片大小不合適，再選 擇【任意變形工具】調(diào)整圖片大小。選擇第 100 幀，按 F5 鍵，添加普通幀。

?

?

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

?

步驟 1 創(chuàng)建飛機(jī)元件

?

執(zhí)行【插入】 | 【新建元件】命令，新建一個(gè)圖形元件，名稱為“飛機(jī)”。這時(shí)進(jìn)入新元件編輯場(chǎng)景，選擇第一幀，執(zhí)行 【文件】 | 【導(dǎo) 入】 | 【導(dǎo)入到舞 臺(tái)】命令，將為飛機(jī) .png 圖片導(dǎo)入到場(chǎng)景中 。

?

步驟 2 創(chuàng)建白云元件

?

執(zhí)行【插入】 |【新建元件】命令，新建一個(gè)圖形元件，名稱為 “白云”。這時(shí)進(jìn)入新元件編輯場(chǎng)景，選擇第一幀， 執(zhí)行【文 件】 | 【導(dǎo)入】 | 【導(dǎo)入到舞臺(tái)】命令，將名為“白云 .png ”的圖片導(dǎo)入到場(chǎng)景中 。

?

?

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

?

步驟 1 創(chuàng)建飛行效果

?

單擊時(shí)間軸右上角的 【編 輯場(chǎng)景】按鈕，選擇【場(chǎng)景 1 】，轉(zhuǎn)換到主場(chǎng)景中。 新建一層，把庫(kù)里名為“飛機(jī)”的元件拖到 場(chǎng)景的左側(cè)，執(zhí)行【修改 】 | 【變形 】 | 【水平翻轉(zhuǎn) 】命令 ，將飛機(jī)元件實(shí)例水平翻轉(zhuǎn)。在【屬性】面板上打開【顏色】旁邊的小三角，設(shè)置【 Alpha】值為80%，如圖3-3-5所示。

?

圖 3-3-5 第一幀中飛機(jī)在場(chǎng)景中的位置和Alpha值 ?

?

飛機(jī)向遠(yuǎn)處飛去，應(yīng)該越來越小，越來越模糊，來看看這種效果是什么做出來的吧，選中【圖層 2】的第100幀，按F6鍵，添加一個(gè)關(guān)鍵幀，在【屬性】面板中設(shè)置飛機(jī)的大小，【W(wǎng)】值是飛機(jī)的寬值，為32；【H】值是 飛機(jī)的高值，為18.9；【X】、【Y】則是飛機(jī)在場(chǎng)景中的X、Y坐標(biāo)，分別是628.5,51，如圖3-4-6所示。

?

圖 3-4-6 飛機(jī)在100幀處的位置和大小 ?

?

在【屬性】面板上，設(shè)置【 Alpha】值為20%。

?

用鼠標(biāo)右鍵單擊【圖層 2】的第一幀，選擇【創(chuàng)建補(bǔ)間動(dòng)畫】。

步驟 2創(chuàng)建白云飄過的效果

?

新建一層，從庫(kù)中拖出名為“白云”的元件，放置在背景圖右側(cè)的山峰處，設(shè)置【 Alpha】值為80%，在第100幀處添加關(guān)鍵幀，把元件移到場(chǎng)景的左上方，設(shè)置【Alpha】值為40%。

?

用鼠標(biāo)右鍵單擊圖層的第一幀，選擇【創(chuàng)建補(bǔ)間動(dòng)畫】。

?

執(zhí)行【控制】 |【測(cè)試影片】命令，觀察動(dòng)畫效果，如果滿意， 執(zhí)行【文件】|【保存】命令，將文件保存成“飛機(jī).fla”，如果要導(dǎo)出Flash的播放文件，執(zhí)行【文件】|【導(dǎo)出】|【導(dǎo)出影片】命令，保存成“飛 機(jī).swf”文件。

?

?

動(dòng)作補(bǔ)間動(dòng)畫(3)

?

3． 動(dòng)作補(bǔ)間動(dòng)畫應(yīng)用——網(wǎng)站Banner

?

在第一章 中，我們已經(jīng)學(xué)習(xí)了一個(gè)簡(jiǎn)單動(dòng)作補(bǔ)間動(dòng)畫的制作全過程，這里來學(xué)習(xí)一個(gè)比較綜合的案例應(yīng)用。

?

實(shí)例簡(jiǎn)介

?

當(dāng)你訪問一個(gè)網(wǎng)站時(shí)，最先吸引你的可能是網(wǎng)站上方的廣告條吧？這就是 Banner,它具有 靈活的實(shí)時(shí)性、強(qiáng)烈的交互性與感官性， 你可以用它來說明自己網(wǎng)站的特點(diǎn)，提升網(wǎng)站的形象，如果你能用 Flash做成動(dòng)畫的形式，那無疑會(huì)大大 增加吸引力。

?

我們來看看網(wǎng)站 的Banner， 播放效果如圖3-4-7所示。

?

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

?

知識(shí)提要

?

● ???? 創(chuàng)建文字變色效果

● ???? 創(chuàng)建文字改變大小效果

● ???? 創(chuàng)建文字改變透明度效果

?

制作步驟

?

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

?

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

?

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

?

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

?

步驟 2 設(shè)置背景圖層

?

執(zhí)行【文件】 | 【導(dǎo)入】 | 【導(dǎo)入到舞臺(tái)】命令，將名為“啟航 banner.bmp ”圖片導(dǎo)入到場(chǎng)景中 ，選擇工具箱中的 【選擇工具】和【任意變形工具】調(diào)整圖片的大小和位置。 選中第 205 幀，按 F5 鍵，添加普通幀，如圖 3-4-9 所 示。

?

圖 3-4-9 設(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-10所示。

?

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

?

動(dòng)作補(bǔ)間動(dòng)畫(4)

?

步驟 2 創(chuàng)建“網(wǎng)頁(yè)設(shè)計(jì)”元件

?

執(zhí)行【插入】 | 【新建元件】命令，新建一個(gè)圖形元件，名稱為“網(wǎng)頁(yè)設(shè)計(jì)”。在編輯場(chǎng)景中選擇第一幀，按上面的方法， 在場(chǎng)景中輸入“網(wǎng)頁(yè)設(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)建“語(yǔ)音教學(xué)”

?

執(zhí)行【插入】 |【新建元件】命令，新建一個(gè)圖形元件，名稱為 “語(yǔ)音教學(xué)”。在編輯場(chǎng)景中選擇第1幀，單擊工具箱中的【文字工具】 ，文字屬性不變,在場(chǎng)景中輸入“語(yǔ)音教學(xué)”四個(gè)字。

?

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

?

??? “電腦動(dòng)畫”、“網(wǎng)頁(yè)設(shè)計(jì)”和“圖像制作”三組字體分別從大到小、由近及遠(yuǎn)以漸顯的方式運(yùn)動(dòng)到舞臺(tái)中央停留片刻，再移動(dòng)到舞臺(tái)左邊，字體顏色和大小相應(yīng)改 變。然后“閃客啟航”一組字以同樣的方式移動(dòng)到舞臺(tái)中央，突然消失，最后“語(yǔ)音教學(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幀，把庫(kù)里的“電腦動(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)頁(yè)設(shè)計(jì)”文字效果

?

在場(chǎng)景中新建一個(gè)圖層。在此圖層的第 49幀處添加關(guān)鍵幀，把 庫(kù)里的“網(wǎng)頁(yè)設(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)頁(yè)設(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幀的效果

?

?

動(dòng)作補(bǔ)間動(dòng)畫(5)

?

步驟 3 創(chuàng)建“圖像制作”文字效果

?

在場(chǎng)景中新建一個(gè)圖層。先在第 98幀處添加關(guān)鍵幀，把庫(kù)里的 “圖像制作”元件拖到場(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)鍵幀，把庫(kù)里 的“閃客啟航”元件拖到場(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)建“語(yǔ)音教學(xué)”文字效果

?

在場(chǎng)景中新建一個(gè)圖層。先在第 174幀處添加關(guān)鍵幀，把庫(kù)里 的“語(yǔ)音教學(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 “語(yǔ)音教學(xué)”元件在第174幀的【屬性】面板參數(shù) ?

?

完成后的部分時(shí)間線情況如圖 3-4-18所示。 ?

?

圖 3-4-18 【時(shí)間幀】面板上的各層 ?

?

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

?

課堂實(shí)例：

搖擺的蠟燭光

迎奧運(yùn)的banner

?

?

?

動(dòng)作補(bǔ)間動(dòng)畫