第4章_元件實(shí)例與庫

1、Flash項(xiàng)目實(shí)踐教程（第三版）Part4第4章 元件、實(shí)例與庫目標(biāo)概述學(xué)習(xí)要求本章將全面介紹Flash CS6 Professional中的元件的概念和基本類型，創(chuàng)建和編輯三種元件方法，使學(xué)習(xí)者能充分的理解3種類型元件之間的區(qū)別和聯(lián)系，并清楚的了解元件與實(shí)例之前的關(guān)系。學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)知識點(diǎn)了解理解掌握應(yīng)用圖形元件的基本概念、影片剪輯元件、按鈕元件的創(chuàng)建和編輯方法 案例1、案例2影片剪輯元件的基本概念 案例2按鈕元件的基本概念 案例1、案例3、案例4圖形元件的創(chuàng)建和編輯方法 案例3影片剪輯元件的創(chuàng)建和編輯方法 案例1按鈕元件的創(chuàng)建和編輯方法案例4庫的概念案例3庫的基本操作案例7實(shí)例的概念案

2、例3 實(shí)例的編輯方法案例1知識導(dǎo)航案例1：制作“星形”圖形元件4.14.1案例概述案例效果本案例主要通過新建元件、繪制與編輯圖形元件、場景與庫等操作來完成簡單的“星形”圖形元件的創(chuàng)建。創(chuàng)建完成后的星形圖形元件出現(xiàn)在庫中，等待隨時(shí)調(diào)用。案例1制作“星形”圖形元件星形元件最終效果圖案例分析制作“星形”圖形元件主要應(yīng)用繪畫工具完成圖形的繪制，然后創(chuàng)建“星形”圖形元件。相關(guān)知識1. 元件的概念元件是Flash中一個(gè)重要而且使用非常頻繁的概念，狹義的元件是指在Flash創(chuàng)作環(huán)境中或使用Button（AS2.0）、SimpleButton（AS3.0）和MovieClip類創(chuàng)建過一次的圖形、按鈕或影片剪輯

3、這三種元件。元件一旦創(chuàng)建，就會被自動添加到當(dāng)前影片的庫中，然后可以自始至終地在當(dāng)前影片或其他影片中重復(fù)使用。用戶創(chuàng)建的所有元件都會自動變?yōu)楫?dāng)前文件的庫的一部分。2.元件的類型（1） 圖形元件 圖形元件可用于靜態(tài)圖像，并可用來創(chuàng)建連接到主時(shí)間軸的可重用動畫片段。（2） 影片剪輯元件 影片剪輯元件是Flash電影中一個(gè)相當(dāng)重要的角色。使用影片剪輯元件可以創(chuàng)建可重用的動畫片段。影片剪輯擁有各自獨(dú)立于主時(shí)間軸的多幀時(shí)間軸，不受場景和時(shí)間軸的影響。（3） 按鈕元件 按鈕元件是一個(gè)比較特殊的元件，它不是單一的圖像，它用4種不同的狀態(tài)來顯示。使用按鈕元件可以創(chuàng)建用于響應(yīng)鼠標(biāo)單擊、滑過或其他動作的交互式按鈕。

4、案例1 繪制“五星紅旗”案例1制作“星形”圖形元件相關(guān)知識3. 庫資源的概念庫資源在創(chuàng)作或運(yùn)行時(shí)，可以將元件作為共享庫資源在文檔間共享。4.認(rèn)識庫使用庫可以省去許多重復(fù)的操作和一些不必要的麻煩。另外，使用庫對于最大程度上減小動畫文件的體積也具有決定性的意義。Flash CS6 Professional的庫包括兩種，當(dāng)前編輯文件的“庫”和Flash CS6 Professional中自帶的“公用庫”， Flash CS6 Professional中的“庫”與“公用庫”有著相同的界面，如圖所示。案例1制作“星形”圖形元件相關(guān)知識4.認(rèn)識庫（1）標(biāo)題欄標(biāo)題欄顯示當(dāng)前庫的標(biāo)題，從中可以看出是公用庫還是

5、專用庫。（2）列表欄在列表欄中，列出了庫中包含的所有元素的各種屬性，包括名稱、類型、使用次數(shù)、鏈接和修改日期5項(xiàng)。（3）預(yù)覽窗口單擊選定列表欄中的某一個(gè)文件，在列表欄上面的預(yù)覽窗口中就可以對其進(jìn)行預(yù)覽。（4）編輯工具在庫界面左下方有“新建元件”、“新建文件夾”、“元件屬性”、“刪除元件”4個(gè)按鈕可以對庫文件進(jìn)行編輯。案例1制作“星形”圖形元件相關(guān)知識5. 認(rèn)識元件庫每一個(gè)Flash CS6 Professional動畫文件中都有一個(gè)元件庫，這個(gè)元件庫僅存放當(dāng)前動畫文件的元件。該庫中的文件夾和文件包含了當(dāng)前編輯環(huán)境下所有的元件以及導(dǎo)入的位圖和其他對象，如聲音、視頻等，相當(dāng)于在當(dāng)前這部影片中扮演每

6、個(gè)角色的所有演員的大集合。6.認(rèn)識公用庫選擇“窗口”“公用庫”，可以在子菜單中看到聲音、按鈕、類這3項(xiàng)，這就是Flash CS4 Professional的內(nèi)置公用庫。選擇其中的某項(xiàng)后即可打開該項(xiàng)的公用庫。7.新增元件到庫在Flash CS6中，如果要將對象新增到元件庫內(nèi)，最常用的方法是從舞臺中選擇某個(gè)對象轉(zhuǎn)換為元件。另外，還可以如上所述創(chuàng)建一個(gè)空元件，然后在元件編輯模式下再為其添加內(nèi)容，如此可將繪制的元件新增到元件庫內(nèi)。案例1制作“星形”圖形元件案例2：制作“星光閃爍”影片剪輯4.24.2案例概述案例效果本案例將以“星光閃爍”效果為例學(xué)習(xí)影片剪輯的創(chuàng)建與編輯。完成此案例能掌握影片剪輯元件的創(chuàng)

7、建和編輯的方法，熟練“庫”的操作方法。案例2制作“星光閃爍”影片剪輯“星光閃爍”影片剪輯最終效果圖案例分析本案例主要完成“星形”影片剪輯元件的創(chuàng)建與庫的操作以及編輯影片剪輯元件，調(diào)整其透明度，創(chuàng)建傳統(tǒng)補(bǔ)間動畫，并在場景中應(yīng)用影片剪輯，完成“星光閃爍”動畫的制作。相關(guān)知識影片剪輯簡介影片剪輯是Flash中最具交互性、用途最廣、功能最強(qiáng)的部分，它基本上是一個(gè)小的電影。如果主場景中存在影片剪輯，即使主電影的時(shí)間軸已經(jīng)停止，影片剪輯的時(shí)間軸仍可以繼續(xù)播放。這里可以將影片剪輯設(shè)想為主電影中嵌套的小電影。每個(gè)影片剪輯在時(shí)間軸的層次結(jié)構(gòu)樹中都有相應(yīng)的位置。使用loadMovie動作加載到Flash Play

8、er中的影片也有獨(dú)立的時(shí)間軸，并且它在顯示列表中也有相應(yīng)的位置。使用動作腳本可以在影片剪輯之間發(fā)送消息，以使它們能夠彼此控制。例如，一段影片剪輯的時(shí)間軸中最后一幀上的動作可以指示開始播放另一段影片剪輯。使用影片剪輯的動作和方法可以對影片剪輯進(jìn)行拖動、加載等控制。要控制影片剪輯，必須通過使用目標(biāo)路徑（該路徑指示影片剪輯在顯示列表中的唯一位置）來指明它的位置。案例1 繪制“五星紅旗”案例2制作“星光閃爍”影片剪輯案例3：制作“交互式按鈕”元件4.34.3案例概述案例效果主要應(yīng)用創(chuàng)建、編輯按鈕元件來完成“交互式按鈕”效果的制作。案例3制作“交互式按鈕”元件“交互式按鈕”元件最終效果圖案例分析本案例分

9、析按鈕元件的構(gòu)造，了解按鈕的功能。通過導(dǎo)入的位圖創(chuàng)建“花形按鈕”圖形，并將該圖形應(yīng)用于按鈕的各種狀態(tài)中。相關(guān)知識1.認(rèn)識按鈕元件按鈕元件實(shí)際上是一個(gè)只有4幀的交互影片剪輯。當(dāng)為元件選擇按鈕行為時(shí)，F(xiàn)lash會創(chuàng)建一個(gè)4幀的時(shí)間軸。前3幀顯示按鈕的三種可能狀態(tài)；第4幀定義按鈕的活動區(qū)域。打開按鈕元件庫將一個(gè)按鈕元件拖到舞臺上，舞臺上將出現(xiàn)該元件的實(shí)例，如右圖所示。可以看到，在按鈕元件編輯模式中，時(shí)間軸有4個(gè)幀，分別是彈起（Up）、指針經(jīng)過（Over）、按下（Down）和點(diǎn)擊（Hit），每一幀都有一個(gè)特定的功能，說明如下：彈起（Up）：表示鼠標(biāo)指針沒有滑過按鈕或者單擊按鈕后又立刻釋放后的狀態(tài)。指針

10、經(jīng)過（Over）：表示鼠標(biāo)指針經(jīng)過按鈕上面時(shí)的狀態(tài)。按下（Down）：表示鼠標(biāo)單擊按鈕時(shí)的外觀。點(diǎn)擊（Hit）：用來定義可以響應(yīng)鼠標(biāo)單擊動作的有效區(qū)域。案例1 繪制“五星紅旗”案例3制作“交互式按鈕”元件相關(guān)知識2.實(shí)例的概念實(shí)例是指位于舞臺上或嵌套在另一個(gè)元件內(nèi)的元件副本。實(shí)例可以與它的元件在顏色、大小和功能上有差別。編輯元件會更新它的所有實(shí)例，但對元件的一個(gè)實(shí)例應(yīng)用效果則只更新該實(shí)例。3.創(chuàng)建和編輯實(shí)例創(chuàng)建的元件會保存在“庫”中，“庫”只用于保存當(dāng)前動畫制作中自行創(chuàng)建的元件。然而，無論是公用庫還是“庫”中的元件都可直接應(yīng)用于動畫制作中。當(dāng)需要這些元件的時(shí)候，可以數(shù)次將其直接拖入到工作區(qū)中應(yīng)

11、用，這時(shí)便會生成該元件的“實(shí)例”。實(shí)例可以創(chuàng)建，當(dāng)然也可以編輯，編輯后的實(shí)例仍會以元件的形式保存在庫中。元件、實(shí)例與庫是相互關(guān)聯(lián)的，也是缺一不可的。每個(gè)元件實(shí)例都有獨(dú)立于該元件的自己的屬性，可以同原有元件相分離?？梢愿淖兩?、透明度或?qū)嵗牧炼龋匦露x實(shí)例的類型（例如，把圖形更改為影片剪輯）；并可以設(shè)置動畫在圖形實(shí)例內(nèi)的播放形式，也可以傾斜、旋轉(zhuǎn)或縮放實(shí)例，這并不會影響元件。此外，可以給影片剪輯或按鈕實(shí)例命名，這樣就可以使用ActionScript更改它的屬性。案例3制作“交互式按鈕”元件本章小結(jié)案例1 繪制“五星紅旗”本章內(nèi)容是Flash學(xué)習(xí)中極為重要的內(nèi)容，通過本章的學(xué)習(xí)能夠掌握創(chuàng)建和編輯元件的方法；分清3種類型元件之間的區(qū)別；弄清楚元件與實(shí)例之間的關(guān)系；了解“公用庫”和“庫”的區(qū)別，學(xué)會使用庫的編輯工具。本 章 小 結(jié)思考與練習(xí)案例1 繪制“五星紅旗”1. 什么是元件？元件與實(shí)例是什么關(guān)系？怎樣進(jìn)行庫的管理與使用？2. 將一動畫文件轉(zhuǎn)換為影片剪輯元件。3. 練習(xí)按鈕元件、實(shí)例的創(chuàng)建、編輯及綜合應(yīng)用。思 考 與 練 習(xí)拓展訓(xùn)練案例1 繪制“五星紅旗”訓(xùn)練1：制作“光束閃爍”的影片剪輯任務(wù)要求：完成光束閃爍的影片剪輯動畫。要求如下：1. 應(yīng)用“橢圓工具”繪制朝陽圖形元件。2. 制作朝陽慢慢變大的動畫效果。3. 應(yīng)用“矩形工具”繪制光束圖形元件。4.應(yīng)用“縮放