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

本章簡介：

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

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

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

幀的概念

6.1.2

幀的顯示形式

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

時間軸面板

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

繪圖紙（洋蔥皮）功能

“幀居中”按鈕：單擊此按鈕，播放頭所在幀會顯示在時間軸的中間位置。“繪圖紙外觀”按鈕：單擊此按鈕，時間軸標尺上出現(xiàn)繪圖紙的標記顯示，在標記范圍內(nèi)的幀上的對象將同時顯示在舞臺中?！袄L圖紙外觀輪廓”按鈕：單擊此按鈕，時間軸標尺上出現(xiàn)繪圖紙的標記顯示，在標記范圍內(nèi)的幀上的對象將以輪廓線的形式同時顯示在舞臺中?！熬庉嫸鄠€幀”按鈕：單擊此按鈕，繪圖紙標記范圍內(nèi)的幀上的對象將同時顯示在舞臺中，可以同時編輯所有的對象。

“修改繪圖紙標記”按鈕：單擊此按鈕，彈出其下拉菜單。

6.1.5

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

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

6.2幀動畫幀動畫逐幀動畫課堂案例——制作逐幀動畫第1幀6.2.1

幀動畫

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

第1幀6.2.2

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

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

6.2.3

課堂案例——制作逐幀動畫6.3形狀補間動畫

簡單形狀補間動畫

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

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

簡單形狀補間動畫形狀補間動畫變化過程

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

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

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

6.3.2

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

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

6.3.3

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

6.4.1

動作補間動畫在時間軸面板中設(shè)置動作補間動畫

最后1幀中圖形效果

每幀中的圖形變化效果

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

6.4.2

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

色彩變化動畫時間軸面板中的設(shè)置

在制作完成動畫后，要對其進行測試?？梢酝ㄟ^多種方法來測試動畫。6.5.2

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

應(yīng)用測試影片命令選擇“控制>測試影片”命令，或按Ctrl+Enter組合鍵，可以進入動畫測試窗口，對動畫作品的多個場景進行連續(xù)的測試。應(yīng)用測試場景命令

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

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

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

6.5.4

課堂案例——制作變色標志

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

層的設(shè)置

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

圖層文件夾

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

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

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

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

6.6.3

普通引導(dǎo)層

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

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

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

形在播放影片時是不會顯示的。

6.6.4

運動引導(dǎo)層

創(chuàng)建運動引導(dǎo)層

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

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

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

6.6.5

課堂案例——制作下雪效果6.7遮罩層與遮罩的動畫制作

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

遮罩層

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

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

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

6.7.2

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

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

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

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

6.7.4

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

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

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

6.8.2

課堂案例——制作手繪帆船動畫6.9時間軸特效與場景動畫時間軸特效的類型創(chuàng)建時間軸特效

場景動畫課堂案例——制作轉(zhuǎn)動的文字6.9.1

時間軸特效的類型

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

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

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

“效果”命令“效果”命令中包含4個特效類型：“分離”、“展開”、“投影”和“模糊”。

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

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