FlashCS6中文版基礎教程：第9章 元件、實例和庫

1第9章元件、實例和庫元件是動畫中可以反復從【庫】中取出使用的一個小動畫部件，它可以是“圖形”、“按鈕”或一個“動畫”，它可以獨立于主動畫外進行播放。元件的重要特性就是可以反復使用，節(jié)省了重復制作一個相同動畫的時間，極大地提高了工作效率。要使用元件必須打開【庫】面板，將元件拖放到場景中，這個過程就稱為建立了該元件的一個實例，場景中的元件就稱為一個實例。由于一個元件可以調用多次，且調用一次就產生一個實例，因此一個元件可以產生多個實例。元件【庫】用于裝載動畫中的所有“位圖”、“元件”、“聲音”和“視頻”等文件，如圖9-1所示。在本章的學習中，我們通過對元件、實例、庫的詳解介紹，來學習和了解它們的相關知識，以及在動畫制作過程中的應用技巧。29.1元件概述元件是FlashCS6中非常重要的基本元素，對文件的大小和交互能力的大小起著舉足輕重的作用。元件類型有以下幾種：按鈕元件、圖形元件和影片剪輯元件，如圖9-2所示。39.1.1按鈕元件按鈕元件用于創(chuàng)建動畫的控制按鈕，以響應鼠標的按下、單擊等事件，按鈕元件包括“彈起”、“指針經過”、“按下”和“點擊”4種狀態(tài)。下面我們來直觀地學習按鈕元件的4種狀態(tài)。(1)首先打開一個場景文件，如圖9-3所示。(2)觀察打開的場景文件中，按鈕元件現在就是“彈起”狀態(tài)，如圖9-4所示。49.1.1按鈕元件(3)在按鈕元件上雙擊，進入按鈕元件的編輯狀態(tài)，選擇【指針經過】選項，讓按鈕處于“指針經過”狀態(tài)，如圖9-5所示。(4)繼續(xù)在元件的編輯狀態(tài)下，選擇【按下】選項，讓按鈕處于“按下”狀態(tài)，如圖9-6所示。59.1.1按鈕元件(5)繼續(xù)在元件的編輯狀態(tài)下，選擇【點擊】選項，讓按鈕處于“點擊”狀態(tài)，如圖9-7所示。(6)以上所展示的就是【按鈕】元件的4種狀態(tài)，想要更加直觀地觀看4種狀態(tài)的變化，可以對當前文件進行測試。在測試畫面中，用鼠標對按鈕進行各種操作，如圖9-8所示。69.1.2圖形元件了解了按鈕元件后，我們再來學習什么是圖形元件。圖形元件用于創(chuàng)建可反復使用的圖形，它可以是靜止圖片，也可以是由多個幀組成的動畫。它的特點是擁有獨立的編輯區(qū)域，如果將其調用到場景中，會受到場景中幀的約束。(1)打開一個場景文件，里邊已經有了一個圖形元件，如圖9-9所示。(2)這個圖形元件是一個靜止的圖片。現在我們來對它進行編輯，用鼠標雙擊場景中的圖形元件，進入元件的獨立編輯區(qū)域，如圖9-10所示。79.1.2圖形元件(3)在這個編輯區(qū)域中，我們可以對元件中的內容進行任意編輯。單擊【工具】面板中的【顏料桶工具】按鈕，為元件中的女孩的上衣填充一個新的顏色，如圖9-11所示。(4)單擊【返回到場景】按鈕，返回到場景中，觀察場景中的文件會發(fā)現，剛才在圖形元件內部進行的編輯，在返回到場景后也保留了下來，如圖9-12所示。89.1.2圖形元件(5)雙擊元件再次回到元件編輯界面，在圖形元件內部的1～40幀之間添加一段移動的動畫，如圖9-13所示。(6)單擊【返回到場景】按鈕，返回到場景中，對動畫進行測試，如圖9-14所示。我們在圖形元件內部制作的移動動畫，并沒有被播放出來。這就是圖形元件的重要特性，在圖形元件內部制作的動畫，會受到場景幀數的限制。因此我們需要把【場景】中圖層1的幀數也延長到40幀，如圖9-15所示。這樣場景的幀數長度和圖形元件內部的幀數長度是一樣的，再測試動畫就不會出問題了。99.1.3影片剪輯影片剪輯元件本身也是一段動畫，可以獨立播放。當播放主動畫時，影片剪輯元件也在循環(huán)播放，它與圖形元件的最大不同就是不會受到場景中幀的約束。(1)返回到上一個場景中，在【庫】面板中選擇圖形元件，如圖9-16所示。(2)在圖形元件上右擊，在彈出的快捷菜單中選擇【屬性】命令，在彈出的【元件屬性】對話框的【類型】下拉列表框中選擇【影片剪輯】選項，如圖9-17所示。109.1.3影片剪輯(3)這樣就將圖形元件轉換成了影片剪輯元件。而影片剪輯元件與圖形元件最大的不同在于，它不會受到場景中幀數的限制。另一個特性是可以為影片剪輯元件添加濾鏡，如圖9-18所示。(4)添加濾鏡后的效果如圖9-19所示。119.2創(chuàng)建元件上一小節(jié)我們了解了元件的類型和基本特性，下面來學習如何創(chuàng)建這三種不同種類的元件。129.2.1創(chuàng)建圖形元件1.創(chuàng)建圖形元件2.將圖形轉換成圖形元件139.2.2創(chuàng)建影片剪輯1.直接創(chuàng)建影片剪輯元件的方法2.將場景中的動畫轉換成影片剪輯元件149.2.3創(chuàng)建按鈕元件按鈕元件實際是一個4幀的影片剪輯元件。創(chuàng)建一個按鈕元件，前3幀是用來設定顯示按鈕的狀態(tài)的，最后1幀是用來定義按鈕的點擊范圍的。下面我們學習創(chuàng)建【按鈕】元件的方法。(1)打開一個繪制好的場景文件，如圖9-49所示。(2)選擇【插入】|【新建元件】命令，打開【創(chuàng)建新元件】對話框，設置元件【名稱】為“按鈕1”，設置元件的【類型】為【按鈕】，如圖9-50所示。159.2.3創(chuàng)建按鈕元件(3)單擊【確定】按鈕，進入“按鈕1”元件編輯界面，如圖9-51所示。(4)使用【工具】面板中的【繪圖工具】，在場景中繪制一個按鈕的形狀，如圖9-52所示。(5)單擊【圖層1】的【指針經過】幀，按下F6鍵插入關鍵幀。然后以相同的方法在【按下】和【點擊】幀，分別插入關鍵幀，如圖9-53所示。169.2.3創(chuàng)建按鈕元件(6)單擊【圖層1】的【指針經過】幀，選中界面中的圖形，更改其顏色，如圖9-54所示。(7)在【圖層1】的上面新創(chuàng)建一個圖層，命名為“文字”，如圖9-55所示。179.2.3創(chuàng)建按鈕元件(8)選擇【工具】面板中的【文本工具】，確認當前幀是文字圖層的第一幀，輸入“進入按鈕”文字，如圖9-56所示。(9)返回到場景中，拖曳按鈕元件到適當的位置，測試影片，如圖9-57所示。完成按鈕元件的創(chuàng)建。189.3編輯元件本節(jié)我們將學習元件的編輯，以及了解它們在進行編輯時不同的特點。199.3.1復制元件復制元件是一個很有用的功能。在Flash動畫的制作過程中，復制元件也是我們經常要用到的，下面進行詳細講解。(1)打開一個繪制好的場景文件，如圖9-58所示。(2)單擊【圖層3】的第1幀，打開【庫】面板，把【星星】元件拖曳到場景中，并調整其大小和位置，如圖9-59所示。209.3.1復制元件(3)復制元件有以下兩種方法。第一種方法是，在元件上面右擊，在彈出的快捷菜單中選擇【復制】命令，如圖9-60所示。選擇【復制】命令后，在場景空白處右擊，在彈出的快捷菜單中選擇【粘貼】命令，這樣就完成了對元件的復制操作，如圖9-61所示。第二種方法是，選擇【工具】面板中的【選擇工具】，在元件上按住Ctrl鍵單擊，拖曳元件到要復制的地方，完成元件的復制操作，如圖9-62所示。(4)用這兩種方法再復制幾個【星星】元件，測試影片，如圖9-63所示。219.3.2元件的編輯方式1.在當前模式下編輯元件2.在元件模式下編輯元件229.4創(chuàng)建實例在Flash動畫影片中用到的是元件的實例屬性，并不是元件本身，只有把一個元件添加到場景中，即是創(chuàng)建了該元件的一個實例。下面講解創(chuàng)建實例的具體方法。(1)打開要創(chuàng)建實例的場景，如圖9-68所示。(2)在【庫】中找到要創(chuàng)建實例的元件，用鼠標將它拖曳到場景中，如圖9-69所示。239.4創(chuàng)建實例(3)在【屬性】檢查器面板的實例名稱文本框中，為場景中的實例命名，如圖9-70所示。249.5改變實例屬性實例是元件的一個副本，所以修改一個實例的屬性時不會對元件本身產生任何影響。要更改實例的屬性，首先要打開實例的【屬性】檢查器面板，如圖9-71和圖9-72所示。在這里可以對實例的位置和大小、3D定位和查看、色彩效果、顯示和濾鏡等屬性進行修改。259.5改變實例屬性1.在【屬性】檢查器面板中修改實例的播放方式2.修改實例的大小和位置3.設置實例的顏色和透明度269.5.1替換實例替換實例功能是為場景中的實例指定不同的元件。在交換元件時，新的實例將保留所有的被替換實例的屬性。簡單地說就是在原實例上所做的各種效果都將保留在替換的新實例上。下面我們詳細講解替換實例的操作步驟。(1)在場景中選擇實例，如圖9-78所示。279.5.1替換實例(2)在【屬性】檢查器面板中，單擊【交換】按鈕，打開【交換元件】對話框，如圖9-79所示。(3)在【交換元件】對話框中選擇一個元件，替換當前場景中的元件，如圖9-80所示，單擊【確定】按鈕。289.5.2改變實例顏色接下來我們學習改變實例顏色的具體操作方法。(1)首先打開一個繪制好的場景文件，如圖9-81所示。(2)單擊場景中的實例，打開實例的【屬性】檢查器面板，如圖9-82所示。(3)在【樣式】下拉列表框中選擇【色調】選項，如圖9-83所示。299.5.2改變實例顏色(4)單擊【著色】按鈕，在彈出的混色器中選擇“紅色”，如圖9-84所示。(5)返回場景中，觀察場景中的實例顏色發(fā)生了變化，變成了紅色，如圖9-85所示。(6)單擊【色調】按鈕右側的文本框，輸入“50”，修改紅色的透明度為“50%”，如圖9-86所示。場景中的實例顏色發(fā)生了改變。309.5.3分離實例下面講解分離實例的具體操作方法。(1)首先選中場景中要分離的元件，如圖9-87所示。(2)選擇【修改】|【分離】菜單命令，如圖9-88所示。(3)回到場景中，觀察后發(fā)現剛才場景中的實例已經被分離出來了，如圖9-89所示。319.6使用庫選擇【窗口】|【庫】菜單命令，打開【庫】面板，如圖9-90所示。【庫】面板中主要分為兩個部分，上面的部分是“符號窗口”，下面的部分是“對象名稱窗口”，當單擊元件名稱時，該元件的內的圖形信息將出現在“符號窗口”中，如圖9-91所示。單擊【菜單】按鈕，彈出有關【庫】的控制命令，其基本涵蓋了【庫】中所有的操作指令，如圖9-92所示。329.6.1導入圖片Flash可以使用在其他應用程序中創(chuàng)建的插圖，可以導入各種文件格式的矢量圖和位圖，比如BMP、JPG、GIF、Flash動畫等都可以導入到【庫】中。當導入位圖時，可以應用【壓縮】和【消除鋸齒】功能，將位圖直接放置在Flash文檔中，使用位圖作為填充，在外部編輯器中編輯位圖，將位圖分離為像素并在Flash中編輯它或者將位圖轉換為矢量圖，如圖9-93所示。339.6.2導入聲音聲音文件也可以像圖形文件那樣導入到庫資源中去，支持的聲音文件格式包括WAV、MP3等。它們和圖形元件一樣在場景中只需要一個聲音文件的副本，就可以在影片中以各種方式使用這個聲音文件，如圖9-94所示。349.6.3導入視頻文件視頻文件的導入需要系統(tǒng)安裝QuickTime或者更高版本的播放器，才能正常導入MOV、AVI、MPEG等視頻格式。視頻剪輯可以導入為鏈接文件或嵌入文件。(1)選擇【文件】|【導入】|【導入視頻】菜單命令，打開【導入視頻】對話框，如圖9-95所示。(2)單擊【瀏覽】按鈕，在打開的【打開】對話框中找到要導入的視頻，如圖9-96所示。359.6.3導入視頻文件(3)單擊【打開】按鈕，打開要導入的視頻，如圖9-97所示。(4)單擊【下一步】按鈕，設定視頻的外觀，如圖9-98所示。369.6.3導入視頻文件(5)單擊【下一步】按鈕，進入到【完成視頻導入】界面，然后單擊【完成】按鈕，如圖9-99所示，完成視頻導入操作。查看【庫】中導入的視頻，在編輯后可以將導入的視頻文件(見圖9-100)發(fā)布為SWF文件進行播放。379.7上機實踐操作本范例源文件：\09\9-11.fla、花.jpg、樓房1.jpg、樓房2.jpg、云彩.jpg。本范例完成文件：\09\9章實例.fla、9章實例.swf。多媒體教學路徑：光盤→多媒體教學→第9章。389.7.1實例介紹和展示本例通過運用【打開】命令、【創(chuàng)建新元件】對話框、【導入到庫】命令、【庫】面板、【創(chuàng)建傳統(tǒng)補間】命令、【選擇工具】、【任意變形工具】、【測試影片】命令制作美麗的“田園生活”的動畫，效果如圖9-101所示。399.7.2創(chuàng)建新元件(1)打開光盤中的場景文件9-11，如圖9-102所示。(2)按Ctrl+F8組合鍵，在彈出的【創(chuàng)建新元件】對話框中，輸入元件的【名稱】為“樓房1”。選擇元件的【類型】為【圖形】，如圖9-103所示。單擊【確定】按鈕。(3)進入元件的編輯界面，如圖9-104所示。409.7.2創(chuàng)建新元件(4)選擇【文件】|【導入】|【導入到庫】命令，如圖9-105所示。(5)把素材文件“樓房1”導入到庫中，在【庫】面板中單擊我們剛剛導入的素材“樓房1”，把它拖曳到元件的編輯界面中去，如圖9-106所示。(6)返回到場景中，新創(chuàng)建一個圖層，并命名為“房屋”，如圖9-107所示。419.7.2創(chuàng)建新元件(7)把“樓房1”元件從【庫】面板中拖曳到場景中，創(chuàng)建第一個實例，如圖9-108所示。(8)使用【工具】面板中的【任意變形工具】，調整實例的大小和位置，如圖9-109所示。429.7.3導入素材創(chuàng)建實例(1)按Ctrl+F8組合鍵，在彈出的【創(chuàng)建新元件】對話框中，輸入元件的【名稱】為“樓房2”。選擇元件的【類型】為【圖形】，單擊【確定】按鈕，如圖9-110所示。(2)選擇【文件】|【導入】|【導入到庫】命令，把素材文件“樓房2”導入到【庫】中，再拖曳到“樓房2”元件的編輯界面中，如圖9-111所示。(3)返回到場景中，把“樓房2”元件從【庫】中拖動到場景中，創(chuàng)建按第二個實例，如圖9-112所示。439.7.3導入素材創(chuàng)建實例(4)按Ctrl+F8組合鍵，在彈出的【創(chuàng)建新元件】對話框中，輸入元件的【名稱】為“云彩”，選擇元件的【類型】為【影片剪輯】，如圖9-113所示。單擊【確定】按鈕。(5)進入元件的編輯界面，選擇【文件】|【導入】|【導入到庫】命令，把素材文件“云彩”導入到【庫】中，再拖曳到【云彩】元件的編輯界面中，如圖9-114所示。(6)確認在【云彩】元件的編輯界面，在【圖層1】的第100幀，按F6鍵插入關鍵幀，如圖9-115所示。449.7.3導入素材創(chuàng)建實例(7)單擊【工具】面板中的【選擇工具】圖標，在第50幀上移動“云彩”的位置，如圖9-116所示。(8)在【圖層1】的時間軸上右擊，在彈出的快捷菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令，如圖9-117所示。(9)用鼠標撥動時間軸上的控制按鈕，看到云彩移動的效果，如圖9-118所示。459.