網頁設計與制作 第16章：動畫元件制作和外部素材的導入

1、第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作北京師范大學出版北京師范大學出版第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入 本章知識要點本章知識要點 Flash CS4圖層及圖層中對象基本操作圖層及圖層中對象基本操作 Flash CS4 動畫元件的制作動畫元件的制作 各種外部素材的導入各種外部素材的導入 聲音素材的編輯聲音素材的編輯網頁設計與制作網頁設計與制作16.1 flash CS4中的圖層中的圖層網頁設計與制作網頁設計與制作Flash中的圖層就好比一張張透明的紙。如果我們在制作動畫時，所有的對象都放在一起，就很難控制和修

2、改各個動畫對象，而利用不同對象放到不同圖層中，就好像我們在張張透明的紙上分別繪制對象，對象在不同的圖層中進行操作，然后再將它們按一定的順序進行疊加，各圖層的操作相互獨立，互不影響。這樣就能更加靈活的制作動畫，例如只要修改背景層或者動畫中的任意一層的對象，就可能做出完全不同的動畫效果來。還有，可以把圖像和聲音放到不同的圖層中，這樣在編輯時也可以很容易的找到它們。要Flash中，當新建動畫時，默認只有一個圖層，Flash允許根據動畫的需要新建多個圖層，同時還有刪除層、鎖定層、隱藏層等操作。Flash圖層位于時間軸面板的左側，如圖16-1所示。在最頂層的對象將始終顯示在最上方，圖層的排列順序決定了舞

3、臺中對象的顯示情況。如果圖層過多，可以通運上下拖動滑動條來查看被隱藏了的層。 圖16-1 “圖層”面板 16.1.1圖層的創(chuàng)建與刪除圖層的創(chuàng)建與刪除網頁設計與制作網頁設計與制作默認情況下，Flash文檔僅有一個圖層，默認圖層名為“圖層1”，在動畫的制件過程中，用戶可以根據需要創(chuàng)建和刪除圖層。注：Flash圖層面板左下角按鈕中有一個“文件夾”按鈕，其功能是將圖層按樹形進行組織，可以將多個圖層像window中的目錄樹那樣放到同一個圖層文件夾中，文件夾也可以進行嵌套。(1). 創(chuàng)建圖層創(chuàng)建圖層圖層的創(chuàng)建方法有三個：按鈕創(chuàng)建：在Flash圖層面板左下角按鈕中單擊“新建圖層”或者“文件夾”，即可插入一個

4、新的圖層。菜單命令：選擇“插入時間軸圖層（文件夾）”命令，即可插入一個新的圖層。通過在右鍵菜單：在時間軸左邊的“圖層”面板處單擊右鍵，從彈出的快捷菜單中選擇“插入圖層（文件夾）”即可。(2). 刪除圖層刪除圖層圖層的刪除方法很簡單，首先選中要刪除的圖層，在Flash圖層面板左下角按鈕中單擊“刪除圖層”，或者選中要刪除的圖層，單擊右鍵，從彈出的快捷菜單中選擇“刪除圖層”即可。16.1.2圖層的基本操作圖層的基本操作網頁設計與制作網頁設計與制作(1).圖層重命名圖層重命名在新建圖層和文件夾是軟件會自動為其命名，為了方便管理，用戶可以根據動畫的需要對圖層和文件夾進行重命名，方法很簡單，選中想要重命名

5、的圖層或文件夾，快速雙擊，即進入編輯狀態(tài)可以輸入新的名字，然后按回車或在其它單擊鼠標即可完成重命名操作。(2).圖層選擇圖層選擇選擇圖層或文件夾是編輯的基本操作，其作用就是激活該層，方法如下。在圖層面板上單擊該層即可。在時間軸上單擊某一幀也會選中一個層。在工作區(qū)中選中某一對象，也會選中該對象所在的層。對于選擇多個連續(xù)或不連續(xù)的對象時，需要借助輔助鍵。按Shift鍵單擊第一個圖層和最后一個圖層，將選中兩個圖層之間所有的連續(xù)圖層按Ctrl鍵同時單擊要選擇的圖層，就可以選中不連續(xù)的圖層。(3).圖層順序的調整圖層順序的調整在時間軸上，圖層是自上而下的順序進行添加的，有時需要根據動畫的需要調整圖層的順

6、序，用戶可以通過拖動的方法更改圖層 的順序。16.1.2圖層的基本操作圖層的基本操作網頁設計與制作網頁設計與制作（4）.顯示或隱藏圖層顯示或隱藏圖層在默認情況下，圖層里的對象是顯示狀態(tài)，有時根據制作動畫過程中需要暫時隱藏某個圖層里的對象，此時就可以將某個或某些圖層進行隱藏，同時在發(fā)布的時候，也可以選擇是否要選擇隱藏層。方法是單擊“圖層”面板右上角的顯示或隱藏圖層按鈕，就可以顯示或隱藏全部圖層里的內容，此時所有圖層的右側都有一個按鈕，表示該層內容被隱藏，如果要顯示該層的內容，只需要單擊該按鈕，按鈕變?yōu)?，即可顯示該層的內容，如圖16-2。如果要隱藏某一層的內容，只需要單擊按鈕， 按鈕變?yōu)椋涂梢噪[

7、藏該層的內容。 圖16-2 顯示/隱藏層16.1.2圖層的基本操作圖層的基本操作網頁設計與制作網頁設計與制作（5）.鎖定圖層鎖定圖層默認情況下，Flash圖層是處于解鎖狀態(tài)的。鎖定一個層，目的是當編輯某一個層時，不影響到其它層對象的設置，如當兩個層中的對象在舞臺上有部分重疊時，就可以鎖定其它層，對未鎖定的層進行編輯。同隱藏層一樣，當單擊“層面”板右上角的 鎖定按鈕時，就將所有的圖層都鎖定，如上圖16-3所示。如果要解鎖某個層，只要單擊該層的右側的 按鈕，變?yōu)?，即解鎖成功，可以對該層進行編輯了，如上圖16-4所示。圖16-3 鎖定圖層 圖16-4 解鎖當前層 16.2 圖層中對象的基本操作圖層

8、中對象的基本操作網頁設計與制作網頁設計與制作在Flash中繪制對象時，當選中任意一個繪制工具時，在工具箱的下面都有一個選項【對象繪制】按鈕 ，選擇了【對象繪制】 按鈕繪制的圖形都會自動轉換為一個“組”，而不是矢量圖形的點陣式圖，此時繪制的每個對象就是一個“組”對象，對象相互獨立，不會被同層的相互重疊的對象剪裁掉，但仍然是一個給制的對象，如圖16-5和16-6效果所示。圖16-5 沒有選定“對象繪制”按鈕繪制并移動對象 圖15-6 選定“對象繪制”按鈕繪制并移動對象 16.2 圖層中對象的基本操作圖層中對象的基本操作網頁設計與制作網頁設計與制作在Flash中繪制對象時，當選中任意一個繪制工具時，

9、在工具箱的下面都有一個選項【對象繪制】按鈕 ，選擇了【對象繪制】 按鈕繪制的圖形都會自動轉換為一個“組”，而不是矢量圖形的點陣式圖，此時繪制的每個對象就是一個“組”對象，對象相互獨立，不會被同層的相互重疊的對象剪裁掉，但仍然是一個給制的對象，如圖16-5和16-6效果所示。圖16-5 沒有選定“對象繪制”按鈕繪制并移動對象 圖15-6 選定“對象繪制”按鈕繪制并移動對象16.2.1 對象的組合與合并對象的組合與合并網頁設計與制作網頁設計與制作16.2.1 對象的組合與合并對象的組合與合并(1). (1). 組合對象與取消組合組合對象與取消組合對象的組合是為了方便操作，將多個對象組合成一個整體，

10、形成一個組，就可以對這個組合體一起進行調整等操作，同時可以根據動畫制作的需要，將組合取消，使組合對象變?yōu)閭€體，如圖16-5所示 。組合的方法：首先選中要組合的對象。選擇“修改組合”或者是按下Ctrl+G鍵對象組合的取消：選中要取消的組合對象 選擇“修改取消組合”或是按下Ctrl+Shift+G圖16-7 對象的組合與取消 圖16-8 “合并對象”菜單項 16.2.1 對象的組合與合并對象的組合與合并網頁設計與制作網頁設計與制作(2). (2). 合并對象合并對象當在同一圖層中繪制對象時，選中工具箱下面的選項【對象繪制】按鈕 進行繪制的對象，還可以使用“修改合并對象”菜單項如上圖16-8，來對選

11、中的對象進行合并，效果如下圖16-9所示。聯合：可以將舞臺中的圖形進行組合。交集：合并對象重疊的部分。打孔：類似與咬合，當圖形對象重疊時，以下方的對象為主，利用上方的對象的形狀在下方對象上“打孔”，保留下方圖形對象的其它部分。裁切：與“交集”類似，也是將重疊對象相交的地方保留下來，不同的地方是，“裁切”以下方的對象為主，保留的是下方的圖形對象，而“交集”保留的是上方的圖形對象圖16-9 原圖 聯合 交集 打孔 裁切 16.2.2 對象的疊放及合并對象的疊放及合并網頁設計與制作網頁設計與制作在同一個圖層中，在繪制對象時選中【對象繪制】按鈕 進行圖形的繪制，會看到，當繪制的圖形出現重疊時，后繪制的

12、對象會出現在先繪制的對象的上面，也就是說，在同一個層中，當若干對象堆疊在一起時，它們的排列順序是根據創(chuàng)建的先后順序排列的，即后繪制的對象會排在先繪制的對象的前面，而位于上面的對象會遮擋住后面的其它對象。對于使用【對象繪制】按鈕 選項繪制的對象，可能通過“修改排列”菜單中的命令項來調整每個組合對象的排列位置，如圖16-10所示。移至頂層：將選中的對象放到所有對象的最上面上移一層：將選中的對象在重疊的對象中向上挪一層下移一層：將選中的對象在重疊的對象中向下挪一層移至底層：將選中的對象放到所有對象的最下面 圖16-10 “排列”菜單 16.2.3 對象的對齊對象的對齊網頁設計與制作網頁設計與制作在制

13、作動畫時，有時需要對舞臺中的對象按照一定的順序進行排列和對齊，此時可以用鼠標去調整，但是不能做到精度很高排序，如居中等。此時就可以使用系統的【對齊工具】來完成。選擇“窗口對齊”命令，打開【對齊工具】面板，如圖16-11所示對齊：分別從水平和垂直上進行了對齊，即左、中、右和頂、中和底分布：按照對象的中心間距或者是邊緣間距進行分布，包括：頂部分布、水平中間分布、底部分布、左側分布、垂直中間分布、右側分布匹配大小：三個按鈕，指將選中的對象在大小上對高度或寬度進行統一尺寸，也可以高度和寬度同時統一尺寸。間隔：兩個按鈕使對象在水平或者垂直方向上保持相等的間距圖16-11 “對齊”面板及選項 16.2.3

14、 對象的對齊對象的對齊網頁設計與制作網頁設計與制作圖16-12 “頂部對齊 “垂直居中分布” “高度”匹配大小 16.2.4 對象的分離對象的分離網頁設計與制作網頁設計與制作Flash中對象的分離與取消組合不同，分離對象是指將整體的圖形對象打散,然后將打散的圖形對象作為一個可編輯的圖形進行編輯，如文本框、實例、位圖等，這樣做可以將減少該對象的大小，分離不同的對象將產生不同的作用。其操作方法就是：選擇菜單“修改分離”命令項，或者按Ctrl+B。（1）分離位圖當從外部導入位圖時，不能用繪制工具對其進行修改,使用了分離命令后，就可以對該位圖使用行繪圖工具進行操作。（2）分離實例當在舞臺中分離是圖形元

15、件實例時，軟件會切斷該實例與庫中元件的聯系，即庫中對元件的修改將不再影響舞臺中的該實例。如果在舞臺上分離的是一個影片剪輯實例時，軟件以當前幀為主，將當前幀中的對象保留為一個靜態(tài)圖形。16.3 flash cs4 中元件與實例中元件與實例網頁設計與制作網頁設計與制作Flash CS4中的元件，有的書中也叫符號，指可以重復使用的聲音、圖像、按鈕、動畫，所有元件都被保存在【庫】中。實例是指在舞臺中或者在另一個元件中的一個拷貝，實例的顏色、大小、以及功能可以在舞臺或嵌套的元件中從新設置。在Flash中，元件被分為三類，圖形元件、影片剪輯、按鈕。在Flash中創(chuàng)建元件，會自動被保存到庫中，當編輯修改元件

16、時，則所有該元件相關的實例都會受到影響，但是修改實例，不會影響元件。在制作動畫時，盡量使用元件，這樣不但可以減少文件的大小，同時也方便對實例進行修改，同時也可以加快動畫的在網頁中的播放速度，因為元件只需要通過瀏覽器下載一次。16.3.1 庫面板庫面板網頁設計與制作網頁設計與制作Flash的庫面板中，存放著所有的項目元件，同時在“庫”面板可以實現對元件的管理，如下圖16-13所示，在庫面板的左下角有四個按鈕 ，分別是：“新建元件按鈕”：可以新建任何一種類型的元件?！靶陆ㄎ募A”按鈕：可以建立文件夾，用文件夾來組織庫里的文件，就像windows目錄樹管理一樣?！皩傩浴卑粹o：單擊可以修改元件的類型“

17、刪除”按鈕：單擊可以刪除選中的元件。圖16-13 “庫”面板 圖16-14 “創(chuàng)建新元件”對話框 16.3.2 創(chuàng)建新元件創(chuàng)建新元件網頁設計與制作網頁設計與制作新建Flash文檔，進到入舞臺，就可以新建元件了，具體的方法有：（1）選擇“插入新建元件”，彈出如上圖16-14所示，選擇新建元件的類型，就可以進入元件的編輯模式下，此時就可創(chuàng)建所需要的元件內容，如圖16-15所示 。（2）也可打開“庫”面板中，單擊面板左下角的“新建元件”按鈕，來創(chuàng)建新的元件。其中類型有：圖形元件：使用靜態(tài)圖像的圖形元件，其內容可能是單副矢量圖形或是圖像等，也可以能重復使用的動畫片段，這些動畫和圖像可以在主時間軸上同步

18、工作，交互式控件和聲音將不能在圖形元件的動畫序列中工作；影片剪輯：則是一段動畫。影片剪輯有自己的多幀時間軸，這個時間軸同主影片的時間軸是相互獨立的。就像大的影片里有從小的影片，每個小的影片又是一個影片，可以包含自己的交互式動畫，聲音及其它的影片元件，你可把影片剪輯理解為一段動畫影片。16.3.2 創(chuàng)建新元件創(chuàng)建新元件網頁設計與制作網頁設計與制作按鈕:就是在交互作品中用來激發(fā)某一事件。這些按鈕可以響應鼠標的單擊、經過等操作，并激發(fā)該鼠標操作的某些事件。按鈕包括彈起、指針經過、按下、點擊四個狀態(tài)。圖16-15 元件編輯16.3.3 轉換元件轉換元件網頁設計與制作網頁設計與制作16.3.3 轉換為元

19、件轉換為元件在Flash中，除了可以創(chuàng)建新元件外，還可以將現有的舞臺對象轉換為元件，例如將第15章中的房子轉換為一個元件，如圖所示。（1）先在舞臺中選中該房子對象。（2）選擇“修改轉換為元件”，取名字為“房子”，就可以“庫”中看到該元件。如下圖16-16所示 。圖16-16 “轉換為元件” 16.4 時間軸與幀時間軸與幀網頁設計與制作網頁設計與制作16.4.1 時間軸時間軸在Flash中，時間軸是實現動畫的關鍵部分，時間軸控制了著Flash中動畫的播放順序及影片中元件的變化范圍，Flash中動畫的制作是通過時間軸面板進行操作的。在前面講解圖層時提到，圖層在時間軸窗口的左側，而時間軸及幀則在時間

20、軸窗口的右側，時間軸面板如圖16-17所示 ?？梢酝ㄟ^菜單“窗口時間軸”命令項來顯示或隱藏時間軸。圖16-17 “時間軸”面板16.4 時間軸與幀時間軸與幀網頁設計與制作網頁設計與制作在時間軸上面的紅色小矩形塊就是播放頭，可以用鼠標移動播放頭到時間軸上的任一幀開始播放動畫。時間軸的下方則是幀的狀態(tài)信息，通過這里，可以看到當前播放頭所在幀、播放幀的頻率、及播放到當前幀所需要的時間。16.2 幀幀網頁設計與制作網頁設計與制作16.4.2 幀幀幀是組成動畫的最基本的元素，動畫就是由一個個幀組成的，通過幀的連續(xù)播放就可以創(chuàng)建Flash動畫，其中每一幀代表了一個畫面。也可以這么說，制作Flash動畫的過

21、程就是對每一幀進行操作的過程，通過時間軸窗口的右側的可以對幀進行各作操作，最終制作出各種動畫。（1）幀的創(chuàng)建與刪除在Flash動畫中幀分為三種類型：普通幀、關鍵幀和空白關鍵幀，如圖16-18。默認情況下，一個新Flash文檔有一個圖層，一個空白關鍵幀。用戶可以根據動畫的實際需要創(chuàng)建各種類型的幀。關鍵幀：Flash動畫是在兩個幀之間創(chuàng)建軟件提供的動畫方式，這兩個生成圖像的幀就是關鍵幀普通幀：普通幀是不能編輯元件的，是指在由軟件創(chuàng)建動畫過程中由計算機自動生成的。空白關鍵幀：指的沒有內容的關鍵幀。16.4 幀幀網頁設計與制作網頁設計與制作圖16-18 各種幀各種顯示狀態(tài) 圖 16-19 插入幀幀的創(chuàng)

22、建方法非常簡單，在需要新建幀的圖層右側的幀面板中單擊鼠標：選擇“插入時間軸”。在下拉的菜單也可新建各咱類型的幀，如圖16-19所示。單擊鼠標右鍵，在彈出的下拉菜單中可以創(chuàng)建所需要的類型的幀，如圖16-20所示按快捷鍵F5（普通幀），或者F6(關鍵幀)。刪除幀時只需要選中該幀右鍵單擊，選“刪除幀”，如果只是要清除幀里的內容，而不刪除幀，則右鍵單擊，選“清除幀”即可。16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作16.5.1 圖形元件制作圖形元件制作本案例以制作一個花朵為示例，來示范在舞臺中圖形元件的使用。1、插入新建圖形元件名為花、插入新建圖形元件名為花1（1）圖層1（改名為“花”）圖層

23、，用橢圓工具，筆觸顏色禁止，填充色隨意，畫一橢圓。用選擇工具調整成漏斗狀花瓣，然后用放射狀填充，填充色：左色標#FFFFF,右色標#FC2EAA。然后用漸變工具進行調整，如下圖16-20所示。（2）用任意變形工具選中花辨把注冊點移至花瓣的中心，選擇“窗口變形工具”，在彈出的變形面板選擇“旋轉”并選擇約束按鈕，旋轉角度設為60 度，鼠標單擊變形面板右下角的“復制選區(qū)和變形”按鈕，復制并變形2 次，如圖所示16-21所示。圖16-20 調整橢圓為花瓣 圖16-21 復制花瓣為花朵 16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作2）單擊新建圖層增加圖層2，改名花蕊，再用橢圓工具畫一花蕊，放射

24、狀填充，左色標：#A2D580,中色標：#E3E260，右色標：#F196DF,用筆刷工具顏色選 #FFFF66 隨意點些小點，如圖16-22所示，花朵元件就制作好了：圖16-22花蕊的制作 2.2.插入新建元件花插入新建元件花2 2（1）圖層1第1幀，用橢圓工具，無筆觸，填充隨意，在場景里畫個大小合適橢圓，進行調整如扇形，進行放射性填充，顏色從左至右依次是, #FFFF66, #EE98DC， #E45FCA，用填充變形工具進行調整。如圖16-23所示。16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作圖16-23 花瓣的制作(2)用任意變形工具,選中花瓣,把注冊點移到花瓣的下面，然后選

25、擇“窗口變形”，彈出變形面板，選擇旋轉,輸入 72 度,在復制并應用變形按鈕上點 4 下.現在就有了 5 個花瓣,再對這 5 個花瓣稍微調整一下，全選中5個花瓣，對其進行組合，如圖16-24所示。16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作（3）、插入圖層2，在時間軸的第一層中選中當前幀，點右鍵“復制幀”，然后到剛才插入的圖層2中，點右鍵，選“粘貼幀”，將花瓣復制到當前位置,將圖層2拖動到圖層1的下方，然后用“選擇工具”選中第二層的花朵，將其向下向左微調，然后利用任變形工具對其進行縮放并進行旋轉，根據花的樣子調整到合適的位置。然后用同樣的辦法，制作其它層如花 3層,花 4層，花5層等

26、，可以根據情況，選擇新建多少個層。然后對各花圖層進行調整,顏色由里至外,由深到淺.如圖16-25圖所示。注：在調整下層的花朵時，可以將上層疊 的對象鎖定 圖 16-25 共朵的調整 16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作（4）、新插入一層，利用刷子工具，繪制花蕊，本例中花蕊的顏色是：#FFCC99,花蕊上的點的顏色是：#CC3399在花的中間沒有顏色的地方，放射填充,兩邊的顏塊顏色不變,用小號筆刷畫出花蕊,再畫些小點在花蕊上，如圖16-26所示，花朵元件就制作好了。圖 16-26 花朵的效果16.4.2 影片剪輯元件制作影片剪輯元件制作影片剪輯元件就是一段動畫，一個小影片。本案

27、例制作一個蝴蝶影片剪輯元件。（1）新建圖形元件，命名蝶身，畫輪廓，并進行線性填充，顏色從左至右依次為：#444444，#1F2669。如圖16-27所示。16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作圖16-27 蝴蝶身體的繪制及填充2）新建圖形元件，命名左翅，用【鋼筆工具】畫翅膀的輪廓，用【選擇工具】對其進行修改，將其調整為下圖所示16-28所示。填充顏色為左翅的上半部分為線性填充，填充顏色從左至右依次為：#FF9900,#FFCC00,#FEFE45,#FFFF99；左翅的下半部分的填充為放射性的填充，顏色從左至右依次為：#FDD32D,#FFCC00,#FEFE45,#32320

28、1,填充色板如圖16-所示，用工具調整顏色填充，其效果如圖16-28所示。16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作左翅上線性填充色板 左翅下放射狀填充色板 圖16-28 左翅元件的制作16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作3）在左翅元件上插入圖層2，用【線條工具】在左翅的上部繪制若干線段，線條的個數根據需要，這里繪制三條，并用【選擇工具】進行調整，線條的顏色為：#FF9900,在“顏色”面板中設置其透明度為80%，然后用橢圓工具繪制小圓形，填充設置為系統調色板中的 紅色球形填充，然后放置到如圖16-29所示的位置，最后將筆觸刪除，效果如圖。圖16-29 左翅斑點的

29、制作16.5 綜合案例綜合案例網頁設計與制作網頁設計與制作4）新建圖形元件，命名蝴蝶，從庫中拖入蝶身和左翅元件，把左翅復制，選擇“修改變形水平翻轉”，將左翅變?yōu)橛页幔M裝成蝴蝶如下圖16-30所示。圖 16-30 制作蝴蝶元件 （5）新建一個影片剪輯元件，取名為蝴蝶動畫。從庫中將剛才做好的蝴蝶元件拖動到該動畫元件中，此時在時間軸的第一個關鍵幀上，調整蝴蝶元件該剪輯的中心，然后選中第2幀，新建一個關鍵幀，且【任意變形工具】將蝴蝶元件壓扁一些，依次逐步增加關鍵幀，每一幀調整的越細膩，將來的動畫的流暢性越好，在這個案例中做5幀，如圖16-31所示。16.5 綜合案例綜合案例網頁設計與制作網頁設計與制

30、作注：在壓扁的時候一定要將變形中心移動到正中間，這樣兩個翅膀的縮進才會一致。圖16-31 制作蝴蝶動畫 圖16-32 蝴蝶動畫剪輯 （6）然后繼續(xù)插入第6個關鍵幀，此時將第4幀的內容復制到第6幀，第3幀的復制到第7幀，依次類推，最終復制完成。也可選中第1到第4幀，復制并從第6幀開始粘貼，然后選中第6幀到第9幀，對其進行翻轉幀操作，如圖16-32。至此一個蝴蝶扇動翅膀人影片剪輯動畫就做好了，你可以將做好的蝴蝶影片剪輯動畫元件放到在上一個案例中制作的花朵元件中，就可以制作出一個蝴蝶在花上飛動的動畫了 第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制

31、作16.4.3 按鈕元件制作按鈕元件制作在flash中元件中，另一種類型就是按鈕，當鼠標指針移動到按鈕之上或單擊按鈕時，將產生按鈕事件，或改變按鈕的外觀。要使一個按鈕在影片中具有交互性，需要先制作按鈕元件，再由按鈕元件在場景中的實例去為它分配相應的交互式的動作。在Flash中，按鈕有4個狀態(tài)，分別如下：（1）“彈起”即UP狀態(tài)，鼠標指針沒有移動到按鈕上的狀態(tài)；（2）“指針經過”即Over狀態(tài)，鼠標移動到按鈕上，但沒有單擊該按鈕；（3）“按下”即Down狀態(tài)，鼠標移動到按鈕并單擊該按鈕；（4）“點擊”即Hit狀態(tài)，此狀態(tài)可以定義鼠標事件響應的熱點區(qū)域，即鼠標事件在按鈕上的響應范圍和鼠標事件的動作

32、。當沒有設置“點擊狀態(tài)”的區(qū)域，鼠標事件的響應區(qū)域為“彈起”狀態(tài)時我區(qū)域大小。同時“點擊”幀的內影片中不顯示。第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作本案例以制作一個閃爍的星星按鈕為例，當鼠標移動到按鈕上時，顯示一個閃爍的星星，具體的步驟發(fā)下。（1）新建一個Flash文檔，550*450，背景是黑色。（2）新建一個閃爍星星的影片剪輯star，即利用圖形的繪制工具繪制一個五角星，將其轉換為圖形元件，然后將該圖形工具拖到star影片剪輯的第1個關鍵幀，并利用透明度設置其的閃爍效果，共30幀，第5幀一個關鍵幀，如圖16-33所示。圖16-3

33、3 “閃爍的星星”影片剪輯元件第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作（3）單擊“插入新建元件”，名稱為“star1”，類型為“按鈕”，如圖16-34所示。圖16-34 “star1”按鈕（4）在打開的star1按鈕窗口的時間軸下，“彈起”狀態(tài)為空白幀，選擇“指針經過”狀態(tài)，并插入關鍵幀，將剛才制作好的star閃爍的星星的影片剪輯拖動到當前幀下，然后再選擇“按下”狀態(tài)，將其轉換為關鍵幀，將“點擊”狀態(tài)轉換為關鍵幀，如圖16-35所示。圖16-35 “star1”按鈕的狀態(tài)第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素

34、材的導入網頁設計與制作網頁設計與制作（5）回到主場景，將剛才制作好的星星按鈕star1放到當前第1個關鍵幀的任意位置，然后調整小一些，同時，將多個star1的實例放到當前場景中，盡量擺滿整個場景，就形成了當鼠標移動到當前場景上時，看到滿天的小星星在閃爍。16.6 外部素材的導入外部素材的導入在前面所講的Flash 中，我們主要講的矢量動畫對象的繪制與處理，但是Flash 還可以導入外部的位圖和聲音視頻文件作為特殊的動畫對象來使用，并且導入的外部位圖還可以轉換為矢量圖形，和聲音視頻一起在Flash中創(chuàng)建更豐富多彩的動畫。16.6.1 導入外部素材的基本方法導入外部素材的基本方法在Flash CS

35、4可以識別多種不同的位圖、矢量圖以及任意的影像序列，如BMP位圖、GIF動畫、PDF文件等。我們可以通過 “導入”的方式將素材導入到Flash中。第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作選擇菜單“文件導入”命令，打開下一級菜單項，其中可以將外部素材導入到：“導入到舞臺”、“導入到庫”、“打開外部庫”和“導入視頻”，此時若要使用導入到文檔中的庫項目，直接將它從庫中拖到舞臺即可。導入到舞臺：將圖形圖像導入到當前場景中導入到庫：導入到庫便于進行編輯，同時可以方便多次被動畫使用。打開外部庫：可調用外部已有的庫（如其它Flash源文件中的素材）

36、導入視頻：從外部導入視頻影響資料注：Flash 中還可導入外部素材的影像序列，此時被導入的序列會在當前層的連續(xù)幀中被存放，行成逐幀動畫的效果。第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作16.6.2 導入位圖導入位圖位圖是制作影片時常用的圖像元素，在Flash CS4中默認支持的位圖格式包括BMP、JPEG、GIF等。要導入位圖圖像，可以選擇【文件】|【導入】|【導入到舞臺】命令，打開【導入】對話框，選擇所需導入的圖形文件，單擊【打開】按鈕即可導入到當前的Flash文檔中,在導入位圖文件后，就可以利用Flash CS4的工具進行各種編輯操

37、作，例如消除鋸齒、平滑圖像的邊緣；也可以設置壓縮、修改位圖屬性等以減小位圖文件的大小、將位圖分離或者將位圖轉換為矢量圖等。也可以通過位圖粘貼命令來將位圖放到Flash文檔中，方法就是將其它軟件中的圖像利用“復制”命令復制到剪切板上，然后執(zhí)行“編輯粘貼到中心位置（或者是粘貼到當前位置）”命令第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作16.6.3 編輯導入的位圖圖像編輯導入的位圖圖像（1 1）使用屬性面板編輯位圖）使用屬性面板編輯位圖在舞臺上選中導入的位圖后，打開位圖“屬性”面板，如圖16-36所示，顯示了位圖圖像的名稱，圖像的尺寸以及在舞

38、臺上的位置，用戶可以單擊“編輯”按鈕，系統會用默認的系統已安裝編輯圖像的軟件來編輯該位圖，還可以在庫中選中該位圖，右鍵單擊在下拉菜單中選擇“屬性”命令，打開“位圖屬性”對話框，如圖16-37所示。圖16-36 “屬性”面板 圖16-37 “位圖屬性”面板 第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作注：“屬性”面板中的“交換”按鈕是可以將當前文檔中的其它位圖對象替換為該實例。“位圖屬性”對話框中：“允許平滑”復選框是指可以削除圖像的鋸齒并平滑圖像邊緣 “壓縮”有兩種： ，無損是指使用無損壓縮格式壓縮圖像，不會丟失圖像中的任何數據。JPEG

39、是以JPEG格式壓縮圖像，建議使用默認壓縮品質?！白远x”是1-100之間，數值越大效果越好相應的文件也越大?！皽y試”則是查看文件壓縮的結果注：對于顏色復雜的壓縮建議使用“照片（JPEG）”方式，對于簡單形狀和顏色較少的圖像則建議用無損壓縮方式。（2 2）使用位圖填充）使用位圖填充位圖導入到 Flash文檔中，在工具箱面板中打開【調色板】工具，如圖16-38，其中就會出現剛才導入的位圖圖案，此時就可以使用位圖進行填充了，當使用位圖填充時，會平鋪該位圖，以填充對象，如圖16-39所示。第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作圖16-38

40、 “調色板” 圖16-39 位圖填充 （3 3）分離位圖）分離位圖分離位圖會將圖像中的像素分散到相應的區(qū)域中，可以分別選中這些區(qū)域并進行修改。其方法是選擇“修改分離”菜單，當分離時，就可以使用flash的繪圖和涂色工具對位圖進行修改。（4 4）將位圖轉換為矢量圖形）將位圖轉換為矢量圖形位圖轉換為矢量圖形的方法是：選擇“修改位圖轉換位圖為矢量圖”命令，打開如圖16-40所示的對話框。執(zhí)行此命令，將位圖轉換為具有可編輯的離散區(qū)域的矢量圖形進行編輯和處理。 第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作顏色閾值：當壓縮時兩個像素顏色色差小于閾值就

41、認為是一種顏色，當閾值越大就將減少顏色的數量。最小區(qū)域：為某個像素指定顏色時，需要考慮的周圍像素的數量。曲線擬合：繪制輪廓所用的平滑程度轉角閾值：保留銳邊或者進行平滑處理圖16-40 “轉換位圖為矢量圖”對話框 圖16-41 “導入視頻”向導 第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作16.6.4 16.6.4 導入視頻素材導入視頻素材我們可以將外部的視頻文件導入到Flash中進行編輯，選擇“文件導入導入視頻”，打開“導入視頻”向導，如上圖16-41所示 ，根據向導就可以導入相應的視頻文件。使用回放組件加載外部視頻：導入視頻創(chuàng)建FLVP

42、layback組件的實例以控制視頻回放。當Flash文檔作為SWF發(fā)布并將其上傳到WEB服務器上時，還必須將視頻文件一起上傳到WEB服務器或Flash Media Server，并按照已上載視頻文件的位置FLVPlayback組件。在SWF中嵌入到FLV并在時間軸中播放：這種方式導入視頻時，該視頻被放置于時間軸中可以看到時間軸幀所表示的各個視頻幀的位置。嵌入的FLV文件成為了Flash的一部分。但是當把視頻文件嵌入到SWF文件中會顯著增加發(fā)布文件的大小，因此僅適合于小的視頻文件。此外當嵌入的視頻較長時，音頻和視頻可能會出現不同步。作為捆綁在SWF移動設備視頻導入：這個選項是將視頻綁定到Flas

43、h Lite文檔中以部署到移動設備。第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作注：FLV是FLASH VIDEO的簡稱，是隨著Flash 發(fā)展起來的一咱視頻格式。它的特點是形成文件小，加載速度較快，使得網絡觀看視頻更加快速，它解決了視頻文件導入Flash后，在導出為SWF文件時大小 會變大，會影響網絡的播放速度的問題，是現在優(yōu)酷、土豆、酷6等視頻網站普遍采用的視頻格式，同時FLV可以比較方便快速的導入到Flash中。在Flash中，可以導入的視頻文件格式如下表(16-1): 注：如果導入的視頻格式系統不支持，會顯示警告信息。文件類型擴展

44、名文件類型擴展名音頻視頻交叉.avi數字視頻.dv運動圖像專家組.mpg或 .mpegWindows媒體文件.wmv 或 .asfFlash視頻文件.flvQuickTime影片.mov第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作16.6.516.6.5導入聲音素材導入聲音素材Flash一個突出的特點就是在動畫中可以插入聲音，而且可以選擇在不同的情況下播放不同的聲音。同時Flash提供了壓縮聲音文件的方法，這樣大大的減少了導入聲音的大小，保障了Flash文件的大小。Flash在導入聲音時，可以給按鈕添加音效，也可以將聲音導入到時間軸上，也

45、可以讓聲音獨立于時間軸連續(xù)播放，作為整個動畫的背景音樂，也可用ActionScript來控制聲音的播放。在Flash CS4中，可以導入外部的聲音文件到動畫中，也可以使用共享庫中的聲音文件。Flash支持的聲音格式有：文件類型擴展名文件類型擴展名Adobe Soundbooth.asndWindows音頻格式.wavMp3音頻格式.mp3SUN音頻格式.au只有聲音的QuickTime影片.aiff第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作Flash 中有兩種聲音類型：中有兩種聲音類型：事件聲音：事件聲音必須完全下載后才能開始播放，除非

46、明確停止，否則它將一直連續(xù)播放；音頻流：音頻流與動畫息息相關，隨動畫的播放而播放，隨動畫的停止而停止；只要前幾幀下載了足夠的數據就開始播放；音頻流要與時間軸同步以便在網站上播放。（1 1）聲音的導入）聲音的導入導入聲音的方法就是選擇“文件導入導入到庫（導入到舞臺）”，然后“庫”面板，可以看到預覽窗口通過“播放”和“停止”按鈕進行試聽，如圖16-42所示。 同時在動畫中可使用全部聲音也可將其中的一部分重復放入影片的不同位置，這樣不會顯著影響文件的大小，多個聲音也可放在同一個圖層上，也可以放在包含其他對象的圖層上，但是為了便于操作，最好第個聲音放到一個新的圖層中。Flash CS4提供了公共的聲音庫，選擇“窗口公用庫聲音”，將打開系統聲音庫，如圖16-43所示。當要使用當前庫中的聲音時，只需要將“聲音”庫中的聲音文件用鼠標拖動到舞臺，聲音會自動被添加到默認選中的圖層中。第第16章：動畫元件制作和外部素材的導入章：動畫元件制作和外部素材的導入網頁設計與制作網頁設計與制作圖16-42 庫面板 圖16-43 公用聲音庫 （2 2）聲音的編輯）聲音的編輯選中舞臺的時間軸的聲音圖