《網(wǎng)頁設計與網(wǎng)站建設》--第12章-Flash動畫制作基礎

1、第12章 Flash動畫制作基礎7/25/2022本章知識技能要點：場景、時間軸、層、關鍵幀、普通幀的概念工具箱面板、屬性面板的使用方法形狀補間和動作補間的概念和應用運動引導層的制作和應用遮罩層的制作和應用12.1 認識Flash12.1.1 Flash 8 簡介 Flash是Macromedia公司出品的二維動畫創(chuàng)作專業(yè)軟件，在計算機界的用途十分廣泛，包括網(wǎng)頁動畫制作，教學課件制作，小游戲制作和MTV制作等等。 Flash的前身是一款叫作“Future Splash”的矢量動畫插件，它的成長經(jīng)歷了Flash 4、Flash 5、Flash MX、Flash MX 2004和最新推出的Flas

2、h 8幾個版本。Adobe flash cs4是Flash的最新版本12.1 認識Flash12.1.3 Flash文件的類型FLA文件：包含F(xiàn)lash文檔的媒體、時間軸和腳本等基本信息的文件。是設計者在Flash中使用的主要文件。SWF文件：在Web頁中顯示的文件。是FLA文件的壓縮版本。12.1 認識Flash12.1.4.2 Flash 8 的工作界面進入Flash 8 以后，顯示Flash 8的默認工作界面，如圖示。12.1 認識Flash狀態(tài)欄-左側(cè)顯示著正在編輯的文件及內(nèi)容，如圖中顯示的正在編輯的是文件“未命名-1”的“場景1”。右側(cè)的兩個按鈕分別是“場景切換”按鈕和“元件切換”按

3、鈕。最右端是工作區(qū)百分比顯示窗口。時間軸-預設位置在狀態(tài)欄的下方，其左側(cè)是圖層編輯區(qū)，在此進行圖層的編輯；右側(cè)是幀編輯區(qū)，完成動畫的幀編輯。12.1 認識Flash場景舞臺-工作界面中央的白色區(qū)域就是場景舞臺（也稱工作區(qū)），是顯示和編輯動畫對象的主要區(qū)域。面板組-是特定的功能單位的集合，包含某一特定的功能，如動作面板、屬性面板、混色器面板、對齊面板和庫面板等。設位置在狀態(tài)欄的下方，其左側(cè)是圖層編輯區(qū)，在此進行圖層的編輯；右側(cè)是幀編輯區(qū)，完成動畫的幀編輯。12.1.5 Flash中的一些基本概念 12.1.5.1 幀 幀是動畫的基本單元，F(xiàn)lash動畫就是許多連續(xù)幀的內(nèi)容連續(xù)播放構(gòu)成的，一幀就相

4、當于電影膠片中的一格。 時間軸上的幀編輯區(qū)中橫向排列的小方格就是幀，處于自然狀態(tài)下沒有進行任何操作的幀稱為“空白幀”，每一幀對應的上方的數(shù)字是該幀的編號。幀編輯區(qū)中的紅色豎線是播放磁頭，播放磁頭所在的幀就是當前所編輯的幀。12.1.5.1 幀F(xiàn)lash中有兩類重要的幀，即為“靜態(tài)幀”和“關鍵幀”。靜態(tài)幀：不參與任何動畫效果的幀稱為靜態(tài)幀，（靜態(tài)幀也稱作普通幀）。關鍵幀：定義一個動作的起始狀態(tài)和終止狀態(tài)的幀稱為關鍵幀。其中沒有添加任何對象，只作為一個關鍵點存在，稱為空白關鍵幀。關鍵幀在時間軸上的顯示是在其間有一個黑色小圓點（空白關鍵幀是一個小圓圈）。12.1.5.2 元件在Flash中，元件是整

5、個動畫的基礎元件有三種類型：圖形元件：最常用，用于創(chuàng)建靜態(tài)元件，并且可以引用外部的圖片來作為元件。按鈕元件：用于創(chuàng)建動態(tài)交互按鈕的形式，即在鼠標處于不同的狀態(tài)產(chǎn)生不同的響應。電影剪輯元件：是動態(tài)視頻剪輯元件 ，不同于上面兩種形式的是它有自己獨立的時間軸，是動態(tài)的元件形式。12.1 認識Flash12.1.5.3 庫庫是用于管理元件的地方，元件制作完畢后都會自動保存到庫中。打開庫面板可以查看、選擇和使用元件。可以通過選擇“窗口”“庫”命令來實現(xiàn)對元件的調(diào)用，也可以通過選擇“文件”“導入庫”命令來將外部的元件導入指定的圖片庫中。12.1.5.4 層將不同的對象放置在不同的圖層中，這樣在修改其中一個

6、對象時不會影響到其他的對象。圖層可以形象地理解為透明的玻璃紙，不同的對象繪制在不同的透明紙上，它們相互重疊以顯示整體的內(nèi)容，但在修改某一對象時其他對象不受影響。對于圖層的操作在時間軸的“圖層編輯區(qū)”中實現(xiàn)。12.1 認識Flash12.1.5.5 場景Flash中的場景就如同電影里的分鏡頭，一個影視作品不可能僅僅在同一個場景內(nèi)完成，在不同的場景中相互切換，能使得作品具有更加豐富的感染力。Flash也是如此。一個Flash文檔允許創(chuàng)建許多個場景，作者可以在不同的場景中編排不同的內(nèi)容，播放時可以任意控制各個場景先后順序。12.1.5.6 幀頻率幀頻率（fps）就是動畫的播放速度，指每秒播放的幀的多

7、少。Flash默認的幀頻率是12.0 fps。12.1.6 Flash的基本操作 “逐幀動畫”，是指每一幀的內(nèi)容都與其前一幀有所不同，以此實現(xiàn)動畫的效果。下面詳細介紹一個眼球會轉(zhuǎn)動的小貓動畫制作步驟：（1）打開Flash 8 ，由“文件”菜單“導入”“導入到庫”，選擇一幅圖片導入到庫中。此時的庫面板中就可以看到一個位圖元件，其名稱為“cat.jpg”,元件的類型是“位圖”。如圖所示。（2）選中庫面板中的“cat.jpg”元件，直接從庫面板中拖拽到舞臺。然后點擊工具箱面板中的“任意變形”工具，在舞臺上改變圖像的大小與場景的大小相同。（3）此時的圖片位于文檔的“圖層1”當中，它只有一個幀，如果計劃

8、本動畫共需要60幀，就在時間軸的“圖層1”中第60幀處右鍵單擊，在展開的快捷菜單中選擇“插入幀”命令，就將第一幀的內(nèi)容復制了60幀。時間軸上從第1幀到第60幀呈現(xiàn)一條灰色的陰影。如圖示。（4）單擊時間軸右側(cè)的圖層編輯區(qū)右下端的“插入圖層”按鈕，為本場景添加一新的“圖層2”。（5）現(xiàn)在開始繪制小貓的眼睛。即編輯圖層2的第1幀（在圖層2的第1幀上單擊，便選中了它）。單擊工具箱面板中的“橢圓工具”，在屬性面板上修改“橢圓工具”的屬性為：輪廓線為無色，填充色為黑色，如圖。（6）使用上述設置的橢圓工具，在圖層2的第1幀上繪制小貓的眼睛，讓小貓眼框的黑眼球最開始出項在眼眶里的最左端。（7）右鍵單擊圖層2的

9、第2幀，在彈出的快捷菜單里選擇“插入關鍵幀”命令，然后在這一關鍵幀上修改小貓眼框的黑眼球的位置向右偏移少許。（8）反復重復步驟（7），不斷改變小貓眼框的黑眼球的位置，讓其移動到最右端后再向左偏移，形成眼球左右移動的效果。如圖。（9）全部完成了56個關鍵幀的制作之后，該動畫的制作就結(jié)束了。此時的時間軸如下圖。點擊“控制”菜單“測試影片”命令，便可以預覽動畫的播放效果，可見小貓的眼睛在左顧右盼。（10）關閉預覽窗口。點擊“文件”菜單“保存”命令，將文檔保存為“.fla”文件，這種文件可以用Flash打開，允許重新編輯，但是不能在網(wǎng)頁中使用。（11）點擊“文件”菜單“導出”“導出影片”命令，就會生成

10、一個“.swf”文件，這種文件不可以用Flash打開，也不允許重新編輯，但是能夠插入到網(wǎng)頁中，或者直接用瀏覽器預覽。 12.2 形狀、文字和顏色的應用12.2.1 常用繪圖工具的使用工具箱面板中常用的繪圖工具如圖示。其中包括：（1）葉子（2）月亮（3）氣球（4）花朵（5）透視文字（6）波浪文字12.2.2 文字和顏色的使用12.2.2.1 文本工具的使用選擇繪圖工具箱中的文本工具之后，在舞臺下方的屬性面板中設置文本的屬性，然后在場景中插入文字的位置單擊，即可輸入文本。1）編輯文本單擊箭頭選擇工具，將文本框選中，修改其屬性，可以改變字體、字體尺寸、顏色、對齊方式、字符間距等。選擇任意變形工具，可

11、以對文本進行自由變換，其效果如圖示。 12.2 形狀、文字和顏色的應用（2）將文字改變?yōu)樾螤钊绻胍獙ξ淖值募毠?jié)進行更為自由的改變，就要把文字轉(zhuǎn)換為形狀，然后就可以象編輯形狀一樣來編輯文字了。具體的步驟是：1）使用箭頭工具選中文本，然后選擇“修改”菜單“分離”命令，將文本打散，其效果如圖（1）和（2）所示。文字塊分離成單個文字之后，可以對其逐個進行編輯，如圖（3）。 12.2 形狀、文字和顏色的應用（1） （2） （3）2）選中對上述文字再一次選擇“修改”菜單“分離”命令，這時文字對象轉(zhuǎn)換成為形狀對象。此后所有編輯形狀的方法都可以使用在這些文字上了。如圖。 12.2 形狀、文字和顏色的應用（3

12、）將文字其修改為空心文字。使用墨水瓶工具點擊文字的輪廓，就給文字加上輪廓線。如圖（1）。在選中文字中間的填充顏色，按“Del”鍵將其刪除。便得到圖（2）的空心文字效果。 （1） （2） 12.2 形狀、文字和顏色的應用12.3.1 補間動畫的概念作者在制作動畫時只負責制作第一個關鍵幀和最后一個關鍵幀，由Flash自動生成這兩個關鍵幀之間的過渡部分的幀，這些幀的內(nèi)容是參照著上一幀的內(nèi)容向下一幀的內(nèi)容逐漸的過渡變化的。這樣產(chǎn)生動畫稱為補間動畫。補間動畫包括：運動補間動畫和形狀補間動畫兩種。在此先介紹形狀補間動畫。 12.3 形狀補間動畫12.3.2形狀補間動畫的制作步驟（1）新建一Flash文檔，

13、在圖層1的第1幀的舞臺中央畫一個矩形，如圖。 12.3 形狀補間動畫（2）右鍵單擊時間軸圖層1的第20幀，在彈出的快捷菜單里選擇“插入關鍵幀”命令。此時第1幀的內(nèi)容自動被復制了20幀，將第20幀的矩形刪除，再用橢圓工具添加一個圓形。如圖。 12.3 形狀補間動畫（3）單擊時間軸上第120幀之間的任意一幀，在屬性面板的“補間”下拉列表中選擇“形狀”。此時時間軸的第120幀之間就會顯示為一條由第1幀指向第20幀的實線箭頭。如圖。 12.3 形狀補間動畫（4）完成形狀補間動畫制作。點擊“Ctrl+Enter”鍵預覽動畫的效果。 12.3 形狀補間動畫12.4.1 元件和實例的概念1） 元件：元件是可

14、以在整部影片中反復使用的特殊對象。它可以是形狀、按鈕或影片剪輯，在Flash中只創(chuàng)建一次，然后自動成為當前文檔的庫的一部分。每個元件都有自己的時間軸、場景及圖層。2）實例：實例是對原元件的引用，其屬性可以單獨設置，外觀和動作無需和原元件相同。對元件進行編輯后，該元件的每個實例都會做相應的更新。 12.4 元件、實例與運動補間動畫12.4.2 新添庫元件新添一個庫元件的方法有以下四種：方法一：把場景舞臺中的現(xiàn)有元素轉(zhuǎn)換成元件可以把場景舞臺中已經(jīng)編輯好的元素轉(zhuǎn)換成庫元件，以便后來多次使用，步驟是：（1）選中工作區(qū)中的某個元素。（2）選擇“修改”“轉(zhuǎn)換成元件”命令，這時彈出“轉(zhuǎn)換為元件”對話框，輸入

15、元件的名稱并選擇元件類型。如圖。 12.4 元件、實例與運動補間動畫（3）選擇“窗口”“庫”命令，打開庫面板，即看到剛才建立的新元件。方法二：創(chuàng)建新元件可以直接在庫中創(chuàng)建一個新的庫元件，具體步驟是：（1）選擇“插入”“新建元件”命令，將彈出“創(chuàng)建新元件”對話框。或者單擊庫面板右下方的“新建元件”按鈕，也可以打開“創(chuàng)建新建元件”對話框。輸入元件的名稱，選擇元件的類型，單擊“確定”按鈕后，即可新建一元件。 12.4 元件、實例與運動補間動畫（2）此時狀態(tài)欄上顯示的“元件1”，即表示當前的舞臺工作區(qū)是編輯“元件1”的狀態(tài)。如圖。 12.4 元件、實例與運動補間動畫（3）如同編輯一般的動畫過程一樣，使

16、用繪圖工具繪圖或?qū)朊襟w等方法建立元件的內(nèi)容。（4）當建完元件后單擊圖中狀態(tài)欄中的“場景1”，就可以返回到場景編輯狀態(tài)。方法三：將動畫轉(zhuǎn)換為影片剪輯，具體步驟是：（1）右鍵單擊時間軸任意一個單元格，在彈出的快捷菜單中選擇“選擇所有幀”。如圖。 12.4 元件、實例與運動補間動畫（2）右鍵單擊這些選中的幀，在彈出的快捷菜單中選擇“復制幀”命令，或者直接選擇“編輯”菜單“復制幀”命令，即可將所有選中的幀都復制到剪貼板上。（3）選擇“插入”“新建元件”命令，在彈出的對話框中輸入元件名稱，選擇影片剪輯作為元件的類型，然后單擊“確定”按鈕，則舞臺切換到元件編輯模式，用戶可以編輯元件。 12.4 元件、實

17、例與運動補間動畫（4）單擊時間軸的第一幀，并選擇“編輯”“粘貼幀”命令，將剛才復制到剪貼板上的動畫粘貼進來；或者在第一幀上右擊，在彈出的快捷菜單中選擇“粘貼幀”，也可將動畫粘貼到元件編輯模式舞臺上。如圖。 12.4 元件、實例與運動補間動畫（5）庫面板中新添影片剪輯元件2，點擊庫面板中的播放按鈕，可以在庫里預覽影片剪輯元件的動畫效果。如圖。 12.4 元件、實例與運動補間動畫（6）選擇“編輯”菜單“編輯文檔”命令，回到電影編輯模式；或者單擊舞臺左上方的場景編輯按鈕，返回場景編輯狀態(tài)。方法四：復制元件，具體步驟是：（1）在庫面板中選擇一個元件。（2）右鍵單擊該元件，從彈出的菜單中選擇“直接復制”

18、命令，這時會彈出“直接復制元件”對話框，如圖。輸入新元件的名稱并選擇所復制的元件的類型。確定后庫窗口會增加一個與被復制元件一樣的新元件，只需要在元件編輯模式下對它進行一定的修改就可以成為一個新元件了。 12.4 元件、實例與運動補間動畫 運動補間動畫用于制作對象運動的效果。給對象指定開始狀態(tài)和終止狀態(tài)，由計算機自動生成中間的運動過程，實現(xiàn)對象從開始的姿態(tài)運動到終止姿態(tài)的效果。另外，使用運動補間動畫的基本過程，通過對各種參數(shù)的設置，可以制作變形效果，旋轉(zhuǎn)效果和淡入、淡出效果等等。 12.4 元件、實例與運動補間動畫在此，用一個行駛的車輛的動畫實例，介紹元件和運動補間動畫的制作過程。制作步驟如下：

19、（1）新建一Flash文檔，首先制作一個轉(zhuǎn)動的車輪的影片剪輯元件。由“插入”菜單“新建元件”，打開“創(chuàng)建新元件”對話框，將名稱改為“車輪”，類型選擇“影片剪輯”，點擊“確定”，進入影片剪輯元件“車輪”的編輯狀態(tài)。（2）點擊工具箱里的橢圓工具，在屬性面板設置其屬性為：筆觸顏色為黑色；粗細為10像素；填充顏色為灰色；線條形狀為實線。 12.4 元件、實例與運動補間動畫（3）按下Shift鍵，在舞臺中間畫一個正圓形，用工具箱里的“選擇工具”，將此正圓形全部選中，由“窗口”菜單“對齊”，打開“對齊”面板，如左下圖。點擊其中的“相對與舞臺”，在點擊其中的“水平中齊”按鈕和“垂直中齊”按鈕，將正圓形置于舞

20、臺的正中心。結(jié)果如右下圖。舞臺上的十字標記表示舞臺的正中心位置。 12.4 元件、實例與運動補間動畫（4）使用工具箱里的直線工具（筆觸粗細修改為8像素），穿過圓心畫兩條直線。如圖。 12.4 元件、實例與運動補間動畫（5）選中全部圖形，由“修改”菜單“組合”命令，將所繪制的圖形進行組合。 （6）右鍵單擊時間軸的第30幀，選擇“插入關鍵幀”命令，將組合的圖形復制到30幀。單擊時間軸第1幀第30幀之間的任意幀，在屬性面板上將“補間”設置為“動畫”；“旋轉(zhuǎn)”設置為“順時針”；“旋轉(zhuǎn)數(shù)”設置為2次。如圖。 12.4 元件、實例與運動補間動畫 （7）此時時間軸的第130幀之間就會顯示為一條由第1幀指向第

21、30幀的實線箭頭，與形狀補間不同的是，實線箭頭的背景顏色是灰色的，而形狀補間的背景顏色是淺綠色的。點擊庫面板中的播放按鈕，可以預覽車輪的旋轉(zhuǎn)效果。（8）現(xiàn)在開始制作第2個元件“車”。由“插入”菜單“新建元件”，打開“創(chuàng)建新元件”對話框，將名稱改為“車”，類型選擇“影片剪輯”，點擊“確定”，進入影片剪輯元件“車”的編輯狀態(tài)。（9）使用繪圖工具在舞臺中繪制車輛。使用選擇工具放在繪制的形狀邊緣拖動，可以任意改變所繪制的形狀，最后得到如圖所示的車輛外形。 12.4 元件、實例與運動補間動畫（10）從庫中將影片剪輯元件“車輪”拖拽到舞臺中，用任意變形工具改變車輪的大小使其適合于車身的大小，然后再復制同樣

22、的一個車輪前后各放置一個。如左圖。至此，完成兩個庫元件的制作。庫面板如右圖。 12.4 元件、實例與運動補間動畫（11）點擊狀態(tài)欄中的“場景1”，返回到場景的編輯狀態(tài)。在第1幀上將元件“車”拖拽到場景的右下方。（12）右鍵單擊時間軸的第25幀，在彈出的快捷菜單中選擇“插入關鍵幀”，將“車”元件復制到25幀，然后將“車”元件移動到舞臺的左下方。單擊時間軸第1幀第25幀之間的任意幀，在屬性面板上將“補間”設置為“動畫”；“旋轉(zhuǎn)”設置為“自動”。（13）按Ctrl+Enter鍵預覽動畫的效果。保存“car.fla”文件，導出“car.swf”影片。 12.4 元件、實例與運動補間動畫 12.5 Fl

23、ash中層的應用12.5.1 圖層的概念圖層是時間軸的一部分，按照堆疊順序一層層地相互疊加在一起，用于組織文檔中的插圖。在一個圖層上編輯和繪制圖層時，不會影響其他圖層上的對象。Flash中的圖層有以下三種：普通圖層。引導層：普通引導層和運動引導層。遮罩層：用于制作蒙版效果。12.5.2 圖層的應用12.5.2.1 創(chuàng)建新圖層單擊時間軸底部的“插入圖層”按鈕，如圖。或者由選擇“插入”菜單“時間軸”“圖層”命令。或者右擊時間軸中的一個圖層名稱，然后從快捷菜單中選擇“插入圖層”命令。 12.5 Flash中層的應用12.5.2.2 圖層的操作顯示或隱藏圖層及文件夾:單擊時間軸中圖層或文件夾名稱右側(cè)的

24、“眼睛”圖標。查看圖層上內(nèi)容的輪廓：單擊圖層名稱右側(cè)的“輪廓”圖標。選擇圖層：在時間軸中單擊圖層或文件夾的名稱；在時間軸中單擊要選擇的圖層的任意一個幀；在舞臺中選擇要選擇的圖層上的一個對象；按住Shift鍵在時間軸中單擊連續(xù)的幾個圖層或文件夾；按住Ctrl鍵單擊時間軸中幾個不連續(xù)的圖層或文件夾。 12.5 Flash中層的應用重命名圖層：雙擊時間軸中圖層或文件夾的名稱，使其進入編輯狀態(tài)，然后輸入新名稱；或者在“圖層屬性”對話框（“修改”菜單“時間軸”“圖層屬性”命令）中輸入新名稱。復制圖層：選擇要復制的圖層或圖層文件夾，選擇“編輯”菜單“時間軸”“復制幀”命令，然后插入一個新層或新文件夾，選擇

25、“編輯”菜單“時間軸”“粘貼幀”命令。鎖定圖層：單擊“鎖定”列或“鎖定”圖標。 12.5 Flash中層的應用刪除圖層：選定要刪除的圖層，單擊時間軸中的“刪除圖層”按鈕；或者將圖層或文件夾拖到“刪除圖層”按鈕上；右擊圖層或文件夾的名稱，然后從快捷菜單中選擇“刪除圖層”命令。改變圖層順序：選擇一個或多個要改變其順序的圖層，然后上下拖動它到時間軸中其他圖層上方或下方的所需位置。設置圖層屬性：使用“圖層屬性”對話框，可指定圖層或圖層文件夾的名稱、狀態(tài)、類型、輪廓顏色、圖層高度等。 12.5 Flash中層的應用12.5.2.3 運動引導層運動引導層用于繪制使對象沿其運動的路徑。鏈接到運動引導層的常規(guī)

26、圖層稱為被引導層。1.創(chuàng)建運動引導層：選擇“插入”“時間軸”“運動引導層”命令或單擊時間軸窗口左下角的“添加運動引導層”按鈕。如圖，圖層2是引導層，圖層4是被引導層，圖層1是普通圖層。 12.5 Flash中層的應用2.建立多個普通圖層與運動引導層的關聯(lián)：將要與運動引導層相關聯(lián)的常規(guī)圖層拖到運動引導層正下方。在運動引導層下方選擇一個圖層，選擇“修改”“時間軸”“圖層屬性”命令，在彈出的“圖層屬性”對話框中選擇“類型”選項組中的“被引導”選項。如圖。 12.5 Flash中層的應用3.取消與運動引導層的關聯(lián)：將選定層拖到運動引導層或其他常規(guī)圖層上面。在“圖層屬性”對話框中選擇“類型”選項組中的“一般”選項。12.5.2.4 運動引導層應用舉例制作一皮球延特定軌跡運動的動畫，步驟如下：（1）新建一個Flash文檔，制作一個影片剪輯元件轉(zhuǎn)動的皮球，具體方法可參照車輪的制作方法。 1