Flash ActionScript 3.0動畫教程

1、第4章 動畫制作詳解本章將詳細(xì)講解Flash動畫的核心內(nèi)容，主要包括以下幾點(diǎn)內(nèi)容：動畫的形成原理、Flash CS6中圖層與動畫的關(guān)系、Flash CS6中自動形成動畫的種類、時(shí)間軸面板和層的種類及應(yīng)用。通過本章的學(xué)習(xí)，使讀者對Flash動畫有更加深刻的理解。14.1 動畫的形成原理視覺原理如圖4-1所示。當(dāng)大腦每秒接收的圖片超過最大分辨限度時(shí)，儲存在大腦中的景象就會與視覺信息新傳來的景象發(fā)生沖突，最終造成大腦的分辨混亂。在這種情況下大腦會相應(yīng)縮短對每張圖片的分辨時(shí)間和分辨圖片的間隔時(shí)間，以匹配視覺信息的傳輸速度。但當(dāng)眼睛每秒傳送更多圖片時(shí)，大腦處理圖片的速率就無法與眼睛傳輸顏色信息的速度相匹

2、配，這時(shí)大腦正在處理的信息與眼睛所看到的信息就會發(fā)生沖突，最終造成視覺殘留的效果。如果大腦正在處理的圖片與眼睛所看到的圖片有一定的相關(guān)聯(lián)系，例如圖4-2所示的兩幅圖片，由于大腦分辨這兩幅圖片的時(shí)間都不充足，所以并不能完全辨認(rèn)兩幅圖片中的所有顏色區(qū)域，而且辨認(rèn)這兩幅圖片的時(shí)間間隔又非常短暫，這樣就會使大腦在分析第2幅圖片時(shí)忽略其中與第1幅圖片相同的區(qū)域，再加上視覺殘留的效果大腦最終會認(rèn)為第2幅圖片中的星星是從襪子中噴出來的。24.2 圖 層可以把圖層簡單地理解為很多重疊的透明畫紙，每一張畫紙上都有相對獨(dú)立的內(nèi)容。當(dāng)把這些畫紙按一定順序重疊在一起時(shí)就得到了圖片的最終效果。如圖4-3所示的圖片中一共

3、有三個(gè)圖層，每個(gè)圖層中都有各自獨(dú)立的內(nèi)容，而這些各自獨(dú)立的內(nèi)容通過圖層的疊加最終得到圖片的效果。 在Flash CS6中，圖層的創(chuàng)建與管理功能被集成在時(shí)間軸面板中，如圖4-4所示。34.2 圖 層1. 新建圖層2. 刪除圖層3. 管理圖層(1) 圖層的名字(2) 圖層的順序(3) 圖層文件夾(4) 隱藏圖層(5) 鎖定圖層(6) 顯示圖層輪廓(7) 圖層屬性窗口44.3 Flash CS6中的幀與關(guān)鍵幀幀是Flash CS6中的核心概念，幀的快速交替形成Flash動畫。在Flash CS6中有關(guān)幀的控制功能都被集中在時(shí)間軸面板的時(shí)間軸上，如圖4-14所示。時(shí)間軸是由幀構(gòu)成的虛擬動畫流程軸，在時(shí)

4、間軸上用戶可以為動畫添加幀、刪除幀、修改幀等。用戶創(chuàng)建的每個(gè)圖層都有各自相對獨(dú)立的時(shí)間軸，也就是說用戶可以在圖層中單獨(dú)編輯屬于該圖層的動畫，在編輯時(shí)并不會影響到其他圖層中的內(nèi)容。事實(shí)上，專業(yè)的動畫制作都是盡可能地將最終的動畫拆分到很多圖層中，這樣既有利于管理動畫效果，也方便日后的修改工作。圖層和時(shí)間軸的具體關(guān)系如圖4-15所示。在Flash CS6中幀分為3種：關(guān)鍵幀、過渡幀和空白幀。54.3 Flash CS6中的幀與關(guān)鍵幀具體方法是將鼠標(biāo)光標(biāo)移動到時(shí)間軸要插入關(guān)鍵幀的幀上，右擊鼠標(biāo)后在彈出的快捷菜單中選擇“插入關(guān)鍵幀”或“插入空白關(guān)鍵幀”命令，如圖4-16所示。當(dāng)編輯好關(guān)鍵幀后Flash

5、CS6會按用戶的要求自動成生位于兩關(guān)鍵幀之間的幀內(nèi)容，這些由Flash CS6自動生成的幀叫作過渡幀。那些既不是關(guān)鍵幀又不位于兩關(guān)鍵幀之間的幀叫作空白幀?？瞻讕须m然沒有任何內(nèi)容，但空白幀會延續(xù)顯示與它相鄰的上一個(gè)關(guān)鍵幀中的內(nèi)容。Flash CS6在空白幀中添加一個(gè)黑色的空心矩形表示某關(guān)鍵幀中內(nèi)容的顯示范圍。如圖4-17所示，位于第1幀的關(guān)鍵幀中內(nèi)容的顯示范圍延伸至第10幀，也就是說我們在第1幀到第10幀中看到的內(nèi)容是完全相同的。64.4 Flash CS6中自動形成動畫的種類Flash CS6中自動生成的動畫類型有兩種：動畫補(bǔ)間和形狀補(bǔ)間。這兩種補(bǔ)間方式都是利用位于兩端關(guān)鍵幀中的內(nèi)容差異，自

6、動生成逐漸變化的中間過渡幀實(shí)現(xiàn)的。Flash CS6規(guī)定每個(gè)圖層在該圖層時(shí)間軸的某段連續(xù)的幀中只能有一個(gè)組合對象或元件形成動畫補(bǔ)間，也就是說在一個(gè)圖層時(shí)間軸中的兩個(gè)關(guān)鍵幀之間只能有一個(gè)組合或元件發(fā)生位置的變化，若多于一個(gè)Flash CS6會在庫中自動生成圖形元件，以應(yīng)付多個(gè)組合或元件的動畫效果，但這種添加元件形成動畫的方法常常不會達(dá)到你所期望的動畫效果，而是形成非預(yù)期的動畫效果。74.4.1 動畫補(bǔ)間動畫補(bǔ)間是Flash CS6自動形成兩關(guān)鍵幀之間組合或元件位置和旋轉(zhuǎn)角度變化的補(bǔ)間方式。首先，F(xiàn)lash CS6會默認(rèn)位于左側(cè)的關(guān)鍵幀為這段動畫的起始關(guān)鍵幀，位于右側(cè)的關(guān)鍵幀為這段動畫的結(jié)束關(guān)鍵幀

7、。其次，F(xiàn)lash CS6會判斷兩關(guān)鍵幀中位置或旋轉(zhuǎn)角度發(fā)生變化的組合或元件，并計(jì)算變化的數(shù)值。最后，F(xiàn)lash CS6會在夾在兩關(guān)鍵幀中間的空白幀中生成由起始幀到結(jié)束幀逐漸變化的中間內(nèi)容。需要注意的是動畫補(bǔ)間的補(bǔ)間對象僅支持組合或元件，若對填充區(qū)或筆觸區(qū)執(zhí)行動畫補(bǔ)間，F(xiàn)lash CS6會先將填充區(qū)或筆觸區(qū)組合后再執(zhí)行動畫補(bǔ)間操作。執(zhí)行補(bǔ)間操作的具體方法是，將鼠標(biāo)光標(biāo)移動到兩個(gè)關(guān)鍵幀中間的任意一個(gè)過渡幀上，右擊鼠標(biāo)后在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間動畫”命令，如圖4-19所示。84.4.1 動畫補(bǔ)間創(chuàng)建動畫補(bǔ)間后在兩個(gè)關(guān)鍵幀中間會產(chǎn)生一條由左指向右的黑色箭頭，以表示這兩個(gè)關(guān)鍵幀中已經(jīng)生成了動畫

8、補(bǔ)間。要?jiǎng)h除兩關(guān)鍵幀中的動畫補(bǔ)間，需要將鼠標(biāo)光標(biāo)移動到兩個(gè)關(guān)鍵幀中間的任意一個(gè)過渡幀上右擊鼠標(biāo)，在彈出的快捷菜單中選擇“刪除補(bǔ)間”命令(見圖4-20)即可將這兩個(gè)關(guān)鍵幀之間的動畫補(bǔ)間刪除。刪除動畫補(bǔ)間后兩個(gè)關(guān)鍵幀中間的箭頭會自動消失，F(xiàn)lash CS6會將各個(gè)過渡幀中的內(nèi)容清除。在某些特殊情況下，F(xiàn)lash CS6會創(chuàng)建動畫補(bǔ)間失敗，例如當(dāng)用戶在一個(gè)關(guān)鍵幀和一個(gè)空白關(guān)鍵幀之間創(chuàng)建動畫補(bǔ)間時(shí)，F(xiàn)lash CS6會在創(chuàng)建動畫補(bǔ)間的兩個(gè)有問題的關(guān)鍵幀之間標(biāo)注一條黑色虛線表示創(chuàng)建動畫補(bǔ)間失敗，如圖4-21所示。94.4.2 形狀補(bǔ)間形狀補(bǔ)間的對象是未經(jīng)組合的筆觸區(qū)和填充區(qū)，F(xiàn)lash CS6會自動形成

9、兩關(guān)鍵幀之間筆觸區(qū)和填充區(qū)形狀和大小變化的過渡幀。如圖4-22所示，在時(shí)間軸的第1幀中繪制一個(gè)圓形，然后將第6幀轉(zhuǎn)換為空白關(guān)鍵幀，并在第6幀中繪制一個(gè)五角星形，之后在第1幀與第6幀之間創(chuàng)建形狀補(bǔ)間。Flash CS6會在第2、3、4、5幀中添加由圓形到五角星形的漸變圖形。而且形狀補(bǔ)間只能很好地支持一些簡單規(guī)則形狀間的補(bǔ)間動畫，對于那些不規(guī)則或比較復(fù)雜的規(guī)則圖形在進(jìn)行形狀補(bǔ)間時(shí)，F(xiàn)lash CS6會在過渡幀中產(chǎn)生一些出乎意料的圖形形狀，如圖4-23所示。在第1幀中繪制一個(gè)五角星形，在第6幀中繪制一個(gè)八角星形，它們之間的形狀補(bǔ)間會產(chǎn)生一些比較奇怪的圖形。為兩個(gè)關(guān)鍵幀添加形狀補(bǔ)間的方法大致與添加動畫

10、補(bǔ)間的方法相同，所不同的是在添加形狀補(bǔ)間后，F(xiàn)lash CS6會將在時(shí)間軸中添加形狀補(bǔ)間幀的背景顏色變?yōu)闇\綠色，并添加一條由起始幀到結(jié)束幀的黑色箭頭。104.4.2 形狀補(bǔ)間在時(shí)間軸面板的時(shí)間軸區(qū)域中提供了很多有關(guān)幀的編輯參數(shù)，如圖4-24所示。在時(shí)間軸左下角有一個(gè)“幀居中”圖標(biāo)，單擊該圖標(biāo)可以將時(shí)間軸移動到所有幀的中間位置上。它們的具體作用是讓用戶像真實(shí)使用半透明畫紙一樣，在編輯某一幀畫面的同時(shí)能看到位于該幀下層幀中的畫面。先前圓形到五角星形補(bǔ)間動畫的繪圖紙效果如圖4-25所示。 激活繪圖紙效果后，時(shí)間軸上方的播放頭兩側(cè)會出現(xiàn)繪圖紙效果范圍邊框，拖動該邊框可以調(diào)節(jié)繪圖紙效果的顯示范圍，如圖4

11、-26所示。114.5 遮 罩 層遮罩層能創(chuàng)造出類似于用透過望遠(yuǎn)鏡觀看事物的遮罩效果。遮罩效果分為遮罩層和被遮罩層。遮罩層相當(dāng)于望遠(yuǎn)鏡的圓形鏡桶，而被遮罩層相當(dāng)于用望遠(yuǎn)鏡所觀看的風(fēng)景。遮罩層遮蓋住被遮罩層中的內(nèi)容，只允許用戶通過遮罩層中指定的區(qū)域觀看被遮罩層中的內(nèi)容。如圖4-27所示要制作遮罩效果首先要?jiǎng)?chuàng)建兩個(gè)圖層，這兩個(gè)圖層一個(gè)作為遮罩層，另一個(gè)作為被遮罩層。創(chuàng)建圖層后將鼠標(biāo)光標(biāo)移動到位于上層的圖層上，右擊鼠標(biāo)后在彈出的快捷菜單中選擇“遮罩層”選項(xiàng)，將該圖層轉(zhuǎn)換為遮罩層。轉(zhuǎn)換后該圖層標(biāo)簽中的圖標(biāo)會變成圖標(biāo)，表示該圖層現(xiàn)在已經(jīng)轉(zhuǎn)換為遮罩層。將上層圖層轉(zhuǎn)換為遮罩層后，位于該層下層的圖層會自動換換

12、成該遮罩層的被遮罩層，并會向右側(cè)縮進(jìn)，表示從屬于遮罩層，如圖4-29所示。被遮罩層在圖層列表中的圖標(biāo)為。124.5 遮 罩 層刪除遮罩層和被遮罩層的方法與刪除普通圖層的方法相同。當(dāng)制作好遮罩層和被遮罩層后，可以將鼠標(biāo)光標(biāo)移動到遮罩層的圖層列表上右擊鼠標(biāo)，在彈出的快捷菜單中選擇“顯示遮罩”選項(xiàng)。這樣Flash CS6會將遮罩層和所有被遮罩的圖層鎖定，并顯示遮罩后的效果。用戶也可以手動將遮罩層和所有被遮罩的圖層鎖定，當(dāng)這些圖層被鎖定后就會激活遮罩層的遮罩效果。其實(shí)，遮罩層功能還可以替代很多基本工具實(shí)現(xiàn)的效果，而且用遮罩層制作的效果通常會優(yōu)于用基本工具制作的效果，因?yàn)橛谜谡謱又谱鞯男Ч扔没竟ぞ?/p>

13、制作的效果更自然、更方便。134.6 引 導(dǎo) 層引導(dǎo)層是一個(gè)與遮罩層同樣重要的概念，制作Flash動畫的成功與否很大程度上取決于引導(dǎo)層和遮罩層的應(yīng)用。引導(dǎo)層的作用就是引導(dǎo)動畫補(bǔ)間中補(bǔ)間對象的移動方式。創(chuàng)建引導(dǎo)層的方法與創(chuàng)建遮罩層的方法大致相同，先要在圖層列表中新建兩個(gè)圖層，其中一個(gè)圖層作為引導(dǎo)層，另一個(gè)圖層作為儲存起始關(guān)鍵幀和結(jié)束關(guān)鍵幀的動畫補(bǔ)間圖層(被引導(dǎo)層)。將鼠標(biāo)光標(biāo)移動到任意一個(gè)新建的圖層標(biāo)簽上，右擊鼠標(biāo)，在彈出的快捷菜單中選擇“引導(dǎo)層”選項(xiàng)，選擇后該圖層的圖標(biāo)會變成，表示該圖層已經(jīng)轉(zhuǎn)換為引導(dǎo)層，但該引導(dǎo)層中還未添加被引導(dǎo)層。用鼠標(biāo)將另一個(gè)圖層拖動到引導(dǎo)層下面，F(xiàn)lash CS6就會自

14、動將該圖層轉(zhuǎn)換為被引導(dǎo)圖層，轉(zhuǎn)換為被引導(dǎo)層的圖層圖標(biāo)不會發(fā)生變化，但引導(dǎo)層的圖標(biāo)會變?yōu)?，表示該引?dǎo)層中已經(jīng)包含一個(gè)或多個(gè)被引導(dǎo)層，如圖4-32所示。144.6 引 導(dǎo) 層如若要恢復(fù)Flash CS6為對象設(shè)定的直線運(yùn)動軌跡，則需要將含有動畫補(bǔ)間的被引導(dǎo)層拖動出引導(dǎo)層。如圖4-35所示，在引導(dǎo)層中繪制一個(gè)橢圓形，用橢圓形的上半部分弧線作為足球的運(yùn)動軌跡，并在被引導(dǎo)層中將起始關(guān)鍵幀和結(jié)束關(guān)鍵幀中的足球放置在指定位置上。但因?yàn)闄E圓下半部分的弧線長度小于上半部分的弧線長度，所以最終足球會沿橢圓下半部分的弧線軌跡運(yùn)動。在制作含引導(dǎo)層的動畫補(bǔ)間運(yùn)動時(shí)，工作區(qū)中的引導(dǎo)軌跡是可見的，這是為了方便用戶準(zhǔn)確地制作

15、各個(gè)運(yùn)動對象的運(yùn)動軌跡，當(dāng)把Flash發(fā)布為SWF文件后，F(xiàn)lash Player會自動隱藏引導(dǎo)層中的運(yùn)動軌跡，不會影響動畫效果。154.6 引 導(dǎo) 層實(shí)例練習(xí)：制作流星閃過星空的動畫效果知識要點(diǎn)：圖層和時(shí)間軸的基本應(yīng)用 難易程度：重點(diǎn)難點(diǎn)：合理使用圖層1) 新建Flash CS6文檔2) 制作天空和地面背景3) 制作星空效果4) 制作流星5) 制作背景樹和整理圖層參見教材P65164.6 引 導(dǎo) 層實(shí)例練習(xí)：制作星座圖知識要點(diǎn)：圖層、按鈕和動畫補(bǔ)間的使用 難易程度：重點(diǎn)難點(diǎn)：按鈕與影片剪輯的結(jié)合1) 新建Flash CS6文檔2) 制作背景星空3) 制作星座元件4) 制作星座5) 制作散射星效果6) 制作星座按鈕7) 添加星座及整理元件參見教材P71174.6 引 導(dǎo) 層實(shí)例練習(xí)：制作六擋汽車廣告知識要點(diǎn)