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

1、Flash項(xiàng)目實(shí)踐教程（第三版）Part4第4章 元件、實(shí)例與庫(kù)目標(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)知識(shí)點(diǎn)了解理解掌握應(yīng)用圖形元件的基本概念、影片剪輯元件、按鈕元件的創(chuàng)建和編輯方法 案例1、案例2影片剪輯元件的基本概念 案例2按鈕元件的基本概念 案例1、案例3、案例4圖形元件的創(chuàng)建和編輯方法 案例3影片剪輯元件的創(chuàng)建和編輯方法 案例1按鈕元件的創(chuàng)建和編輯方法案例4庫(kù)的概念案例3庫(kù)的基本操作案例7實(shí)例的概念案

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

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

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

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

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

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

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

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

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

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