第4章_元件實例與庫

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

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

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

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

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

6、個角色的所有演員的大集合。6.認識公用庫選擇“窗口”“公用庫”，可以在子菜單中看到聲音、按鈕、類這3項，這就是Flash CS4 Professional的內(nèi)置公用庫。選擇其中的某項后即可打開該項的公用庫。7.新增元件到庫在Flash CS6中，如果要將對象新增到元件庫內(nèi)，最常用的方法是從舞臺中選擇某個對象轉(zhuǎn)換為元件。另外，還可以如上所述創(chuàng)建一個空元件，然后在元件編輯模式下再為其添加內(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)補間動畫，并在場景中應(yīng)用影片剪輯，完成“星光閃爍”動畫的制作。相關(guān)知識影片剪輯簡介影片剪輯是Flash中最具交互性、用途最廣、功能最強的部分，它基本上是一個小的電影。如果主場景中存在影片剪輯，即使主電影的時間軸已經(jīng)停止，影片剪輯的時間軸仍可以繼續(xù)播放。這里可以將影片剪輯設(shè)想為主電影中嵌套的小電影。每個影片剪輯在時間軸的層次結(jié)構(gòu)樹中都有相應(yīng)的位置。使用loadMovie動作加載到Flash Play

8、er中的影片也有獨立的時間軸，并且它在顯示列表中也有相應(yīng)的位置。使用動作腳本可以在影片剪輯之間發(fā)送消息，以使它們能夠彼此控制。例如，一段影片剪輯的時間軸中最后一幀上的動作可以指示開始播放另一段影片剪輯。使用影片剪輯的動作和方法可以對影片剪輯進行拖動、加載等控制。要控制影片剪輯，必須通過使用目標路徑（該路徑指示影片剪輯在顯示列表中的唯一位置）來指明它的位置。案例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.認識按鈕元件按鈕元件實際上是一個只有4幀的交互影片剪輯。當為元件選擇按鈕行為時，F(xiàn)lash會創(chuàng)建一個4幀的時間軸。前3幀顯示按鈕的三種可能狀態(tài)；第4幀定義按鈕的活動區(qū)域。打開按鈕元件庫將一個按鈕元件拖到舞臺上，舞臺上將出現(xiàn)該元件的實例，如右圖所示?？梢钥吹?，在按鈕元件編輯模式中，時間軸有4個幀，分別是彈起（Up）、指針經(jīng)過（Over）、按下（Down）和點擊（Hit），每一幀都有一個特定的功能，說明如下：彈起（Up）：表示鼠標指針沒有滑過按鈕或者單擊按鈕后又立刻釋放后的狀態(tài)。指針

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

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