Flash-網(wǎng)頁(yè)設(shè)計(jì)教程6

本章簡(jiǎn)介：

在FlashCS3動(dòng)畫(huà)的制作過(guò)程中，時(shí)間軸、幀和層起到了關(guān)鍵性的作用。讀者通過(guò)學(xué)習(xí)要了解并掌握如何靈活地應(yīng)用幀、時(shí)間軸和不同性質(zhì)的層，并根據(jù)設(shè)計(jì)需要制作出豐富多彩的動(dòng)畫(huà)效果。本章將介紹動(dòng)畫(huà)中幀、時(shí)間軸以及層的使用方法及應(yīng)用技巧，讀者通過(guò)學(xué)習(xí)要了解并掌握這些的強(qiáng)大功能，為自己的動(dòng)畫(huà)設(shè)計(jì)作品增光添彩。

第6章掌握FlashCS3強(qiáng)大的動(dòng)畫(huà)制作功能課堂學(xué)習(xí)目標(biāo)幀與時(shí)間軸幀動(dòng)畫(huà)形狀補(bǔ)間動(dòng)畫(huà)動(dòng)作補(bǔ)間動(dòng)畫(huà)色彩變化動(dòng)畫(huà)層、引導(dǎo)層與運(yùn)動(dòng)引導(dǎo)層的動(dòng)畫(huà)遮罩層與遮罩的動(dòng)畫(huà)制作分散到圖層時(shí)間軸特效與場(chǎng)景動(dòng)畫(huà)6.1幀與時(shí)間軸幀的概念幀的顯示形式時(shí)間軸面板繪圖紙（洋蔥皮）功能在時(shí)間軸面板中設(shè)置幀

醫(yī)學(xué)證明，人類(lèi)具有視覺(jué)暫留的特點(diǎn)，即人眼看到物體或畫(huà)面后，在1/24秒內(nèi)不會(huì)消失。利用這一原理，在一幅畫(huà)沒(méi)有消失之前播放下一幅畫(huà)，就會(huì)給人造成流暢的視覺(jué)變化效果。所以，動(dòng)畫(huà)就是通過(guò)連續(xù)播放一系列靜止畫(huà)面，給視覺(jué)造成連續(xù)變化的效果。在FlashCS3中，這一系列單幅的畫(huà)面就叫幀，它是FlashCS3動(dòng)畫(huà)中最小時(shí)間單位里出現(xiàn)的畫(huà)面。每秒鐘顯示的幀數(shù)叫幀率，如果幀率太慢就會(huì)給人造成視覺(jué)上不流暢的感覺(jué)。所以，按照人的視覺(jué)原理，一般將動(dòng)畫(huà)的幀率設(shè)為24幀/秒。6.1.1

幀的概念

6.1.2

幀的顯示形式

空白關(guān)鍵幀在時(shí)間軸中，白色背景帶有黑圈的幀為空白關(guān)鍵幀。關(guān)鍵幀在時(shí)間軸中，灰色背景帶有黑點(diǎn)的幀為關(guān)鍵幀。動(dòng)作補(bǔ)間幀在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間藍(lán)色背景帶有黑色箭頭的幀為補(bǔ)間幀。形狀補(bǔ)間幀在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間綠色背景帶有黑色箭頭的幀為補(bǔ)間幀。包含動(dòng)作語(yǔ)句的幀在時(shí)間軸中，第1幀上出現(xiàn)一個(gè)字母“a”，表示這1幀中包含了使用“動(dòng)作”面板設(shè)置的動(dòng)作語(yǔ)句。幀標(biāo)簽在時(shí)間軸中，第1幀上出現(xiàn)一只紅旗，表示這一幀的標(biāo)簽類(lèi)型是名稱(chēng)；第1幀上出現(xiàn)兩條綠色斜杠，表示這一幀的標(biāo)簽類(lèi)型是注釋?zhuān)坏?幀上出現(xiàn)一個(gè)金色的錨，表示這一幀的標(biāo)簽類(lèi)型是錨記?！皶r(shí)間軸”面板由圖層面板和時(shí)間軸組成?！皶r(shí)間軸”面板6.1.3

時(shí)間軸面板

一般情況下，F(xiàn)lashCS3的舞臺(tái)只能顯示當(dāng)前幀中的對(duì)象。如果希望在舞臺(tái)上出現(xiàn)多幀對(duì)象以幫助當(dāng)前幀對(duì)象的定位和編輯，F(xiàn)lashCS3提供的繪圖紙（洋蔥皮）功能可以將其實(shí)現(xiàn)。在時(shí)間軸面板下方的按鈕功能如下。6.1.4

繪圖紙（洋蔥皮）功能

“幀居中”按鈕：?jiǎn)螕舸税粹o，播放頭所在幀會(huì)顯示在時(shí)間軸的中間位置?！袄L圖紙外觀”按鈕：?jiǎn)螕舸税粹o，時(shí)間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對(duì)象將同時(shí)顯示在舞臺(tái)中?！袄L圖紙外觀輪廓”按鈕：?jiǎn)螕舸税粹o，時(shí)間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對(duì)象將以輪廓線的形式同時(shí)顯示在舞臺(tái)中?！熬庉嫸鄠€(gè)幀”按鈕：?jiǎn)螕舸税粹o，繪圖紙標(biāo)記范圍內(nèi)的幀上的對(duì)象將同時(shí)顯示在舞臺(tái)中，可以同時(shí)編輯所有的對(duì)象。

“修改繪圖紙標(biāo)記”按鈕：?jiǎn)螕舸税粹o，彈出其下拉菜單。

6.1.5

在時(shí)間軸面板中設(shè)置幀

插入幀選擇“插入>時(shí)間軸>幀”命令，或按F5鍵，可以在時(shí)間軸上插入一個(gè)普通幀。選擇“插入>時(shí)間軸>關(guān)鍵幀”命令，或按F6鍵，可以在時(shí)間軸上插入一個(gè)關(guān)鍵幀。選擇“插入>時(shí)間軸>空白關(guān)鍵幀”命令，可以在時(shí)間軸上插入一個(gè)空白關(guān)鍵幀。選擇幀選擇“編輯>時(shí)間軸>選擇所有幀”命令，選中時(shí)間軸中的所有幀。單擊要選的幀，幀變?yōu)樯钌?。用鼠?biāo)選中要選擇的幀，再向前或向后進(jìn)行拖曳，其間鼠標(biāo)經(jīng)過(guò)的幀全部被選中。按住Ctrl鍵的同時(shí)，用鼠標(biāo)單擊要選擇的幀，可以選擇多個(gè)不連續(xù)的幀。按住Shift鍵的同時(shí)，用鼠標(biāo)單擊要選擇的兩個(gè)幀，這兩個(gè)幀中間的所有幀都被選中。移動(dòng)幀選中一個(gè)或多個(gè)幀，按住鼠標(biāo)，移動(dòng)所選幀到目標(biāo)位置。在移動(dòng)過(guò)程中，如果按住Alt鍵，會(huì)在目標(biāo)位置上復(fù)制出所選的幀。刪除幀用鼠標(biāo)右鍵單擊要?jiǎng)h除的幀，在彈出的菜單中選擇“清除幀”命令。選中要?jiǎng)h除的普通幀，按Shift+F5組合鍵，刪除幀。選中要?jiǎng)h除的關(guān)鍵幀，按Shift+F6組合鍵，刪除關(guān)鍵幀。

6.2幀動(dòng)畫(huà)幀動(dòng)畫(huà)逐幀動(dòng)畫(huà)課堂案例——制作逐幀動(dòng)畫(huà)第1幀6.2.1

幀動(dòng)畫(huà)

第5幀第9幀第12幀時(shí)間軸面板中設(shè)置關(guān)鍵幀的狀態(tài)

第1幀6.2.2

逐幀動(dòng)畫(huà)第2幀第3幀第4幀時(shí)間軸面板中設(shè)置關(guān)鍵幀的狀態(tài)

第5幀使用添加關(guān)鍵幀命令和創(chuàng)建補(bǔ)間動(dòng)畫(huà)命令制作動(dòng)畫(huà)。使用變形面板改變圖形大小。效果圖

6.2.3

課堂案例——制作逐幀動(dòng)畫(huà)6.3形狀補(bǔ)間動(dòng)畫(huà)

簡(jiǎn)單形狀補(bǔ)間動(dòng)畫(huà)

應(yīng)用變形提示課堂案例——制作下載條

如果舞臺(tái)上的對(duì)象是組件實(shí)例、多個(gè)圖形的組合、文字、導(dǎo)入的素材對(duì)象，必須先分離或取消組合，將其打散成圖形，才能制作形狀補(bǔ)間動(dòng)畫(huà)。利用這種動(dòng)畫(huà)，也可以實(shí)現(xiàn)上述對(duì)象的大小、位置、旋轉(zhuǎn)、顏色及透明度等變化。6.3.1

簡(jiǎn)單形狀補(bǔ)間動(dòng)畫(huà)形狀補(bǔ)間動(dòng)畫(huà)變化過(guò)程

使用變形提示，可以讓原圖形上的某一點(diǎn)變換到目標(biāo)圖形的某一點(diǎn)上。應(yīng)

用變形提示可以制作出各種復(fù)雜的變形效果。

系統(tǒng)自動(dòng)生成的圖形變化過(guò)程

6.3.2

應(yīng)用變形提示在提示點(diǎn)的作用下生成的圖形變化過(guò)程

使用矩形工具繪制下載條圖形，使用任意變形工具改變下載條的長(zhǎng)度，使用創(chuàng)建形狀補(bǔ)間命令制作動(dòng)畫(huà)效果。效果圖

6.3.3

課堂案例——制作下載條6.4動(dòng)作補(bǔ)間動(dòng)畫(huà)動(dòng)作補(bǔ)間動(dòng)畫(huà)課堂案例——制作旋轉(zhuǎn)的地球第1幀中圖形效果

6.4.1

動(dòng)作補(bǔ)間動(dòng)畫(huà)在時(shí)間軸面板中設(shè)置動(dòng)作補(bǔ)間動(dòng)畫(huà)

最后1幀中圖形效果

每幀中的圖形變化效果

使用逆時(shí)針旋轉(zhuǎn)90度命令旋轉(zhuǎn)地球的角度。使用文本工具添加文字效果。使用任意變形工具旋轉(zhuǎn)文字的角度效果圖

6.4.2

課堂案例——制作旋轉(zhuǎn)地球6.5色彩變化動(dòng)畫(huà)色彩變化動(dòng)畫(huà)測(cè)試動(dòng)畫(huà)“影片瀏覽器”面板的功能課堂案例——制作變色標(biāo)志在不同的關(guān)鍵幀中，玫瑰花的顏色變化效果6.5.1

色彩變化動(dòng)畫(huà)時(shí)間軸面板中的設(shè)置

在制作完成動(dòng)畫(huà)后，要對(duì)其進(jìn)行測(cè)試。可以通過(guò)多種方法來(lái)測(cè)試動(dòng)畫(huà)。6.5.2

測(cè)試動(dòng)畫(huà)應(yīng)用控制器面板選擇“窗口>工具欄>控制器”命令，彈出“控制器”面板。應(yīng)用播放命令選擇“控制>播放”命令，或按Enter鍵，可以對(duì)當(dāng)前舞臺(tái)中的動(dòng)畫(huà)進(jìn)行瀏覽。在“時(shí)間軸”面板中，可以看見(jiàn)播放頭在運(yùn)動(dòng)，隨著播放頭的運(yùn)動(dòng)，舞臺(tái)中顯示出播放頭所經(jīng)過(guò)的幀上的內(nèi)容。

應(yīng)用測(cè)試影片命令選擇“控制>測(cè)試影片”命令，或按Ctrl+Enter組合鍵，可以進(jìn)入動(dòng)畫(huà)測(cè)試窗口，對(duì)動(dòng)畫(huà)作品的多個(gè)場(chǎng)景進(jìn)行連續(xù)的測(cè)試。應(yīng)用測(cè)試場(chǎng)景命令

選擇“控制>測(cè)試場(chǎng)景”命令，或按Ctrl+Alt+Enter組合鍵，可以進(jìn)入動(dòng)畫(huà)測(cè)試窗口，測(cè)試當(dāng)前舞臺(tái)窗口中顯示的場(chǎng)景或元件中的動(dòng)畫(huà)?！坝捌瑸g覽器”面板，可以將FlashCS3文件組成樹(shù)型關(guān)系圖。方便用戶進(jìn)行動(dòng)畫(huà)分析、管理或修改。在其中可以查看每一個(gè)元件，熟悉幀與幀之間的關(guān)系，查看動(dòng)作腳本等，也可快速查找需要的對(duì)象。選擇“窗口>影片瀏覽器”命令，彈出“影片瀏覽器”面板?！坝捌瑸g覽器”面板6.5.3

“影片瀏覽器”面板的功能

使用改變幀數(shù)命令制作標(biāo)志圖形的變色效果。使用對(duì)齊面板將所有的標(biāo)志圖形進(jìn)行對(duì)齊。使用變形面板調(diào)整圖形的大小效果圖

6.5.4

課堂案例——制作變色標(biāo)志

6.6層、引導(dǎo)層與運(yùn)動(dòng)引導(dǎo)層的動(dòng)畫(huà)層的設(shè)置圖層文件夾普通引導(dǎo)層運(yùn)動(dòng)引導(dǎo)層課堂案例——制作下雪效果6.6.1

層的設(shè)置

層的彈出式菜單創(chuàng)建圖層選取圖層排列圖層復(fù)制、粘貼圖層刪除圖層隱藏、鎖定圖層和圖層的線框顯示模式重命名圖層6.6.2

圖層文件夾

創(chuàng)建圖層文件夾選擇“插入>時(shí)間軸>圖層文件夾”命令，在“時(shí)間軸”面板中創(chuàng)建圖層文件夾。還可單擊“時(shí)間軸”面板下方的“插入圖層文件夾”按鈕，在“時(shí)間軸”面板中創(chuàng)建圖層文件夾。

刪除圖層文件夾在“時(shí)間軸”面板中選中要?jiǎng)h除的圖層文件夾，單擊面板下方的“刪除圖層”按鈕，即可刪除圖層文件夾。還可在“時(shí)間軸”面板中選中要?jiǎng)h除的圖層文件夾，按住鼠標(biāo)不放，將其向下拖曳，這時(shí)會(huì)出現(xiàn)虛線，將虛線拖曳到“刪除圖層”按鈕上進(jìn)行刪除。

在“時(shí)間軸”面板中可以創(chuàng)建圖層文件夾來(lái)組織和管理圖層，這樣“時(shí)間

軸”面板中圖層的層次結(jié)構(gòu)將非常清晰。

6.6.3

普通引導(dǎo)層

創(chuàng)建普通引導(dǎo)層

鼠標(biāo)右鍵單擊“時(shí)間軸”面板中的某個(gè)圖層，在彈出的菜單中選擇“引導(dǎo)層”命令，該圖層轉(zhuǎn)換為普通引導(dǎo)層。將普通引導(dǎo)層轉(zhuǎn)換為普通圖層如果要播放影片時(shí)顯示引導(dǎo)層上的對(duì)象，還可將引導(dǎo)層轉(zhuǎn)換為普通圖層。鼠標(biāo)右鍵單擊“時(shí)間軸”面板中的引導(dǎo)層，在彈出的菜單中選擇“引導(dǎo)層”命令，引導(dǎo)層轉(zhuǎn)換為普通圖層。將普通引導(dǎo)層轉(zhuǎn)換為普通圖層

普通引導(dǎo)層主要用于為其他圖層提供輔助繪圖和繪圖定位，引導(dǎo)層中的圖

形在播放影片時(shí)是不會(huì)顯示的。

6.6.4

運(yùn)動(dòng)引導(dǎo)層

創(chuàng)建運(yùn)動(dòng)引導(dǎo)層

選中要添加運(yùn)動(dòng)引導(dǎo)層的圖層，單擊“時(shí)間軸”面板下方的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，為圖層添加運(yùn)動(dòng)引導(dǎo)層。

將運(yùn)動(dòng)引導(dǎo)層轉(zhuǎn)換為普通圖層將運(yùn)動(dòng)引導(dǎo)層轉(zhuǎn)換為普通圖層的方法與普通引導(dǎo)層轉(zhuǎn)換的方法一樣。應(yīng)用運(yùn)動(dòng)引導(dǎo)層制作動(dòng)畫(huà)

運(yùn)動(dòng)引導(dǎo)層的作用是設(shè)置對(duì)象運(yùn)動(dòng)路徑的導(dǎo)向，使與之相鏈接的被引導(dǎo)層中的對(duì)象沿著路徑運(yùn)動(dòng)，運(yùn)動(dòng)引導(dǎo)層上的路徑在播放動(dòng)畫(huà)時(shí)不顯示。在引導(dǎo)層上還可創(chuàng)建多個(gè)運(yùn)動(dòng)軌跡，以引導(dǎo)被引導(dǎo)層上的多個(gè)對(duì)象沿不同的路徑運(yùn)動(dòng)。要?jiǎng)?chuàng)建按照任意軌跡運(yùn)動(dòng)的動(dòng)畫(huà)就需要添加運(yùn)動(dòng)引導(dǎo)層，但創(chuàng)建運(yùn)動(dòng)引導(dǎo)層動(dòng)畫(huà)時(shí)要求是動(dòng)作補(bǔ)間動(dòng)畫(huà)，形狀補(bǔ)間動(dòng)畫(huà)不可用。使用橢圓工具和柔化填充邊緣命令制作雪花圖形。使用添加運(yùn)動(dòng)引導(dǎo)層命令制作下雪效果。效果圖

6.6.5

課堂案例——制作下雪效果6.7遮罩層與遮罩的動(dòng)畫(huà)制作

遮罩層靜態(tài)遮罩動(dòng)畫(huà)動(dòng)態(tài)遮罩動(dòng)畫(huà)課堂案例——制作發(fā)光效果6.7.1

遮罩層

創(chuàng)建遮罩層要?jiǎng)?chuàng)建遮罩動(dòng)畫(huà)首先要?jiǎng)?chuàng)建遮罩層。在“時(shí)間軸”面板中，鼠標(biāo)右鍵單擊要轉(zhuǎn)換遮罩層的圖層，在彈出的菜單中選擇“遮罩層”命令。選中的圖層轉(zhuǎn)換為遮罩層，其下方的圖層自動(dòng)轉(zhuǎn)換為被遮罩層，并且它們都自動(dòng)被鎖定。將遮罩層轉(zhuǎn)換為普通圖層

在“時(shí)間軸”面板中，鼠標(biāo)右鍵單擊要轉(zhuǎn)換的遮罩層，在彈出的菜單中選擇“遮罩層”命令，遮罩層轉(zhuǎn)換為普通圖層。

在時(shí)間軸面板中設(shè)置靜態(tài)遮罩

6.7.2

靜態(tài)遮罩動(dòng)畫(huà)“圖層1”中的七彩花圖形“圖層2”中的火炬圖形遮罩后的圖形效果動(dòng)畫(huà)顯示的效果

在時(shí)間軸面板中設(shè)置動(dòng)態(tài)遮罩

“圖層1”中的五角星圖形“圖層2”中的圓形6.7.3

動(dòng)態(tài)遮罩動(dòng)畫(huà)使用刷子工具繪制線條圖形效果，使用遮罩層命令制作遮罩效果。效果圖

6.7.4

課堂案例——制作發(fā)光效果6.7分散到圖層分散到圖層課堂案例——制手繪制帆船動(dòng)畫(huà)

新建空白文檔，選擇“文本”工具，在“圖層1”的舞臺(tái)窗口中輸入文字，選中文字，按Ctrl+B組合鍵，將文字打散。選擇“修改>時(shí)間軸>分散到圖層”命令，將“圖層1”中的文字分散到不同的圖層中并按文字設(shè)定圖層名。分散到圖層的過(guò)程6.8.1

分散到圖層使用分散到圖層命令將圖形各部分分散到多個(gè)圖層中。使用遮罩層命令將船圖形遮罩。使用水平翻轉(zhuǎn)命令制作海浪效果效果圖

6.8.2

課堂案例——制作手繪帆船動(dòng)畫(huà)6.9時(shí)間軸特效與場(chǎng)景動(dòng)畫(huà)時(shí)間軸特效的類(lèi)型創(chuàng)建時(shí)間軸特效

場(chǎng)景動(dòng)畫(huà)課堂案例——制作轉(zhuǎn)動(dòng)的文字6.9.1

時(shí)間軸特效的類(lèi)型

“變形/轉(zhuǎn)換”命令

“變形/轉(zhuǎn)換”命令中包含兩個(gè)特效類(lèi)型：“變形”和“轉(zhuǎn)換”?！皫椭泵?/p>

“幫助”命令中包含兩個(gè)特效類(lèi)型：“分散式直接復(fù)制”和“復(fù)制到網(wǎng)格”。

“效果”命令“效果”命令中包含4個(gè)特效類(lèi)型：“分離”、“展開(kāi)”、“投影”和“模糊”。

選擇“插入>時(shí)間軸特效”命令，下面包含3個(gè)子菜單命令，分別為“變形/轉(zhuǎn)換”、“幫助”和“效果”。

選中圖形，選擇“插入>時(shí)間軸特效>幫助>分散式直接復(fù)制”命令，彈出“分散式直接復(fù)制”對(duì)話框，設(shè)置完成后單擊“更新預(yù)覽”按鈕，查看設(shè)置的效果，最后，單擊“確定”按鈕，完成分散式重置