元件實(shí)例與庫(kù)

第4章

元件、實(shí)例與庫(kù)《FlashCS6案例教程》

學(xué)習(xí)目標(biāo)了解元件、實(shí)例和庫(kù)的概念理解元件和實(shí)例的關(guān)系掌握元件、實(shí)例和庫(kù)的使用方法掌握編輯實(shí)例的方法

重點(diǎn)難點(diǎn)元件的創(chuàng)建和編輯實(shí)例的創(chuàng)建和編輯庫(kù)的使用和管理4.1元件、實(shí)例和庫(kù)的概念

元件是Flash中可重復(fù)使用的對(duì)象。通常將需要重復(fù)出現(xiàn)的圖形、動(dòng)畫片段、按鈕制作成元件，存放在“庫(kù)”面板中。每個(gè)元件都有自己的時(shí)間軸，可以將幀、關(guān)鍵幀和層添加到元件的時(shí)間軸。在動(dòng)畫中使用元件有如下優(yōu)點(diǎn)：元件在Flash中只創(chuàng)建一次，但在整個(gè)動(dòng)畫中可以重復(fù)使用。同樣修改時(shí)只需修改一次，便可批量更新，方便操作。元件只在動(dòng)畫中存儲(chǔ)一次，可以大大降低文件的大小。文檔間的元件可以實(shí)現(xiàn)共享，在一個(gè)文檔中可以引用另一個(gè)文檔中的元件。使用元件還可以加快SWF文件的播放速度，因?yàn)樵恍柘螺d到FlashPlayer中一次。4.1.1元件的概念

創(chuàng)建元件時(shí)需要選擇元件的類型，元件分為影片剪輯、圖形和按鈕3種類型。圖形元件：圖形元件主要是制作動(dòng)畫中的靜態(tài)圖形或動(dòng)畫片段。圖形元件與主時(shí)間軸同步，但不具有交互性，不能添加交互行為和聲音控制。影片剪輯元件：使用影片剪輯元件可以創(chuàng)建反復(fù)使用的動(dòng)畫片段，且可獨(dú)立播放。影片剪輯元件具有獨(dú)立于主時(shí)間軸的多幀時(shí)間軸，當(dāng)動(dòng)畫播放時(shí)，影片剪輯元件也在循環(huán)播放。影片剪輯元件可以包含交互式控件、聲音和其他影片剪輯實(shí)例。按鈕元件：使用按鈕元件可以創(chuàng)建用于響應(yīng)鼠標(biāo)單擊、滑過(guò)或其他動(dòng)作的交互式按鈕，通過(guò)事件激發(fā)它的動(dòng)作。按鈕元件包括彈起、指針經(jīng)過(guò)、按下和點(diǎn)擊4種狀態(tài)，可以定義與各種狀態(tài)關(guān)聯(lián)的圖形、元件或聲音。4.1元件、實(shí)例和庫(kù)的概念

實(shí)例是元件在舞臺(tái)上或者嵌套在另一個(gè)元件中的元件副本。創(chuàng)建元件之后，可以在文檔中任何地方（包括在其他元件內(nèi)）創(chuàng)建該元件的實(shí)例。將一個(gè)元件從“庫(kù)”面板中拖動(dòng)到舞臺(tái)上就創(chuàng)建了該元件的一個(gè)實(shí)例。一個(gè)元件可以創(chuàng)建多個(gè)實(shí)例，但一個(gè)實(shí)例只對(duì)應(yīng)一個(gè)元件。編輯元件會(huì)更新所有的實(shí)例，但對(duì)一個(gè)實(shí)例應(yīng)用效果不會(huì)影響元件。成功創(chuàng)建元件后，元件被保存在庫(kù)面板中，將元件從庫(kù)面板拖放到舞臺(tái)上就為該元件創(chuàng)建了一個(gè)實(shí)例。每個(gè)元件實(shí)例都有獨(dú)立于元件的自身的屬性。要編輯實(shí)例的屬性，可以通過(guò)屬性面板實(shí)現(xiàn)。選中舞臺(tái)上的某個(gè)元件實(shí)例，在屬性面板中可以設(shè)置元件類型、自定義名稱、更改顏色和透明度等選項(xiàng)。4.1元件、實(shí)例和庫(kù)的概念4.1.2實(shí)例的概念

庫(kù)面板用于存儲(chǔ)和組織在Flash中創(chuàng)建的各種元件，它還用于存儲(chǔ)和組織導(dǎo)入的文件，包括位圖圖形、聲音文件和視頻剪輯。每個(gè)Flash文件都有用來(lái)存放元件、位圖、聲音和視頻文件等內(nèi)容的庫(kù)，利用庫(kù)可以很方便地查看和組織這些內(nèi)容。執(zhí)行“窗口”→“庫(kù)”命令，或者按Ctrl+L快捷鍵，可打開(kāi)“庫(kù)”面板。庫(kù)面板中包括元件預(yù)覽窗、排序按鈕、元件項(xiàng)目列表和工具欄。在元件項(xiàng)目列表的頂部，有5個(gè)項(xiàng)目按鈕，分別是名稱、類型、使用次數(shù)、鏈接和修改日期，單擊某一按鈕，項(xiàng)目列表就按其標(biāo)明的內(nèi)容排列。在元件列表中，每個(gè)元件名稱前都有一個(gè)類型圖標(biāo)，例如，影片剪輯元件類型圖標(biāo)是，圖形元件類型圖標(biāo)是，按鈕元件類型圖標(biāo)是。利用這些圖標(biāo)外觀可以很容易識(shí)別元件類型。4.1元件、實(shí)例和庫(kù)的概念4.1.3庫(kù)的概念4.2案例：動(dòng)態(tài)的星星——?jiǎng)?chuàng)建圖形元件【案例目的】使用兩種方法創(chuàng)建圖形元件?！局R(shí)要點(diǎn)】將形狀轉(zhuǎn)換為元件，創(chuàng)建新元件?！景咐Ч啃切怯尚∽兇蟮膭?dòng)畫效果。演示案例：動(dòng)態(tài)的星星用戶可以通過(guò)以下方法創(chuàng)建圖形元件：1.創(chuàng)建圖形元件時(shí)，可以先選擇舞臺(tái)上已經(jīng)存在的圖形（包括導(dǎo)入的位圖、矢量圖、文本和Flash工具創(chuàng)建的線條或者色塊），將其轉(zhuǎn)化為圖形元件。在動(dòng)畫制作過(guò)程中，需要用到很多繪制的圖形，為了方便調(diào)用或重復(fù)使用這些圖形，最好將這些圖形轉(zhuǎn)換為元件，保存在“庫(kù)”面板中。2.創(chuàng)建一個(gè)空的圖形元件，然后在元件編輯狀態(tài)下添加元件的內(nèi)容。執(zhí)行“插入”→“新建元件”命令，或者按下Ctrl+F8快捷鍵，可以創(chuàng)建一個(gè)空的圖形元件，然后編輯元件內(nèi)容。3.選中圖形，執(zhí)行“修改”→“轉(zhuǎn)換為元件”命令，彈出“轉(zhuǎn)換為元件”對(duì)話框，在對(duì)齊選項(xiàng)后有9個(gè)中心定位點(diǎn)，稱為注冊(cè)點(diǎn)。所謂注冊(cè)點(diǎn)，指的是元件建立以后原點(diǎn)的位置，它是元件旋轉(zhuǎn)時(shí)所圍繞的軸。選中對(duì)象并轉(zhuǎn)換為元件的時(shí)候，如果注冊(cè)點(diǎn)的位置在左上角，那么轉(zhuǎn)換后對(duì)象的左上角將成為元件的原點(diǎn)位置。4.2案例：動(dòng)態(tài)的星星——?jiǎng)?chuàng)建圖形元件4.3案例：飄動(dòng)的落葉——?jiǎng)?chuàng)建影片剪輯元件【案例目的】通過(guò)影片剪輯元件制作飄動(dòng)的落葉?！局R(shí)要點(diǎn)】創(chuàng)建影片剪輯元件?！景咐Ч课枧_(tái)上有多個(gè)樹葉飄動(dòng)的動(dòng)畫效果。演示案例：飄動(dòng)的落葉

影片剪輯元件擁有不依賴于主時(shí)間軸的時(shí)間軸。當(dāng)需要重復(fù)使用一段動(dòng)畫時(shí)，可將該動(dòng)畫轉(zhuǎn)換為影片剪輯元件；影片剪輯元件中的動(dòng)畫播放是獨(dú)立于主時(shí)間軸的，所以不論主時(shí)間軸的動(dòng)畫有多少幀，影片剪輯元件實(shí)例會(huì)一直循環(huán)播放其動(dòng)畫。4.3案例：飄動(dòng)的落葉——?jiǎng)?chuàng)建影片剪輯元件4.4案例：彩色按鈕——?jiǎng)?chuàng)建按鈕元件【案例目的】通過(guò)創(chuàng)建按鈕元件制作彩色按鈕?！局R(shí)要點(diǎn)】創(chuàng)建按鈕元件，編輯按鈕元件的4個(gè)關(guān)鍵幀?！景咐Ч渴髽?biāo)彈起、經(jīng)過(guò)、按下時(shí)的四種狀態(tài)如圖4-4-1所示。演示案例：彩色按鈕

按鈕元件是Flash中的特殊元件，用來(lái)響應(yīng)鼠標(biāo)的操作事件，根據(jù)鼠標(biāo)的移動(dòng)或單擊等操作激發(fā)相應(yīng)的動(dòng)作。從外觀上說(shuō)，在設(shè)計(jì)按鈕時(shí)可以是任何形式，可以是矢量圖或者位圖，可以是線條或者色塊，甚至可以是透明的按鈕。按鈕元件具有的4種狀態(tài)的含義如下所示。彈起：當(dāng)鼠標(biāo)指針不接觸按鈕時(shí)的狀態(tài)。指針經(jīng)過(guò)：當(dāng)鼠標(biāo)指針移動(dòng)到按鈕上，沒(méi)有按下時(shí)的狀態(tài)。按下：當(dāng)鼠標(biāo)指針移動(dòng)到按鈕上并按下鼠標(biāo)時(shí)的狀態(tài)。點(diǎn)擊：定義鼠標(biāo)單擊的有效區(qū)域。對(duì)于按鈕元件的實(shí)例，可以在屬性面板中設(shè)置“實(shí)例名”，從而使用動(dòng)作腳本控制按鈕完成相應(yīng)的操作。4.4案例：彩色按鈕——?jiǎng)?chuàng)建按鈕元件4.5案例：多彩花朵——編輯元件和實(shí)例【案例目的】通過(guò)元件和實(shí)例制作各種花朵?！局R(shí)要點(diǎn)】改變實(shí)例的形狀和色彩效果?！景咐Ч啃Ч鐖D4-5-1所示。演示案例：多彩花朵

對(duì)于元件的編輯在動(dòng)畫制作過(guò)程中是經(jīng)常遇到的，如果對(duì)已經(jīng)創(chuàng)建好的元件不滿意，可以對(duì)元件進(jìn)行重新編輯。1．編輯元件對(duì)于創(chuàng)建好的元件，可以對(duì)其進(jìn)行編輯。Flash提供了3種方式來(lái)編輯元件，分別是在當(dāng)前位置編輯、在元件編輯模式和在新窗口中編輯元件。編輯元件后，F(xiàn)lash將更新該元件的所有實(shí)例。（1）在當(dāng)前位置編輯元件選中舞臺(tái)上要編輯的元件實(shí)例，執(zhí)行“編輯”→“在當(dāng)前位置編輯”命令，或者點(diǎn)擊鼠標(biāo)右鍵在彈出的菜單中選擇“在當(dāng)前位置編輯”，或者鼠標(biāo)雙擊該實(shí)例，都可以在該元件和其他對(duì)象在一起的舞臺(tái)上編輯他，其他對(duì)象以灰色顯示，在在編輯的元件名稱顯示在當(dāng)前場(chǎng)景名稱的右側(cè)。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.1元件的編輯（2）在元件編輯模式下編輯元件使用元件編輯模式，可以將窗口從舞臺(tái)視圖更改為只顯示該元件的單獨(dú)視圖來(lái)編輯，正在編輯的元件名稱會(huì)顯示在當(dāng)前場(chǎng)景名稱的右側(cè)。進(jìn)入元件編輯模式的方式有如下幾種：在舞臺(tái)上選中元件的實(shí)例，單擊鼠標(biāo)右鍵在彈出菜單中選擇“編輯”。在舞臺(tái)上選中元件的實(shí)例，執(zhí)行“編輯”→“編輯元件”。在“庫(kù)”面板中，雙擊元件圖標(biāo)。在“庫(kù)”面板中選中元件，單擊鼠標(biāo)右鍵在彈出菜單中選擇“編輯”。（3）在新窗口中編輯元件可以在一個(gè)單獨(dú)的窗口中編輯元件，正在編輯的元件的名稱會(huì)顯示在舞臺(tái)上方的編輯欄內(nèi)。在舞臺(tái)上選中元件的一個(gè)實(shí)例，單擊鼠標(biāo)右鍵在彈出的菜單中選擇“在新窗口中編輯”，即可進(jìn)入新窗口編輯模式。編輯完成后單擊右上角的關(guān)閉按鈕，關(guān)閉新窗口。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.1元件的編輯2．復(fù)制元件在FlashCS6中可以通過(guò)復(fù)制元件以一個(gè)現(xiàn)有的元件為基礎(chǔ)創(chuàng)建新元件。復(fù)制元件的方法以下兩種：（1）通過(guò)“庫(kù)”面板對(duì)元件進(jìn)行復(fù)制在“庫(kù)”面板中選中一個(gè)元件，然后單擊“庫(kù)”面板右上角的按鈕，在彈出的菜單中選擇“直接復(fù)制”選項(xiàng)（或者在選中的元件上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“直接復(fù)制”選項(xiàng)），將會(huì)打開(kāi)“直接復(fù)制元件”對(duì)話框。在該對(duì)話框中設(shè)置復(fù)制后的元件的名稱和類型，單擊確定按鈕后，被復(fù)制的元件將會(huì)在“庫(kù)”面板中存在。（2）通過(guò)實(shí)例復(fù)制元件在舞臺(tái)上選擇元件的一個(gè)實(shí)例，執(zhí)行“修改”→“元件”→“直接復(fù)制元件”（或者在該實(shí)例上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“直接復(fù)制元件”選項(xiàng)），將會(huì)彈出“直接復(fù)制元件”對(duì)話框。在該對(duì)話框中輸入復(fù)制后元件的名字，然后單擊確定按鈕，被復(fù)制的元件將會(huì)在“庫(kù)”面板中存在。對(duì)元件進(jìn)行復(fù)制后，舞臺(tái)上的被選中的實(shí)例也相應(yīng)的變成復(fù)制后元件的實(shí)例。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.1元件的編輯3．交換元件可以為舞臺(tái)上的實(shí)例指定其他的元件，但是保持原來(lái)實(shí)例的一切屬性（包括顏色、透明度和動(dòng)畫等）。選中舞臺(tái)上的實(shí)例，單擊“屬性”面板中的交換按鈕，在彈出的交換元件對(duì)話框中選擇要替換的元件，然后單擊確定按鈕。在“交換元件”對(duì)話框中，單擊直接復(fù)制元件按鈕，將會(huì)彈出“直接復(fù)制元件”對(duì)話框。在該對(duì)話框中輸入元件的名稱，單擊確定按鈕，即復(fù)制了一個(gè)新元件，在“交換元件”對(duì)話框中即可選擇新復(fù)制的元件。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.1元件的編輯1.設(shè)置顏色和透明度從庫(kù)面板中拖動(dòng)元件到舞臺(tái)，舞臺(tái)上的對(duì)象稱為元件的實(shí)例。選中舞臺(tái)上的實(shí)例，屬性面板轉(zhuǎn)換為實(shí)例的屬性面板。在屬性面板中的色彩效果“樣式”下拉列表中包含以下幾個(gè)子項(xiàng)。無(wú)：默認(rèn)選項(xiàng)，不設(shè)置顏色效果。亮度：設(shè)置實(shí)例的相對(duì)亮度和暗度。度量范圍是從﹣100%（黑）到100%（白），0為默認(rèn)值。在文本框中輸入值，或者單擊拖動(dòng)滑桿可調(diào)整亮度。色調(diào)：為實(shí)例著色?？梢灾苯訂螕粽{(diào)色板或者輸入紅、綠、藍(lán)的顏色值，使用滑桿可設(shè)置色調(diào)百分比，從0%（完全透明）到100%（完全飽和）。Alpha：調(diào)整實(shí)例的透明度，調(diào)節(jié)范圍是從0%（完全不可見(jiàn)）到100%（完全飽和）。高級(jí)：可以單獨(dú)調(diào)整實(shí)例的紅、綠、藍(lán)三原色和透明度。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.2創(chuàng)建和編輯實(shí)例2.更改實(shí)例的行為每種元件都有自己的行為，實(shí)例的行為是可以轉(zhuǎn)換的，通過(guò)改變實(shí)例的行為來(lái)重新定義該實(shí)例在動(dòng)畫中的行為。從庫(kù)面板中拖動(dòng)圖形元件到舞臺(tái)，選中該元件實(shí)例，則屬性面板中有3種行為可供選擇，包括影片剪輯、按鈕和圖形。影片剪輯行為：輸入實(shí)例名稱，可在腳本中對(duì)實(shí)例進(jìn)行控制。按鈕行為：在名稱框中輸入實(shí)例的名稱，可以在腳本中對(duì)該實(shí)例進(jìn)行控制?！耙糗壸鳛榘粹o”是指鼠標(biāo)按一下只能做出一次反應(yīng)，并忽略從別的按鈕上發(fā)出的事件?！耙糗壸鳛椴藛雾?xiàng)”是指接收同樣性質(zhì)的菜單或者按鈕發(fā)出的事件。圖形行為：不能對(duì)實(shí)例進(jìn)行命名，不能在腳本中控制圖形元件。“循環(huán)”指讓實(shí)例從指定幀開(kāi)始重復(fù)播放動(dòng)畫；“播放一次”指從指定幀開(kāi)始播放動(dòng)畫片段，只播放一次；“單幀”指顯示動(dòng)畫中的指定幀，并不播放動(dòng)畫?！暗谝粠敝赣脕?lái)指定動(dòng)畫由哪一幀開(kāi)始播放。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.2創(chuàng)建和編輯實(shí)例3.分離實(shí)例要斷開(kāi)實(shí)例與元件的連接，即將實(shí)例轉(zhuǎn)換為普通的圖形，可以選擇要分離的元件實(shí)例，執(zhí)行“修改”→“分離”命令，或者按Ctrl+B快捷鍵。實(shí)例分離后便不會(huì)隨元件的改變而改變。4.5案例：多彩花朵——編輯元件和實(shí)例4.5.2創(chuàng)建和編輯實(shí)例4.6案例：瀏覽風(fēng)景圖片——庫(kù)【案例目的】通過(guò)風(fēng)景圖片.fla源文件認(rèn)識(shí)庫(kù)。【知識(shí)要點(diǎn)】庫(kù)面板，應(yīng)用庫(kù)中的各種元件。【案例效果】四張不同的風(fēng)景圖片依次顯示的動(dòng)畫效果。演示案例：瀏覽風(fēng)景圖片F(xiàn)lash提供了公用庫(kù)，主要有學(xué)習(xí)交互、按鈕和類3種，執(zhí)行“窗口”→“公用庫(kù)”命令，選擇相應(yīng)的命令，即可打開(kāi)相應(yīng)的公用庫(kù)。學(xué)習(xí)交互：主要放置交互組件，可通過(guò)在交互組件中與應(yīng)用程序進(jìn)行交互來(lái)做出響應(yīng)。按鈕：主要放置一些按鈕組件，可以直接從中選擇需要的按鈕，將其應(yīng)用到動(dòng)畫中。類：類是對(duì)象的抽象表示形式，主要在ActionScript3.0編程時(shí)使用。4.6案例：瀏覽風(fēng)景圖片——庫(kù)4.6.1公用庫(kù)

在動(dòng)畫