FlashAS3.0動(dòng)畫(huà)程序設(shè)計(jì)案例教第7章

第7章 顯示編程FlashAS3.0

顯示列表處理顯示對(duì)象繪圖API

處理位圖顏色變換使用濾鏡7.1顯示列表

顯示列表是AS3.0中的一個(gè)新概念，用于組織出現(xiàn)在舞臺(tái)上的所有可視對(duì)象。一個(gè)Flash影片可能存在很多需要在舞臺(tái)上顯示的可視對(duì)象。7.1.1顯示列表結(jié)構(gòu)舞臺(tái)是包括顯示對(duì)象的基礎(chǔ)容器。每個(gè)應(yīng)用程序都有一個(gè)Stage對(duì)象，其中包含所有的屏幕顯示對(duì)象。舞臺(tái)是頂級(jí)容器，它位于顯示列表層次結(jié)構(gòu)的頂部。所有的可視對(duì)象可分為顯示對(duì)象容器和普通顯示對(duì)象。顯示對(duì)象容器和普通顯示對(duì)象不同，它可以包含其他顯示對(duì)象或顯示對(duì)象容器。///////////////////////////////http://///7.1.2stage、root、this、parent

stage、root、parent是每個(gè)可視對(duì)象都具有的屬性。stage指舞臺(tái)對(duì)象，可以使用mysprite.stage的形式訪問(wèn)舞臺(tái)對(duì)象，其中mysprite是自定義的可視對(duì)象名。root是影片文件(*.swf)的根，通常指的是主時(shí)間軸或文檔類對(duì)象?？梢允褂胢ysprite.root形式訪問(wèn)影片文件的根對(duì)象。parent是指當(dāng)前對(duì)象的上一級(jí)容器對(duì)象。比如，在主場(chǎng)景的時(shí)間軸中，this.parent代表舞臺(tái)。

this是AS3.0的保留關(guān)鍵字，指的是當(dāng)前所在的對(duì)象。比如，如果代碼出現(xiàn)在主時(shí)間軸的關(guān)鍵幀中，那么this就代表root。

7.1.3核心顯示類

AS3.0的flash.display包中包括可在FlashPlayer中顯示的可視對(duì)象的類。

7.2處理顯示對(duì)象7.2.1在顯示列表中添加顯示對(duì)象實(shí)例化顯示對(duì)象時(shí)，在將顯示對(duì)象實(shí)例添加到顯示列表上的顯示對(duì)象容器之前，顯示對(duì)象不會(huì)出現(xiàn)屏幕上（即在舞臺(tái)上）。

importflash.display.*;importflash.text.TextField;varmyText:TextField=newTextField();myText.text="Buenosdias.";this.addChild(myText);7.2.2處理顯示對(duì)象容器如果從顯示列表中刪除某個(gè)DisplayObjectContainer對(duì)象，或者以其它某種方式移動(dòng)該對(duì)象或?qū)ζ溥M(jìn)行變形處理，則會(huì)同時(shí)刪除、移動(dòng)DisplayObjectContainer中的每個(gè)顯示對(duì)象或?qū)ζ溥M(jìn)行變形處理。顯示對(duì)象容器本身就是一種顯示對(duì)象，它可以添加到其它顯示對(duì)象容器中。要使某一顯示對(duì)象出現(xiàn)在顯示列表中，必須將該顯示對(duì)象添加到顯示列表上的顯示對(duì)象容器中。使用容器對(duì)象的addChild()方法或addChildAt()方法可執(zhí)行此操作。例如，如果下面的代碼沒(méi)有最后一行，將不會(huì)顯示myTextField對(duì)象：varmyTextField:TextField=newTextField();myTextField.text="hello";this.root.addChild(myTextField);

使用addChildAt()方法可將子級(jí)添加到顯示對(duì)象容器的子級(jí)列表中的特定位置。使用getChildAt()方法來(lái)驗(yàn)證顯示對(duì)象的圖層順序。getChildAt()方法根據(jù)向容器傳遞的索引編號(hào)返回容器的子對(duì)象。

removeChild()和removeChildAt()方法并不完全刪除顯示對(duì)象實(shí)例。這兩種方法只是從容器的子級(jí)列表中刪除顯示對(duì)象實(shí)例。該實(shí)例仍可由另一個(gè)變量引用。（請(qǐng)使用delete運(yùn)算符完全刪除對(duì)象。）

7.2.3遍歷顯示列表顯示列表是一個(gè)樹(shù)結(jié)構(gòu)。樹(shù)的頂部是舞臺(tái)，它可以包含多個(gè)顯示對(duì)象。

DisplayObjectContainer類包括通過(guò)顯示對(duì)象容器的子級(jí)列表遍歷顯示列表的屬性和方法。例如，考慮下面的代碼，其中在container對(duì)象（該對(duì)象為Sprite，Sprite類用于擴(kuò)展DisplayObjectContainer類）中添加了兩個(gè)顯示對(duì)象title和pict：varcontainer:Sprite=newSprite();vartitle:TextField=newTextField();title.text="Hello";varpict:Loader=newLoader();varurl:URLRequest=newURLRequest("banana.jpg");pict.load(url);="bananaloader";container.addChild(title);container.addChild(pict);7.2.4處理顯示對(duì)象的事件

DisplayObject類從EventDispatcher類繼承。這意味著，每個(gè)顯示對(duì)象都可完全參與到事件模型中）。每個(gè)顯示對(duì)象可使用其addEventListener()方法（繼承自EventDispatcher類）來(lái)偵聽(tīng)特定的事件，但只有偵聽(tīng)對(duì)象是該事件的事件流的一部分時(shí)才能實(shí)現(xiàn)。處理顯示對(duì)象事件時(shí)需要記住的一個(gè)重要問(wèn)題是：從顯示列表中刪除顯示對(duì)象時(shí)，事件偵聽(tīng)器的存在將會(huì)對(duì)是否從內(nèi)存中自動(dòng)刪除顯示對(duì)象（垃圾回收）產(chǎn)生影響。如果顯示對(duì)象擁有訂閱為其事件的偵聽(tīng)器的對(duì)象，即使從顯示列表中刪除了顯示對(duì)象，也不會(huì)從內(nèi)存中刪除顯示對(duì)象，因?yàn)轱@示對(duì)象仍然擁有到這些偵聽(tīng)器對(duì)象的引用。7.2.5適當(dāng)選擇DisplayObject子類(1)如果不需要可作為其它顯示對(duì)象的容器的對(duì)象（即只需要用作獨(dú)立屏幕元素的對(duì)象），請(qǐng)根據(jù)使用目的選擇DisplayObject或InteractiveObject兩個(gè)子類中的一個(gè)：用于顯示位圖圖像的Bitmap。用于添加文本的TextField。用于顯示視頻的Video。用于繪制屏幕內(nèi)容的“畫(huà)布”的Shape。用于Flash具體創(chuàng)作項(xiàng)的MorphShape、StaticText或SimpleButton。(2)如果需要使用變量來(lái)引用主舞臺(tái)，請(qǐng)使用Stage類作為其數(shù)據(jù)類型。(3)如果需要容器來(lái)加載外部SWF文件或圖像文件，請(qǐng)使用Loader實(shí)例。(4)如果需要將一個(gè)對(duì)象用作其它顯示對(duì)象的容器（無(wú)論是否還要使用ActionScript在顯示對(duì)象上進(jìn)行繪制），請(qǐng)選擇其中一個(gè)DisplayObjectContainer子類：如果對(duì)象是只使用ActionScript創(chuàng)建的，或者如果對(duì)象作為只使用ActionScript創(chuàng)建和處理的自定義顯示對(duì)象的基類，請(qǐng)選擇Sprite。如果通過(guò)創(chuàng)建變量來(lái)引用在Flash創(chuàng)建的影片剪輯元件，請(qǐng)選擇MovieClip。(5)如果要?jiǎng)?chuàng)建的類與Flash庫(kù)中的影片剪輯元件關(guān)聯(lián)，請(qǐng)選擇其中一個(gè)DisplayObjectContainer子類作為該類的基類：如果關(guān)聯(lián)的影片剪輯元件在多個(gè)幀上有內(nèi)容，請(qǐng)選擇MovieClip。如果關(guān)聯(lián)的影片剪輯元件僅在第一幀上有內(nèi)容，請(qǐng)選擇Sprite。7.2.6顯示對(duì)象的舞臺(tái)表現(xiàn)改變位置要設(shè)置顯示對(duì)象的位置，請(qǐng)更改對(duì)象的x和y屬性。(2)平移和滾動(dòng)顯示對(duì)象使用scrollRect屬性定義顯示對(duì)象的可查看區(qū)域。

(3)處理大小和縮放對(duì)象可以采用兩種方法來(lái)測(cè)量和處理顯示對(duì)象的大?。菏褂贸叽鐚傩裕╳idth和height）或縮放屬性（scaleX和scaleY）。(4)緩存顯示對(duì)象將顯示對(duì)象的cacheAsBitmap屬性設(shè)置為true.DisplayObject類的opaqueBackground屬性和scrollRect屬性與使用cacheAsBitmap屬性的位圖緩存有關(guān)。盡管這三個(gè)屬性彼此互相獨(dú)立，但是，當(dāng)對(duì)象緩存為位圖時(shí)，opaqueBackground和scrollRect屬性的作用最佳，只有將cacheAsBitmap設(shè)置為true時(shí)，才能看到opaqueBackground和scrollRect屬性帶來(lái)的性能優(yōu)勢(shì)。(5)應(yīng)用混合模式每個(gè)顯示對(duì)象都有blendMode屬性.

(6)調(diào)整DisplayObject顏色

使用ColorTransform類的方法(flash.geom.ColorTransform)來(lái)調(diào)整顯示對(duì)象的顏色。

(7)旋轉(zhuǎn)對(duì)象使用rotation屬性可以旋轉(zhuǎn)顯示對(duì)象。

(8)淡化對(duì)象將alpha屬性設(shè)置為介于0和1之間的任何值，其中0表示完全透明，1表示完全不透明。

(9)遮罩顯示對(duì)象將遮罩對(duì)象設(shè)置為被遮罩的顯示對(duì)象的mask屬性.(10)動(dòng)態(tài)加載顯示內(nèi)容Loader類可以加載這些資源。///////////////////////////////http://///7.3案例——圖形堆疊處理程序7.3.1案例任務(wù)描述該案例是以第三章的3.2小節(jié)的案例“創(chuàng)建圖形類程序”geometricshapes案例應(yīng)用程序的基礎(chǔ)上構(gòu)建的。主要的功能對(duì)若干個(gè)圖形進(jìn)行堆疊處理，即程序可以動(dòng)態(tài)向舞臺(tái)添加任意選中的、可定制大小的圖形，多個(gè)圖形添加到舞臺(tái)后，可以調(diào)整其堆疊次序，即上下覆蓋的層次，并顯示輸出這些層次。

7.3.2操作流程程序功能演示;

學(xué)生動(dòng)手練習(xí).7.3.3案例小結(jié)該案例程序?qū)崿F(xiàn)了處理顯示對(duì)象的許多技術(shù)，如擴(kuò)展顯示對(duì)象類、在顯示列表中添加對(duì)象、分層顯示對(duì)象和處理顯示對(duì)象容器、響應(yīng)顯示對(duì)象事件、使用顯示對(duì)象的屬性和方法等。程序中在畫(huà)布上添加顯示對(duì)象、單擊鼠標(biāo)并拖動(dòng)對(duì)象、重新排列顯示對(duì)象層等具體方法實(shí)現(xiàn)的功能很實(shí)用，是操作顯示對(duì)象常用的方法和技術(shù)，應(yīng)該熟練掌握。7.4圖形繪制API

繪圖API是ActionScript中的一項(xiàng)內(nèi)置功能的名稱，可以使用該功能來(lái)創(chuàng)建矢量圖形如直線、曲線、形狀、填充和漸變等，并使用ActionScript在屏幕上顯示它們。(1)Graphics類每個(gè)Shape、Sprite和MovieClip對(duì)象都具有一個(gè)graphics屬性，它是Graphics類的一個(gè)實(shí)例。Graphics類包含用于繪制線條、填充和形狀的屬性和方法。(2)直線和曲線繪制使用Graphics實(shí)例進(jìn)行的所有繪制均基于包含直線和曲線的基本繪制。(3)使用內(nèi)置方法繪制形狀為了便于繪制常見(jiàn)形狀如圓、橢圓、矩形以及帶圓角的矩形等，AS3.0中提供了用于繪制這些常見(jiàn)形狀的方法。(4)創(chuàng)建漸變線條和填充

graphics對(duì)象也可以繪制漸變筆觸和填充，而不是純色筆觸和填充。漸變筆觸是使用lineGradientStyle()方法創(chuàng)建的；漸變填充是使用beginGradientFill()方法創(chuàng)建的.(5)將Math類與繪制方法配合使用

Math.sin()、Math.cos()和Math.tan()

(6)使用繪圖API進(jìn)行動(dòng)畫(huà)處理使用繪圖API創(chuàng)建內(nèi)容的一個(gè)優(yōu)點(diǎn)是，并不限于將內(nèi)容放置一次。可通過(guò)保留和修改用于繪制的變量來(lái)修改所繪制的內(nèi)容。可以通過(guò)更改變量和重繪（在一段幀上或使用計(jì)時(shí)器）來(lái)利用原有的動(dòng)畫(huà)。///////////////////////////////http://///7.5案例——自選圖形繪制程序7.5.1案例任務(wù)描述該案例實(shí)現(xiàn)的是使用AS3.0的繪圖API，通過(guò)畫(huà)線和填充，使用鼠標(biāo)從左上到右下畫(huà)出矩形形狀時(shí)，則繪制出選中的幾何圖形橢圓或矩形。并將繪制的圖形對(duì)象，綁定鼠標(biāo)點(diǎn)擊事件，當(dāng)鼠標(biāo)點(diǎn)擊圖形時(shí)，將其從畫(huà)布上刪除。7.5.2操作流程

程序功能演示;

學(xué)生動(dòng)手練習(xí).7.5.3案例小結(jié)該案例實(shí)現(xiàn)了如何使用繪圖API畫(huà)線并填充生成相應(yīng)的幾何圖形，以及如何刪除圖形等。程序中使用MovieClip類的生成顯示對(duì)象，調(diào)用其屬性Graphic類及方法，進(jìn)行幾何圖形的繪制、填充顏色等。使用該方法還有一好處時(shí)，清除時(shí)較方便，直接調(diào)用Graphic類的clear()方法即可。程序中還使用了ComboBox、NumericStepper等組件，這些用作用戶界面的常用組件，常用于用戶交互操作界面的實(shí)現(xiàn)。7.6處理位圖

圖像使用兩種類型：位圖和矢量。位圖圖形也稱為光柵圖形，由排列為矩形網(wǎng)格形式的小方塊（像素）組成。矢量圖形由以數(shù)學(xué)方式生成的幾何形狀（如直線、曲線和多邊形）組成。位圖文件格式

GIF、JPG和PNG

(2)位圖的透明度

(3)Bitmap和BitmapData類

Bitmap類用于在屏幕上顯示位圖圖像，BitmapData類用于訪問(wèn)和操作位圖的原始圖像數(shù)據(jù)。(4)處理像素

BitmapData類包含一組用于處理像素?cái)?shù)據(jù)值的方法。

(5)復(fù)制位圖數(shù)據(jù)從一個(gè)圖像向另一個(gè)圖像中復(fù)制位圖數(shù)據(jù)，使用多種方法：clone()、copyPixels()、copyChannel()和draw()。(6)滾動(dòng)位圖

scroll()方法可以復(fù)制屏幕上的位圖,然后將它粘貼到由(x,y)參數(shù)指定的新偏移位置7.7案例——拼圖小游戲程序7.7.1案例任務(wù)描述該案例實(shí)現(xiàn)的是使用Bitmap和BitmapData類，將圖像切割成八塊隨機(jī)放置，再重新拼接成原圖。程序中隨著對(duì)切割后形成的小塊圖像，綁定鼠標(biāo)拖放事件處理函數(shù)，達(dá)到可以再重排拼接的效果，如拼接錯(cuò)誤則等待需要重新調(diào)整，如拼接正確則刷新屏幕，并隨機(jī)調(diào)入新的圖像進(jìn)行拼接。7.7.2操作流程程序功能演示;

學(xué)生動(dòng)手練習(xí).7.7.3案例小結(jié)該案例主要通過(guò)Bitmap類、BitmapData類，實(shí)現(xiàn)位圖數(shù)據(jù)的復(fù)制、移動(dòng)、索引等管理功能，從而實(shí)現(xiàn)拼圖小游戲的程序。程序中沒(méi)有任何設(shè)計(jì)界面，全部在時(shí)間軸上完成程序功能的代碼，這些程序代碼實(shí)現(xiàn)了作為可視對(duì)象的位圖，在舞臺(tái)上添加、圖像容器及其裝載圖像、切割圖像、移動(dòng)圖像、索引組裝圖像等功能。7.8顏色及其變換(1)RGB顏色模型

Flash使用RGB顏色模型，每一種顏色都由紅、綠、藍(lán)構(gòu)成。顏色指定為數(shù)字，使用uint類型來(lái)保存，由三個(gè)字節(jié)構(gòu)成，計(jì)24位色，共計(jì)約有1380萬(wàn)種的顏色。在ActionScript中，使用十六進(jìn)制形式來(lái)表示顏色值：0xRRGGBB，即24位色表示法。還有32位色表示，另增加8位表示透明度，十六進(jìn)制的表示形式為0xAARRGGBB，AA代表透明度值。在使用時(shí)，是24位色，還是32位色，取決于使用的特定函數(shù)。

//24位合成色的提取red=color24>>16;green=color24>>8&0xFF;blue=color24&0xFF;

//32位合成色的提取alpha=color32>>24;red=color32>>16&0xFF;green=color32>>8&oxFF;blue=color32&oxFF;

(2)顏色變換對(duì)于Sprite、MovieClip或其他顯示對(duì)象，都有一個(gè)稱為transform的屬性，它是flash.geom.Transform類的一個(gè)實(shí)例，包含了可以用來(lái)進(jìn)行縮放、旋轉(zhuǎn)、定位、顏色等各種屬性。

importflash.geom.ColorTransformmySprite.transform.colorTransform=newColorTransform(rm,gm,bm,am,rOffset,gOffset,bOffset,aOffset)

7.9案例——圖片顏色變換小程序7.9.1案例任務(wù)描述該案例實(shí)現(xiàn)的是使用BitmapData類的colorTransform方法，對(duì)位圖數(shù)據(jù)進(jìn)行顏色變換功能。程序中對(duì)指定圖片，分割成4個(gè)矩形區(qū)域，根據(jù)不同的顏色變換參數(shù)，使用colorTransform方法對(duì)相應(yīng)矩形區(qū)域的位圖數(shù)據(jù)進(jìn)行顏色變換。7.9.2操作流程程序功能演示;

學(xué)生動(dòng)手練習(xí).7.9.3案例小結(jié)該案例主要展現(xiàn)的是BitmapData類的colorTransform方法的用法。設(shè)置的參數(shù)不同，往往得到不同的顏色變換效果。在AS3.0的編程實(shí)踐中，顯示對(duì)象的顏色變換，往往不是單獨(dú)進(jìn)行的，而是常伴隨著先進(jìn)行平移、縮放、旋轉(zhuǎn)等物理變換。7.10過(guò)濾顯示對(duì)象AS3.0包括九種可應(yīng)用于任何顯示對(duì)象或BitmapData實(shí)例的濾鏡。(1)創(chuàng)建和應(yīng)用濾鏡使用濾鏡可以對(duì)位圖和顯示對(duì)象應(yīng)用從投影到斜角和模糊等各種效果。創(chuàng)建了濾鏡對(duì)象的實(shí)例后，通過(guò)使用該對(duì)象的filters屬性可以很容易地將此實(shí)例應(yīng)用于顯示對(duì)象；如果是BitmapData對(duì)象，可以使用applyFilter()方法。importflash.filters.BevelFilter;importflash.filters.GlowFilter;//創(chuàng)建濾鏡并將其添加到數(shù)組。varbevel:BevelFilter=newBeve