4.1初識(shí)Flash動(dòng)畫

4.2制作Flash動(dòng)畫

習(xí)題4

本節(jié)知識(shí)點(diǎn)

Flash入門動(dòng)畫制作案例

Flash的操作界面

Flash的基本概念

Flash文件的基本操作

Flash動(dòng)畫制作流程4.1初識(shí)Flash動(dòng)畫4.1.1Flash入門動(dòng)畫制作案例

案例：制作“小球運(yùn)動(dòng)”動(dòng)畫

制作如圖4-1所示的“小球運(yùn)動(dòng)”動(dòng)畫。圖4-1“小球運(yùn)動(dòng)”動(dòng)畫

實(shí)戰(zhàn)步驟

(1)新建文檔并設(shè)置文檔屬性。

①啟動(dòng)Flash8，執(zhí)行“文件”→“新建”命令，新建一個(gè)空白文檔。

②執(zhí)行“窗口”→“屬性”命令(快捷鍵為Ctrl+F3)，打開“屬性”面板?！皩傩浴泵姘逦挥谖枧_(tái)的下方，新建文檔以后，用“屬性”面板來指定文檔的舞臺(tái)大小、背景顏色、幀頻(默認(rèn)12fps，即每秒播放12幀)以及文檔的發(fā)布設(shè)置等參數(shù)，如圖4-2所示。圖4-2“屬性”面板③單擊“屬性”面板上“大小”右邊的控件按鈕，彈出設(shè)置“文檔屬性”對(duì)話框，設(shè)置文檔寬為300px(像素)，高為300px(像素)，背景顏色為#00CCFF，如圖4-3所示。

(2)創(chuàng)建和編輯圖形元件。

①執(zhí)行“插入”→“新建元件”命令(快捷鍵為Ctrl+F8)，創(chuàng)建名稱為“小球”的圖形元件，如圖4-4所示。圖4-3“文檔屬性“對(duì)話框圖4-4創(chuàng)建小球元件的設(shè)置②創(chuàng)建元件完成以后，編輯動(dòng)畫的“舞臺(tái)”從“場(chǎng)景1”切換到“小球”圖形元件的編輯狀態(tài)。

③選擇“工具”面板上的“橢圓工具”，在“屬性”面板上設(shè)置筆觸顏色為“沒有顏色”，設(shè)置填充顏色為藍(lán)色(#0000FF)。移動(dòng)鼠標(biāo)到舞臺(tái)的中間，按住鍵盤上的Shift鍵的同時(shí)按住鼠標(biāo)左鍵拖動(dòng)，繪制出一個(gè)任意大小的正圓，如圖4-5所示。圖4-5繪制出的小球④選中繪制的“圓形”，執(zhí)行“窗口”→“設(shè)計(jì)面板”→“混色器”命令(快捷鍵為Shift+F9)，打開“混色器”面板。選擇“放射狀”漸變填充，將左邊的色塊設(shè)為淺紫色(#DCCAF9)，右邊選擇深紫色(#5A1DEB)，如圖4-6所示。完成漸變填充后的“圓形”有了立體感，但是不符合光源的照射規(guī)律。圖4-6設(shè)置漸變填充效果⑤選擇“工具”面板上的“填充變形工具”，移動(dòng)鼠標(biāo)到舞臺(tái)上并單擊“圓形”，“圓形”的中間和周圍出現(xiàn)四個(gè)“填充變形控制點(diǎn)”，移動(dòng)鼠標(biāo)到“圓形”中間的“填充變形控制點(diǎn)”上后按住鼠標(biāo)左鍵向左上方拖動(dòng)，將“高光區(qū)”拖放到“圓形”的左上方，如圖4-7所示，使其看起來更接近自然界中的球體。調(diào)整后的效果如圖4-8所示。圖4-7移動(dòng)填充變形控制點(diǎn)圖4-8調(diào)整后的效果

(3)制作動(dòng)畫。

在“小球”圖層的第1幀到第20幀之間出現(xiàn)了一條淡紫色背景的帶黑色箭頭的實(shí)線。這樣就實(shí)現(xiàn)了第1幀到第20幀的“動(dòng)作”補(bǔ)間動(dòng)畫。用同樣的方法，再實(shí)現(xiàn)第20幀到40幀之間的動(dòng)畫，使小球再回到原來的位置。完成后的時(shí)間軸如圖4-9所示。圖4-9定義補(bǔ)間動(dòng)畫的時(shí)間軸

(4)給動(dòng)畫添加背景。

①單擊“時(shí)間軸”左邊“圖層名稱”底部的“插入圖層”按鈕，新建“圖層2”，選中該圖層，按住鼠標(biāo)左鍵將其拖動(dòng)到“小球”圖層的下面，重命名為“背景”,如圖4-10所示。

②選中“背景”圖層的第1幀，執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到舞臺(tái)”命令(快捷鍵為Ctrl+R)，彈出“導(dǎo)入”對(duì)話框，在“導(dǎo)入”對(duì)話框中選擇要導(dǎo)入的圖片文件“背景.jpg”，如圖4-11所示。圖4-10重命名圖層圖4-11“導(dǎo)入”對(duì)話框③單擊“打開”按鈕，將“背景.jpg”導(dǎo)入到舞臺(tái)上。選中背景圖像，在“屬性”面板上設(shè)置圖像寬和高各為“300”，坐標(biāo)X和Y值都為“0”，如圖4-12所示，使背景圖像與舞臺(tái)完全重合。

(5)保存和測(cè)試動(dòng)畫。

①執(zhí)行“文件”→“保存”命令(快捷鍵為Ctrl+S)，彈出“另存為”對(duì)話框，指定文件保存的路徑，輸入文件名“小球運(yùn)動(dòng)”，保存類型為“Flash8文檔(*.fla)”，如圖4-13所示。圖4-12圖像屬性設(shè)置圖4-13“另存為”對(duì)話框4.1.2Flash的操作界面

單擊“開始”按鈕，在開始菜單中依次選擇“程序”→“Macromedia”→“MacromediaFlash8”，啟動(dòng)Flash8程序。

Flash8的工作界面由標(biāo)題欄、菜單欄、時(shí)間軸、場(chǎng)景舞臺(tái)、工具箱、“屬性”面板以及各種其他面板組成，如圖4-14所示。圖4-14Flash8的工作界面

1．標(biāo)題欄

2．菜單欄

3．時(shí)間軸

4．舞臺(tái)和工作區(qū)

5．工具箱

窗口左側(cè)是功能強(qiáng)大的工具箱，它是Flash中最常用到的一個(gè)面板，提供了繪制和編輯圖形的所有工具。工具箱由“工具”、“查看”、“顏色”和“選項(xiàng)”四個(gè)區(qū)域組成。其中常見工具按鈕的功能見表4-1。表4-1Flash8工具箱中的工具按鈕

6．“屬性”面板

“屬性”面板默認(rèn)位于編輯窗口的下方。使用“屬性”面板可以很容易地設(shè)置舞臺(tái)或時(shí)間軸上當(dāng)前選定對(duì)象的最常用屬性，從而加快Flash文檔的創(chuàng)建過程。當(dāng)選定的對(duì)象不同時(shí)，“屬性”面板中會(huì)出現(xiàn)不同的設(shè)置參數(shù)，圖4-15是矩形工具的“屬性”面板。圖4-15矩形工具的“屬性”面板4.1.3Flash的基本概念

1．位圖和矢量圖

2．Flash中的元件、庫和實(shí)例

(1)創(chuàng)建新元件。

①單擊菜單欄中的“插入”→“新建元件”命令。

②打開“創(chuàng)建新元件”對(duì)話框，如圖4-16所示。圖4-16“創(chuàng)建新元件”對(duì)話框

3．圖層

圖層就像透明的膠片，每個(gè)層都包含一個(gè)顯示在舞臺(tái)中的不同圖像，在舞臺(tái)上一層層地向上疊加，每一張又都保持獨(dú)立。在一個(gè)圖層上繪制和編輯對(duì)象，不會(huì)影響其他圖層上的對(duì)象。當(dāng)有很多圖層時(shí)，可以組合出各種復(fù)雜的動(dòng)畫效果。Flash中的圖層位于時(shí)間軸左側(cè)，如圖4-17所示。圖4-17圖層

4．幀

幀是組成Flash動(dòng)畫最基本的單位，每一幀都是動(dòng)畫中的一個(gè)畫面。Flash中的幀有關(guān)鍵幀、空白關(guān)鍵幀和普通幀三種類型，各種幀在時(shí)間軸上的位置如圖4-18所示。圖4-18不同的幀標(biāo)志4.1.4Flash文件的基本操作

1．創(chuàng)建新文檔

2．修改文檔屬性

(1)單擊菜單欄中的“修改”→“文檔”命令，或單擊“屬性”面板上的“550?×?400像素”按鈕。

(2)打開“文檔屬性”對(duì)話框，如圖4-19所示。圖4-19“文檔屬性”對(duì)話框

3．保存文件

4．測(cè)試和導(dǎo)出動(dòng)畫文件

執(zhí)行“控制”→“測(cè)試影片”命令(快捷鍵為Ctrl+Enter)，彈出測(cè)試窗口，同時(shí)在Flash源文件的保存路徑中生成一個(gè)擴(kuò)展名為swf的Flash影片。

執(zhí)行“文件”→“導(dǎo)出”→“導(dǎo)出影片”命令，彈出如圖4-20所示的對(duì)話框，同樣可以生成一個(gè)擴(kuò)展名為swf的Flash影片。圖4-20“導(dǎo)出影片”對(duì)話框4.1.5Flash動(dòng)畫制作流程

Flash動(dòng)畫的制作流程如下：

(1)新建Flash文檔。

(2)創(chuàng)建動(dòng)畫成員。

(3)設(shè)定動(dòng)畫效果。

(4)保存文件。

(5)測(cè)試和輸出文件。

本節(jié)知識(shí)點(diǎn)

逐幀動(dòng)畫

形狀補(bǔ)間動(dòng)畫

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

引導(dǎo)層動(dòng)畫

遮罩動(dòng)畫4.2制作Flash動(dòng)畫4.2.1逐幀動(dòng)畫

逐幀動(dòng)畫是一種常見的動(dòng)畫形式，其原理是在“連續(xù)的關(guān)鍵幀”中分解動(dòng)畫動(dòng)作，也就是在時(shí)間軸的每個(gè)關(guān)鍵幀上逐幀繪制不同的內(nèi)容，連續(xù)播放形成動(dòng)畫。

案例1：制作“文字流光效果”動(dòng)畫

制作如圖4-21所示的“文字流光效果”動(dòng)畫。圖4-21“文字流光效果”動(dòng)畫

實(shí)戰(zhàn)步驟

(1)新建一個(gè)Flash文檔，寬為550px，高為120px，幀頻為12fps，背景為黑色。

(2)選擇工具箱中的文本工具，在屬性面板中設(shè)置字體為“ArialBlack”，大小為48，顏色為紅色，在舞臺(tái)上輸入文字“WelcometoMyWeb”。

(3)選擇文本，執(zhí)行一次“修改”→“分離”命令(快捷鍵為Ctrl+B)，將文字打散。如圖4-22所示的文字被拆分成14個(gè)單字母。圖4-22分離文字案例2：奔馳的駿馬

制作如圖4-23所示的“奔馳的駿馬”動(dòng)畫。

實(shí)戰(zhàn)步驟

(1)新建文檔和創(chuàng)建背景圖層。

(2)導(dǎo)入gif動(dòng)畫。

導(dǎo)入的對(duì)象默認(rèn)被放在場(chǎng)景左上角，想要一次移動(dòng)多幀圖像到舞臺(tái)的適當(dāng)位置，可使用“多幀編輯”功能。先把“草原”圖層加鎖，然后按下時(shí)間軸面板下方的“編輯多個(gè)幀”按鈕，再單擊“修改繪圖紙標(biāo)記”按鈕，在彈出的菜單中選擇“繪制全部”選項(xiàng)，如圖4-24所示。圖4-23“奔馳的駿馬”動(dòng)畫圖4-24選擇“繪制全部”選項(xiàng)④執(zhí)行“編輯”→“全選”命令，用鼠標(biāo)左鍵按住場(chǎng)景左上方的馬并拖動(dòng)，可以把5幀中的圖片一次全部移動(dòng)到適當(dāng)位置。此時(shí)的時(shí)間軸和場(chǎng)景效果如圖4-25所示。

(3)創(chuàng)建背景音樂圖層。

①新建圖層3，將“圖層3”命名為“背景音樂”。

②執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到舞臺(tái)”命令，導(dǎo)入聲音文件“草原歌曲.mp3”。

③選擇“背景音樂”圖層的第1幀，在如圖4-26所示屬性面板的“聲音”中選擇剛剛導(dǎo)入的聲音文件，并在“同步”中選擇“開始”。圖4-25移動(dòng)多幀動(dòng)畫圖4-26設(shè)置“聲音”屬性

(4)測(cè)試和保存影片。

①保存文檔，文件名為“奔馳的駿馬”。

②按組合鍵Ctrl+Enter測(cè)試影片，觀看效果。

③制作完成的動(dòng)畫場(chǎng)景如圖4-27所示。圖4-27制作完成的動(dòng)畫場(chǎng)景★逐幀動(dòng)畫知識(shí)講解

在時(shí)間軸上逐幀繪制幀內(nèi)容稱為逐幀動(dòng)畫。由于是一幀一幀地畫，所以逐幀動(dòng)畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容。

逐幀動(dòng)畫在時(shí)間軸上表現(xiàn)為連續(xù)出現(xiàn)的關(guān)鍵幀，如圖4-28所示。圖4-28逐幀動(dòng)畫在時(shí)間軸面板上的標(biāo)記4.2.2形狀補(bǔ)間動(dòng)畫

形狀補(bǔ)間動(dòng)畫是Flash中非常重要的表現(xiàn)手法之一，運(yùn)用它可以變幻出各種奇妙的、不可思議的變形效果。

案例1：制作“三形互變”動(dòng)畫

制作如圖4-29所示的“三形互變”動(dòng)畫。圖4-29“三形互變”動(dòng)畫

實(shí)戰(zhàn)步驟

(1)新建一個(gè)Flash文檔，寬為300px，高為200px，幀頻為12fps，藍(lán)色背景。

(2)選擇“橢圓工具”，按住Shift鍵繪制一個(gè)圓形，設(shè)置其顏色和大小，然后執(zhí)行“窗口”→“對(duì)齊”命令，打開如圖4-30所示的“對(duì)齊”面板，按下“相對(duì)于舞臺(tái)”按鈕，點(diǎn)擊“水平中齊”和“垂直居中分布”按鈕，使圖形絕對(duì)居中于舞臺(tái)。圖4-30“對(duì)齊”面板

(3)選擇第15幀，按快捷鍵F7插入一個(gè)空白關(guān)鍵幀，然后使用“矩形工具”，按住Shift鍵畫一個(gè)正方形，并設(shè)置其顏色和大小，再使用“對(duì)齊”面板使圖形絕對(duì)居中于舞臺(tái)。

(4)選擇第30幀，按快捷鍵F7插入一個(gè)空白關(guān)鍵幀，再單擊“矩形工具”旁邊的下拉箭頭，選擇“多角星形”工具，然后單擊“屬性”面板的“選項(xiàng)”按鈕，在彈出的“工具設(shè)置”對(duì)話框中進(jìn)行如圖4-31所示的設(shè)置。之后在舞臺(tái)上畫出一個(gè)三角形，設(shè)置其顏色和大小，使用“對(duì)齊”面板使圖形絕對(duì)居中于舞臺(tái)。圖4-31“工具設(shè)置”對(duì)話框

(5)分別選擇第1幀和第15幀，在“屬性”面板的“補(bǔ)間”下拉列表項(xiàng)中選擇“形狀”。時(shí)間軸如圖4-32所示。

案例2：添加形狀提示的形變動(dòng)畫

為了得到流暢自然的形狀變形動(dòng)畫，可以添加形狀提示。下面制作兩個(gè)形變動(dòng)畫，一個(gè)不加形狀提示，一個(gè)加形狀提示，看看這兩個(gè)變形有什么不同。

制作如圖4-33所示的“添加形狀提示”動(dòng)畫。圖4-32設(shè)置補(bǔ)間動(dòng)畫的時(shí)間軸圖4-33“添加形狀提示”動(dòng)畫

實(shí)戰(zhàn)步驟

(1)創(chuàng)建未添加形狀提示的形變動(dòng)畫。

(2)創(chuàng)建添加形狀提示的形變動(dòng)畫。

①將剛才制作的文檔另存為“添加形狀提示變形”。

②選擇第1幀，執(zhí)行“修改”→“形狀”→“添加形狀提示”命令四次，則在第1幀和第40幀處的文本中部同時(shí)添加了四個(gè)帶字母的紅色圓圈。

③確認(rèn)工具箱中的“對(duì)齊對(duì)象”按鈕處于被按下狀態(tài)，分別拖動(dòng)調(diào)整第1幀和40幀處的形狀提示，將形狀提示點(diǎn)放在對(duì)象的邊緣處，如圖4-34所示。圖4-34添加形狀提示的第1幀和第40幀★形狀補(bǔ)間動(dòng)畫講解

形狀補(bǔ)間動(dòng)畫又稱形狀漸變動(dòng)畫，是指在一個(gè)關(guān)鍵幀中繪制一個(gè)形狀，在另一個(gè)關(guān)鍵幀中更改該形狀或繪制另一個(gè)形狀，然后在起始關(guān)鍵幀中定義為“形狀補(bǔ)間”的動(dòng)畫形式。

形狀補(bǔ)間動(dòng)畫可以實(shí)現(xiàn)兩個(gè)圖形之間顏色、形狀、大小、位置的相互變化，使用的元素多為矢量圖形。如果使用圖形元件、按鈕、文字，則必須先“打散”才能創(chuàng)建變形動(dòng)畫。

形狀補(bǔ)間動(dòng)畫創(chuàng)建好后，時(shí)間軸面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有一個(gè)長長的箭頭，如圖4-35所示。圖4-35形狀補(bǔ)間動(dòng)畫在時(shí)間軸面板上的標(biāo)記創(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ǔ)間”旁邊的小三角，在彈出的菜單中選擇“形狀”，此時(shí)，時(shí)間軸上的變化如圖4-35所示，一個(gè)形狀補(bǔ)間動(dòng)畫就創(chuàng)建完畢了。

Flash的“屬性”面板隨鼠標(biāo)選定的對(duì)象不同而發(fā)生相應(yīng)的變化。當(dāng)我們建立了一個(gè)形狀補(bǔ)間動(dòng)畫后，單擊“幀”，其“屬性”面板如圖4-36所示。圖4-36形狀補(bǔ)間動(dòng)畫的“屬性”面板4.2.3動(dòng)作補(bǔ)間動(dòng)畫

運(yùn)用動(dòng)作補(bǔ)間動(dòng)畫，可以制作出元件的大小、位置、顏色、透明度變化和旋轉(zhuǎn)等種種效果，甚至能做出令人稱奇的仿3D的效果。本節(jié)將講解動(dòng)作補(bǔ)間動(dòng)畫的特點(diǎn)及創(chuàng)建方法，并分析動(dòng)作補(bǔ)間動(dòng)畫和形狀補(bǔ)間動(dòng)畫的區(qū)別，我們精心設(shè)計(jì)的兩個(gè)實(shí)例將帶你進(jìn)一步加深對(duì)動(dòng)作補(bǔ)間動(dòng)畫的了解。

案例1：制作“行駛的車”動(dòng)畫

制作如圖4-37所示的“行駛的車”動(dòng)畫。圖4-37“行駛的車”動(dòng)畫案例2：制作“旋轉(zhuǎn)的花朵”動(dòng)畫

制作如圖4-38所示的“旋轉(zhuǎn)的花朵”動(dòng)畫。

實(shí)戰(zhàn)步驟

(1)創(chuàng)建“花瓣”圖形元件。

①新建一個(gè)Flash文檔，大小為300?×?300像素。

②執(zhí)行“插入”→“新建元件”命令(快捷鍵為Ctrl+F8)，打開如圖4-39所示的對(duì)話框，創(chuàng)建名稱為“花瓣”的圖形元件。

③在“元件”編輯區(qū)中畫一個(gè)橢圓，拖動(dòng)橢圓使其中心與畫面中心重合。圖4-38“旋轉(zhuǎn)的花朵”動(dòng)畫圖4-39創(chuàng)建“花瓣”元件④執(zhí)行“窗口”→“混色器”命令，打開“混色器”面板，如圖4-40所示，設(shè)置填充類型為“放射狀”后設(shè)置色帶下面的三個(gè)色塊，其中各個(gè)滑標(biāo)的RGB值分別為(244，78，21)、(253、254、218)和(254、200、210)。

⑤選擇工具箱中的“顏料桶工具”，單擊橢圓中心，向橢圓填充漸變顏色，形成橢圓花瓣，如圖4-41所示。圖4-40“混色器”面板圖4-41“花瓣”元件

(2)生成“花朵”圖形元件。

①切換到場(chǎng)景，從庫中將“花瓣”元件拖到編輯界面內(nèi)。執(zhí)行“窗口”→“變形”命令(快捷鍵為Crtl+T)，打開“變形”面板，如圖4-42所示，在“旋轉(zhuǎn)”選項(xiàng)中輸入30度。單擊“變形”面板上的“復(fù)制并應(yīng)用變形”按鈕6次，對(duì)花瓣進(jìn)行旋轉(zhuǎn)復(fù)制，形成一個(gè)花朵，如圖4-43所示。

②選擇整個(gè)花朵，執(zhí)行“修改”→“轉(zhuǎn)換為元件”命令，將剛才的花朵圖形轉(zhuǎn)換為花朵元件。圖4-42“變形”面板圖4-43花朵元件

動(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)畫。

構(gòu)成動(dòng)作補(bǔ)間動(dòng)畫的元素是元件，包括影片剪輯、圖形元件、按鈕、文字、位圖、組合等，但不能是形狀，只有把形狀組合或者轉(zhuǎn)換成元件后才可以制作動(dòng)作補(bǔ)間動(dòng)畫。

動(dòng)作補(bǔ)間動(dòng)畫建立后，時(shí)間軸面板的背景色變?yōu)榈仙?，在起始幀和結(jié)束幀之間有一個(gè)長長的箭頭，如圖4-44所示。圖4-44動(dòng)作補(bǔ)間動(dòng)畫在時(shí)間軸上的表現(xiàn)創(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)畫。

在時(shí)間軸“動(dòng)作補(bǔ)間動(dòng)畫”的起始幀上單擊，幀“屬性”面板會(huì)變成如圖4-45所示。圖4-45動(dòng)作補(bǔ)間動(dòng)畫的“屬性”面板形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫都屬于補(bǔ)間動(dòng)畫，它們的前后都各有一個(gè)起始幀和結(jié)束幀，二者之間的區(qū)別如表4-2所示。表4-2形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫的區(qū)別4.2.4引導(dǎo)層動(dòng)畫

前面在“行駛的汽車”案例中制作了運(yùn)動(dòng)軌跡是直線的動(dòng)畫，可是在實(shí)際生活中，有很多運(yùn)動(dòng)是弧線或不規(guī)則的，如月亮圍繞地球旋轉(zhuǎn)、魚兒在大海里游動(dòng)、樹葉飄落等，在Flash中能不能做出這種效果呢？答案是肯定的，這就是“引導(dǎo)路徑動(dòng)畫”。

案例：制作“揚(yáng)帆起航”動(dòng)畫

制作如圖4-46所示的“揚(yáng)帆起航”動(dòng)畫。圖4-46“揚(yáng)帆起航”動(dòng)畫

實(shí)戰(zhàn)步驟

(1)新建影片設(shè)置背景。

(2)制作引導(dǎo)動(dòng)畫。

①新建“圖層2”，更名為“帆船”。

②執(zhí)行“文件”→“導(dǎo)入”→“導(dǎo)入到舞臺(tái)”命令，將名為“boat.gif”的圖片導(dǎo)入到場(chǎng)景中。用變形工具調(diào)整帆船的大小和方向到滿意為止。

③選擇第50幀，按F6鍵插入關(guān)鍵幀。④在“屬性”面板中，建立第1～50幀之間的帆船運(yùn)動(dòng)動(dòng)畫，在“調(diào)整到路徑”和“對(duì)齊”上打鉤。

⑤單擊時(shí)間軸窗口上的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，或者右擊“帆船”圖層，在快捷菜單中執(zhí)行“引導(dǎo)層”命令，這時(shí)就在“帆船”圖層上增加了一個(gè)引導(dǎo)圖層。

⑥選擇引導(dǎo)層第1幀，在工具欄中選擇“鉛筆工具”，并選擇鉛筆工具的附屬選項(xiàng)“平滑”。然后用鉛筆工具在場(chǎng)景中畫一條平滑曲線，即帆船的運(yùn)動(dòng)軌跡。

圖4-47被引導(dǎo)對(duì)象注冊(cè)點(diǎn)對(duì)準(zhǔn)引導(dǎo)線兩端⑦選擇“帆船”圖層的第1幀。拖動(dòng)第1幀上的帆船到曲線的左端點(diǎn)上，注意一定要把帆船上的注冊(cè)點(diǎn)“o”與線左端對(duì)準(zhǔn)，否則帆船就不會(huì)在線上運(yùn)動(dòng)。選擇“帆船”圖層的第40幀，用同樣的方法將帆船拖動(dòng)到曲線的右端點(diǎn)上，帆船注冊(cè)點(diǎn)“o”與線右端對(duì)準(zhǔn)，如圖4-47所示。

⑧完成設(shè)置的時(shí)間軸如圖4-48所示。

(3)保存和測(cè)試影片。

圖4-48完成設(shè)置的時(shí)間軸

★引導(dǎo)層動(dòng)畫講解

將一個(gè)或多個(gè)層鏈接到一個(gè)運(yùn)動(dòng)引導(dǎo)層，使一個(gè)或多個(gè)對(duì)象沿同一條路徑運(yùn)動(dòng)的動(dòng)畫形式被稱為引導(dǎo)路徑動(dòng)畫。這種動(dòng)畫可以使一個(gè)或多個(gè)元件完成曲線或不規(guī)則的運(yùn)動(dòng)。

一個(gè)最基本的“引導(dǎo)路徑動(dòng)畫”由兩個(gè)圖層組成：上面一層是“引導(dǎo)層”，其圖標(biāo)為；下面一層是“被引導(dǎo)層”，其圖標(biāo)為，與普通圖層相同。

在普通圖層上單擊時(shí)間軸面板中的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，該層的上面就會(huì)添加一個(gè)引導(dǎo)層，同時(shí)該普通層縮進(jìn)成為“被引導(dǎo)層”，如圖4-49所示。圖4-49引導(dǎo)路徑動(dòng)畫應(yīng)用引導(dǎo)路徑動(dòng)畫的技巧：

(1)“引導(dǎo)動(dòng)畫”最基本的操作就是使一個(gè)運(yùn)動(dòng)動(dòng)畫附著在“引導(dǎo)線”上。所以操作時(shí)要特別注意，在動(dòng)畫開始和結(jié)束的關(guān)鍵幀上，被引導(dǎo)對(duì)象的起始、終點(diǎn)的兩個(gè)注冊(cè)點(diǎn)一定要對(duì)準(zhǔn)“引導(dǎo)線”的兩個(gè)端點(diǎn)，如圖4-50所示，否則無法引導(dǎo)。如果元件為不規(guī)則形，可以點(diǎn)擊工具箱中的“任意變形工具”，調(diào)整注冊(cè)點(diǎn)。圖4-50元件中心十字星對(duì)準(zhǔn)引導(dǎo)線

(2)“引導(dǎo)層”中的對(duì)象在被引導(dǎo)運(yùn)動(dòng)時(shí)，還可作更細(xì)致的設(shè)置，比如運(yùn)動(dòng)方向，在“屬性”面板上選中“路徑調(diào)整”復(fù)選框，對(duì)象的基線就會(huì)調(diào)整到運(yùn)動(dòng)路徑。而如果選中“對(duì)齊”復(fù)選框，元件的注冊(cè)點(diǎn)就會(huì)與運(yùn)動(dòng)路徑對(duì)齊，如圖4-51所示。

圖4-51路徑調(diào)整和對(duì)齊4.2.5遮罩動(dòng)畫

在Flash作品中，我們常?？吹胶芏嘌Ｄ可衿娴男Ч渲胁簧倬褪怯米詈?jiǎn)單的遮罩完成的。本節(jié)將通過一個(gè)實(shí)用的范例介紹遮罩的基本知識(shí)和一些遮罩的應(yīng)用技巧。

案例：制作“色彩流動(dòng)文字”動(dòng)畫

制作如圖4-52所示的“色彩流動(dòng)文字”動(dòng)畫。圖4-52“色彩流動(dòng)文字”動(dòng)畫

實(shí)戰(zhàn)步驟

(1)創(chuàng)建“彩帶”圖層。

①新建一個(gè)Flash文檔，設(shè)置寬為460px，高為180px，背景色為黑色。

②雙擊“圖層1”，將其更名為“彩帶”。

③執(zhí)行“插入”→“新建元件”命令(快捷鍵為Ctrl+F8)，彈出“創(chuàng)建新元件”對(duì)話框，設(shè)置“行為”為“圖形”，“名稱”為“彩帶”，單擊“確定”按鈕進(jìn)入該元件的編輯界面。

④選取“矩形工具”，在“工具箱”中設(shè)置“筆觸”顏色為無，填充顏色為七彩色，在工作區(qū)中畫一個(gè)長條，其效果如圖4-53所示(這里可能看不出效果，具體效果可參見素

材庫)。

⑤單擊時(shí)間軸上的，回到主場(chǎng)景。

⑥按Ctrl+L鍵，打開“庫”面板，將剛才制作的圖形元件“彩帶”拖到場(chǎng)景中。圖4-53矩形彩帶

(2)創(chuàng)建文本圖層并設(shè)置屬性。

①新建一個(gè)圖層，更名為“文字”。

②選取“文本工具”，在“屬性”面板上設(shè)置字體為“華文行楷”，大小為65，粗體，黑色。然后在工作區(qū)中輸入文字“精彩Flash”，在第30幀處插入普通幀。

(3)設(shè)置“彩帶”的運(yùn)動(dòng)。

①選擇“彩帶”圖層，在第30幀處插入一個(gè)關(guān)鍵幀，在第1幀和第30幀處分別移動(dòng)“彩帶”的位置，如圖4-54所示。圖4-54彩帶移動(dòng)效果

(4)將文本圖層設(shè)為遮罩層，測(cè)試效果。

①右鍵單擊“文字”圖層，在彈出的菜單中選擇“遮罩層”。其時(shí)間軸和舞臺(tái)場(chǎng)景如圖4-55所示，可發(fā)現(xiàn)“彩帶”不見了，已被文字遮罩起來。圖4-55完成設(shè)置的遮罩動(dòng)畫時(shí)間軸和動(dòng)畫效果★遮罩動(dòng)畫講解

遮罩動(dòng)畫是Flash中一個(gè)很重要的動(dòng)畫類型，很多效果豐富的動(dòng)畫都是通過遮罩動(dòng)畫來完成的。在Flash的圖層中有一個(gè)遮罩圖層類型，為了得到特殊的顯示效果，可以在遮罩層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方的對(duì)象可以通過該“視窗”顯示出來，而“視窗”之外的對(duì)象將不會(huì)顯示。在Flash中沒有一個(gè)專門的按鈕來創(chuàng)建遮罩層，遮罩層其實(shí)是由普通圖層轉(zhuǎn)化的。只要在某個(gè)圖層上單擊右鍵，在彈出的菜單中選擇“遮罩層”，使命令的左邊出現(xiàn)一個(gè)小鉤，該圖層就會(huì)生成遮罩層，“層圖標(biāo)”就會(huì)從普通層圖標(biāo)變?yōu)檎谡謱訄D標(biāo)，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”，在縮進(jìn)的同時(shí)圖標(biāo)變?yōu)?。如果想關(guān)聯(lián)更多的層被遮罩，只要把這些層拖到被遮罩層下面就行了，如圖4-56所示。圖4-56多層遮罩動(dòng)畫一、選擇題

1.下面關(guān)于“矢量圖形”和“位圖圖像”的說法，正確的是()。

A．在Flash中能夠產(chǎn)生動(dòng)畫效果的可以是矢量圖形，也可以是位圖圖像

B．在Flash中，用戶無法使用在其他應(yīng)用程序中創(chuàng)建的矢量圖形和位圖圖像

C．用Flash的繪圖工具畫出來的圖形是位圖圖像

D．矢量圖形文件比位圖圖像文件大習(xí)題4

2．在使用“矩形”工具時(shí)，希望畫出的矩形為正方形，可以在繪制的同時(shí)按住()。

A．Ctrl鍵 B．Shift鍵 C．Alt鍵 D．Tab鍵

3．時(shí)間軸上用小黑點(diǎn)表示的幀是()。

A．空白幀B．關(guān)鍵幀C．空白關(guān)鍵幀D．過渡幀

4．下列關(guān)于元件和實(shí)例的關(guān)系描述正確的是()。

A．一個(gè)實(shí)例可以產(chǎn)生多個(gè)元件

B．一個(gè)元件可以產(chǎn)生多個(gè)實(shí)例

C．一個(gè)元件只能產(chǎn)生一個(gè)實(shí)例

D．上述選項(xiàng)均不正確

5．?如果在一個(gè)圖層中，一個(gè)對(duì)象在舞臺(tái)上從上部運(yùn)動(dòng)到下部，那么該圖層包含()。

A．兩個(gè)關(guān)鍵幀

B．兩個(gè)關(guān)鍵幀和它們之間的補(bǔ)間幀

C．一個(gè)關(guān)鍵幀和它前面的補(bǔ)間幀

D