FlashCS6中文版基礎(chǔ)教程：第9章 元件、實(shí)例和庫(kù)

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