Flash顯示編程-ActionScript從入門到精通教程(六)
ActionScript是Flash顯示編程的基礎,要想學好編程就需要學好ActionScript,那么要如何去學好呢?下面是陽光網整理的ActionScript從入門到精通教程
Flash顯示編程-ActionScript從入門到精通教程(六)
ActionScript3.0中的顯示編程用于處理出現在Adobe Flash Player 9的舞臺上的元素。 本
章介紹了有關處理屏幕元素的一些基本概念。
每個應用程序都有一個由顯示對象構成的層次結構,這個結構稱為 “顯示列表” 。
顯示列表包含應用程序中的所有可視元素。
顯示元素屬于下列一個或多個組:
ActionScript從入門到精通教程一:舞臺
舞臺是包括顯示對象的基礎容器。每個應用程序都有一個 Stage 對象,其中包含所有的
屏幕顯示對象。舞臺是頂級容器。
每個 SWF 文件都有一個主類。當 Flash Player 在 HTML 頁中打開 SWF 文件時, Flash Player 將調用該類的構造函數,所創
建的實例(始終是一種顯示對象)將添加為 Stage 對象的子級。
SWF 文件的主類始終擴展Sprite類。
【重要術語:學生范文網提示:這些術語是顯示編程最必須的基礎】
Alpha:表示顏色中的透明度 (更準確地說,是不透明度)的顏色值。例如, Alpha 通道值為 60% 的顏色只顯示其最大強度的 60%,即只有 40% 是透明的。
位圖圖形 (Bitmap graphic):在計算機中定義為彩色像素網格(行和列)的圖形。通常,位圖圖形包括數碼照片和類似圖像。
混合模式 (Blending mode):指定兩個重疊圖像的內容應如何進行交互。通常,一個圖像上面的另一個不透明圖像會遮蓋住下面的圖像,因此根本看不到該圖像;但是,不同的混合模式會導致圖像顏色以不同方式混合在一起,因此,生成的內容是兩個圖像的某種組合形式。
顯示列表 (Display list):由 Flash Player 呈現為可見屏幕內容的顯示對象的層次結構。舞臺是顯示列表的根,附加到舞臺或其子級之一上的所有顯示對象構成了顯示列表 (即使并未實際呈現該對象,例如,如果它位于舞臺邊界以外) 。
顯示對象 (Display object):在 Flash Player 中表示某種類型的可視內容的對象。顯示列表中只能包含顯示對象,所有顯示對象類是 DisplayObject 類的子類。
顯示對象容器 (Display object container):一種特殊類型的顯示對象,除了(通常)具有其自己的可視表示形式以外,它還可以包含子顯示對象。
SWF 文件的主類 (Main class of the SWF file):為 SWF 文件中最外面的顯示對象定義行為的類,從概念上講,它是 SWF 文件本身的類。例如,在 Flash 創作環境中創建的 SWF 具有一個 “主時間軸”,它包含所有其它的時間軸; SWF 文件的主類是指將主時間軸作為其實例的類。
蒙版 (Masking):一種將圖像的某些部分隱藏起來 (或者相反,只允許顯示圖像的某些部分)的技術。圖像的隱藏部分將變為透明,因此,將顯示其下面的內容。此術語與畫家的遮蔽膠帶非常相似,遮蔽膠帶用于防止將顏料噴到某些區域上。
舞臺 (Stage):一個可視容器,它是 SWF 文件中的所有可視內容的基礎或背景。
變形 (Transformation):對圖形的可視特性進行的調整,如旋轉對象、改變其縮放比例、傾斜或扭曲其形狀或者改變其顏色。
矢量圖形 (Vector graphic):在計算機中定義為使用特定特性 (如粗細、長度、大小、角度以及位置)繪制的線條和形狀的圖形。
ActionScript從入門到精通教程二:核心顯示類
該圖說明了顯示對象類的類繼承。請注意,其中某些類,尤其是 StaticText、 TextField和
Video 類,不在 flash.display 包中,但它們仍然是從 DisplayObject 類繼承的。
Bitmap — 使用 Bitmap 類可定義從外部文件加載或通過 ActionScript 呈現的位圖對
象。可以通過 Loader 類從外部文件加載位圖。可以加載 GIF、JPG 或 PNG 文件。還
可以創建包含自定義數據的 BitmapData 對象,然后創建使用該數據的 Bitmap 對象。可
以使用 BitmapData 類的方法來更改位圖,無論這些位圖是加載的還是在 ActionScript
中創建的。
Loader — 使用 Loader 類可加載外部資源 (SWF 文件或圖形) 。
Shape — 使用 Shape 類可創建矢量圖形,如矩形、直線、圓等。
SimpleButton 對象是Flash按鈕元件的ActionScript表示形式。SimpleButton 實例有3個按鈕狀態:彈起、按下和指針經過。
Sprite — Sprite對象可以包含它自己的圖形,還可以包含子顯示對象。 (Sprite 類用于擴展 DisplayObjectContainer 類) 。
MovieClip — MovieClip 對象是在 Flash 創作工具中創建的 ActionScript 形式的影片
剪輯元件。實際上,MovieClip與Sprite對象類似,不同的是它還有一個時間軸。
TextField 類包括在flash.text包中,它是用于文本顯示和輸入的顯示對象。
Video類包括在 flash.media包中,它是用于顯示視頻文件的顯示對象。
Stage類用于擴展DisplayObjectContainer類。有一個應用程序的Stage實例,該實例位于顯示列表層次結構的頂部。
ActionScript從入門到精通教程三:創建顯示對象的子類
import flash.display.*;
private class CustomCircle extends Shape
{
var xPos:Number;
var yPos:Number;
var radius:Number;
var color:uint;
public function CustomCircle(xInput:Number,
yInput:Number,
rInput:Number,
colorInput:uint)
{
xPos = xInput;
yPos = yInput;
radius = rInput;
color = colorInput;
this.graphics.beginFill(color);
this.graphics.drawCircle(xPos, yPos, radius);
}
}
DisplayObject 類的屬性和方法
所有顯示對象都是 DisplayObject 類的子類,同樣它們還會繼承 DisplayObject 類的屬性
和方法。繼承的屬性是適用于所有顯示對象的基本屬性。例如,每個顯示對象都有 x 屬性和
y 屬性,用于指定對象在顯示對象容器中的位置。
在顯示列表中添加顯示對象
實例化顯示對象時,在將顯示對象實例添加到顯示列表上的顯示對象容器之前,顯示對象不
會出現屏幕上(即在舞臺上)。 例如,在下面的代碼中,如果省略了最后一行代碼,則myText
TextField對象不可見。在最后一行代碼中,this關鍵字必須引用已添加到顯示列表中的顯示對象容器。
import flash.display.*;
import flash.text.TextField;
var myText:TextField = new TextField();
myText.text = "Buenos dias.";
this.addChild(myText);
當在舞臺上添加任何可視元素時,該元素會成為 Stage 對象的“子級” 。應用程序中加載的
第一個 SWF 文件(例如,HTML 頁中嵌入的文件)會自動添加為 Stage 的子級。它可以
是擴展 Sprite 類的任何類型的對象。
使用 addChildAt() 方法可以調整這些顯示對象在容器中的分層。例如,請考慮使用以下
ActionScript從入門到精通教程四:代碼:
ball_A = new Ball(0xFFCC00, "a");
ball_A.name = "ball_A";
ball_A.x = 20;
ball_A.y = 20;
container.addChild(ball_A);
ball_B = new Ball(0xFFCC00, "b");
ball_B.name = "ball_B";
ball_B.x = 70;
ball_B.y = 20;
container.addChild(ball_B);
ball_C = new Ball(0xFFCC00, "c");
ball_C.name = "ball_C";
ball_C.x = 40;
ball_C.y = 60;
container.addChildAt(ball_C, 1);
執行此代碼后,顯示對象在 container DisplayObjectContainer 對象中的定位如下所示。
請注意對象的分層。
要重新將對象定位到顯示列表的頂部, 只需重新將其添加到列表中。 例如,在前面的代碼后,
要將 ball_A 移到堆棧的頂部,請使用下面的代碼行:
container.addChild(ball_A);
此代碼可有效地將 ball_A 從它在 container 的顯示列表中的位置刪除,然后將它重新添加
到列表的頂部,最終的結果是將它移到堆棧的頂部。
可以使用 getChildAt() 方法來驗證顯示對象的圖層順序。getChildAt() 方法根據您向容
器傳遞的索引編號返回容器的子對象。例如,下面的代碼顯示 container
DisplayObjectContainer 對象的子級列表中不同位置的顯示對象的名稱:
trace(container.getChildAt(0).name); // ball_A
trace(container.getChildAt(1).name); // ball_C
trace(container.getChildAt(2).name); // ball_B
ActionScript從入門到精通教程五:控制舞臺縮放比例
StageScaleMode.EXACT_FIT 按比例縮放 SWF。
StageScaleMode.SHOW_ALL 確定是否顯示邊框 (就像在標準電視上觀看寬屏電影時顯
示的黑條) 。
StageScaleMode.NO_BORDER 確定是否可以部分裁切內容。
處理全屏模式
使用全屏模式可令 SWF 填充查看器的整個顯示器,沒有任何邊框、菜單欄等。Stage 類的
displayState 屬性用于切換 SWF 的全屏模式。可以將 displayState 屬性設置為由
flash.display.StageDisplayState 類中的常量定義的其中一個值。要打開全屏模式,請將
displayState 設置為 StageDisplayState.FULL_SCREEN:
// mySprite 是一個 Sprite 實例,已添加到顯示列表中
mySprite.stage.displayState = StageDisplayState.FULL_SCREEN;
要退出全屏模式,請將 displayState 屬性設置為 StageDisplayState.NORMAL:
mySprite.stage.displayState = StageDisplayState.NORMAL;
此外,用戶可以通過將焦點切換到其它窗口或使用以下組合鍵之一來選擇退出全屏模式:
Esc(所有平臺) 、Ctrl-W (Windows)、Command-W (Mac) 或 Alt-F4 (Windows)。
全屏模式的舞臺縮放行為與正常模式下的相同;縮放比例由 Stage 類的 scaleMode 屬性控制。
通常,如果將 scaleMode 屬性設置為 StageScaleMode.NO_SCALE,則 Stage 的 stageWidth 和
stageHeight 屬性將發生更改,以反映由 SWF 占用的屏幕區域的大小 (在本例中為整個
屏幕)。
打開或關閉全屏模式時,可以使用 Stage 類的 fullScreen 事件來檢測和響應。例如,進入
或退出全屏模式時,您可能需要重新定位、添加或刪除屏幕中的項目,如本例中所示:
import flash.events.FullScreenEvent;
function fullScreenRedraw(event:FullScreenEvent):void
{
if (event.fullScreen)
{
// 刪除輸入文本字段。
// 添加關閉全屏模式的按鈕。
}
else
{
// 重新添加輸入文本字段。
// 刪除關閉全屏模式的按鈕。
}
}
mySprite.stage.addEventListener(FullScreenEvent.FULL_SCREEN,
fullScreenRedraw);
正如此代碼所示,fullScreen 事件的事件對象是 flash.events.FullScreenEvent 類的實例,
它包含指示是啟用 (true) 還是禁用 (false) 全屏模式的 fullScreen 屬性。
在 ActionScript 中處理全屏模式時,需要記住以下注意事項:
只能通過 ActionScript 響應鼠標單擊 (包括右鍵單擊)或按鍵才能啟動全屏模式。
對于有多個顯示器的用戶,SWF 內容將展開且只填充一個顯示器。Flash Player 使用度
量信息來確定哪個顯示器包含 SWF 的最大部分內容,然后使用該顯示器提供全屏模式。
對于 HTML 頁中嵌入的 SWF 文件,嵌入 Flash Player 的 HTML 代碼必須包括名為
allowFullScreen 且值為 true 的 param 標簽和 embed 屬性,如下所示:
...
如果要在網頁中使用 JavaScript 來生成 SWF 嵌入標簽,則必須更改 JavaScript 以添加
allowFullScreen param 標簽和屬性。例如,如果 HTML 頁使用 AC_FL_RunContent()
函數(由 Flex Builder 和 Flash 生成的 HTML 頁使用),則應在該函數調用中添加
allowFullScreen 參數,如下所示:
AC_FL_RunContent(
...
'allowFullScreen','true',
...
); //end AC code
這不適用于在獨立 Flash Player 中運行的 SWF 文件。
在全屏模式下將禁用所有與鍵盤有關的 ActionScript,如 Te x tFi e ld 實例中的鍵盤事件
和文本輸入。用于關閉全屏模式的鍵盤快捷鍵除外。
選擇DisplayObject子類
如果有多個可供選擇的選項,處理顯示對象時要作出的一個重要決策是:每個顯示對象的用
途是什么。 以下原則可以幫助您作出決策。 無論是需要類實例,還是選擇要創建的類的基類,
都可以應用這些建議:
如果不需要可作為其它顯示對象的容器的對象(即只需要用作獨立屏幕元素的對象) ,請
根據使用目的選擇 DisplayObject 或 InteractiveObject 兩個子類中的一個:
用于顯示位圖圖像的 Bitmap。
用于添加文本的 TextField。
用于顯示視頻的 Video。
■ 用于繪制屏幕內容的 “畫布”的 Shape。特別是,如果要創建用于在屏幕上繪制形
狀的實例,而且該實例不是其它顯示對象的容器,則使用 Shape 比使用 Sprite 或
MovieClip 有明顯的性能優勢。
■ 用于 Flash 具體創作項的 MorphShape、StaticText 或 SimpleButton。 (無法以編
程方式創建這些類的實例,但可以通過創建這些數據類型的變量來引用使用 Flash 創
作程序創建的項目。 )
■ 如果需要使用變量來引用主舞臺,請使用 Stage 類作為其數據類型。
■ 如果需要容器來加載外部 SWF 文件或圖像文件,請使用 Loader 實例。加載的內容將作為
Loader 實例的子級添加到顯示列表中。其數據類型將取決于加載內容的性質,如下所示:
■ 加載的圖像將是 Bitmap 實例。
■ 使用 ActionScript 3.0 編寫的已加載 SWF 文件將是 Sprite 或 MovieClip 實例
(或這些類的子類的實例,由內容創建者指定) 。
■ 使用 ActionScript 1.0 或 ActionScript 2.0 編寫的已加載 SWF 文件將是
AVM1Movie 實例。
■ 如果需要將一個對象用作其它顯示對象的容器(無論是否還要使用 ActionScript 在顯示
對象上進行繪制) ,請選擇其中一個 DisplayObjectContainer 子類:
■ 如果對象是只使用 ActionScript 創建的,或者如果對象作為只使用 ActionScript 創
建和處理的自定義顯示對象的基類,請選擇 Sprite。
■ 如果要通過創建變量來引用在 Flash 創作工具中創建的影片剪輯元件,請選擇 MovieClip。
如果要創建的類與 Flash 庫中的影片剪輯元件關聯,請選擇其中一個
DisplayObjectContainer 子類作為該類的基類:
如果關聯的影片剪輯元件在多個幀上有內容,請選擇MovieClip
如果關聯的影片剪輯元件僅在第一幀上有內容,請選擇Sprite
ActionScript從入門到精通教程六:處理顯示對象
顯示對象,都會有許多的操作,例如,可以在屏幕上確定所有顯示對象的位置、前后移動顯示對象的堆疊順序、縮放或旋轉顯示對象等。
由于所有顯示對象都從它們共有的基類 (DisplayObject)繼承了此功能,因此無論是要處理 Te xtFi e ld 實例、Video 實例、Shape 實例還是其它任何
顯示對象,此功能的行為都相同。
改變位置
對任何顯示對象進行的最基本操作是確定顯示對象在屏幕上的位置。要設置顯示對象的位
置,請更改對象的 x 和 y 屬性。
myShape.x = 17;
myShape.y = 212;
顯示對象定位系統將舞臺視為一個笛卡爾坐標系(帶有水平 x 軸和垂直 y 軸的常見網格系
統) 。坐標系的原點(x 和 y 軸相交的 0,0 坐標)位于舞臺的左上角。從原點開始,x 軸的
值向右為正,向左為負,而 y 軸的值向下為正,向上為負(與典型的圖形系統相反)。例如,
通過前面的代碼行可以將對象 myShape 移到 x 軸坐標 17(原點向右 17 個像素)和 y 軸坐
標 212(原點向下 212 個像素) 。
默認情況下,當使用 ActionScript 創建顯示對象時,x 和 y 屬性均設置為 0,從而可將對象
放在其父內容的左上角
// 創建 Sprite,確定的位置為 x:200 和 y:200。
var mySprite:Sprite = new Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);
// 在 Sprite 的 0,0 坐標處繪制一個點作為參考。
mySprite.graphics.lineStyle(1, 0x000000);
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.moveTo(0, 0);
mySprite.graphics.lineTo(1, 0);
mySprite.graphics.lineTo(1, 1);
mySprite.graphics.lineTo(0, 1);
mySprite.graphics.endFill();
// 創建圓 Shape 實例。
var circle:Shape = new Shape();
mySprite.addChild(circle);
// 在 Shape 中繪制半徑為 50 且中心點的 x 和 y 坐標均為 50 的圓。
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
// 移動 Shape,使其左上角位于舞臺的 0, 0 坐標處。
var stagePoint:Point = new Point(0, 0);
var targetPoint:Point = mySprite.globalToLocal(stagePoint);
circle.x = targetPoint.x;
circle.y = targetPoint.y;
同樣,可以使用 DisplayObject 類的 localToGlobal() 方法將本地坐標轉換為舞臺坐標。
下面的代碼(摘自前面的示例)用于創建兩個顯示對象(圓和正方形)的拖放交互組件。只
要在任一個顯示對象上按下鼠標按鍵,該顯示對象就會移到舞臺顯示列表的頂部,所以拖動
的項目始終出現在頂部。
import flash.display.DisplayObject;
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;
// 按下鼠標按鍵時會調用此函數。
function startDragging(event:MouseEvent):void
{
// 記住正在拖動的對象
draggedObject = DisplayObject(event.target);
// 記錄按下鼠標按鍵時光標的位置
// 與按下鼠標按鍵時拖動的對象的 x, y 坐標
// 之間的差異 (偏移量)。
offsetX = event.stageX - draggedObject.x;
offsetY = event.stageY - draggedObject.y;
// 將所選對象移到顯示列表的頂部
stage.addChild(draggedObject);
// 通知 Flash Player 開始偵聽 mouseMove 事件。
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// 松開鼠標按鍵時會調用此函數。
function stopDragging(event:MouseEvent):void
{
// 通知 Flash Player 停止偵聽 mouseMove 事件。
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// 只要按下鼠標按鍵,
// 每次移動鼠標時都會調用此函數。
function dragObject(event:MouseEvent):void
{
// 將拖動的對象移到光標的位置,從而保持
// 光標的位置和拖動的對象的位置
// 之間的偏移量。
draggedObject.x = event.stageX - offsetX;
draggedObject.y = event.stageY - offsetY;
// 指示 Flash Player 在此事件后刷新屏幕。
event.updateAfterEvent();
}
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
平移和滾動顯示對象
scrollRect 屬性是 Rectangle 類的實例, Rectangle 類包括將矩形區域定義為單個對象所
需的有關值。最初定義顯示對象的可查看區域時,請創建一個新的 Rectangle 實例并為該實
例分配顯示對象的 scrollRect 屬性。
例如,下面的代碼定義了名為 bigText 的 Te x tFi e ld 對象的'可查看區域,該對象因太高而不
能適合 SWF 文件的邊界。單擊名為 up 和 down 的兩個按鈕時,它們調用的函數通過修改
scrollRect Rectangle 實例的 y 屬性而使 Te x tFi e l d 對象的內容向上或向下滾動。
import flash.events.MouseEvent;
import flash.geom.Rectangle;
// 定義 TextField 實例的最初可查看區域:
// 左:0,上:0,寬度:TextField 的寬度,高度:350 個像素。
bigText.scrollRect = new Rectangle(0, 0, bigText.width, 350);
// 將 TextField 作為位圖緩存以提高性能。
bigText.cacheAsBitmap = true;
// 單擊 “向上”按鈕時調用
function scrollUp(event:MouseEvent):void
{
// 訪問當前滾動矩形。
var rect:Rectangle = bigText.scrollRect;
// 將矩形的 y 值減小 20,
// 從而使矩形有效下移 20 個像素。
rect.y -= 20;
// 將矩形重新分配給 TextField 以 “應用”更改。
bigText.scrollRect = rect;
}
// 單擊 “向下”按鈕時調用
function scrollDown(event:MouseEvent):void
{
// 訪問當前滾動矩形。
var rect:Rectangle = bigText.scrollRect;
// 將矩形的 y 值增加 20,
// 從而使矩形有效上移 20 個像素。
rect.y += 20;
// 將矩形重新分配給 TextField 以 “應用”更改。
bigText.scrollRect = rect;
}
up.addEventListener(MouseEvent.CLICK, scrollUp);
down.addEventListener(MouseEvent.CLICK, scrollDown);
正如本示例所示,使用顯示對象的 scrollRect 屬性時,最好指定 Flash Player 應使用
cacheAsBitmap 屬性將顯示對象的內容作為位圖來緩存。如果這樣做了,每次滾動顯示對象
時,Flash Player 就不必重繪顯示對象的整個內容,而可以改為使用緩存的位圖將所需部分
直接呈現到屏幕上。
處理大小和縮放對象
您可以采用兩種方法來測量和處理顯示對象的大小:使用尺寸屬性(width 和 height)或
縮放屬性 (scaleX 和 scaleY) 。
每個顯示對象都有 width 屬性和 height 屬性,它們最初設置為對象的大小,以像素為單
位。您可以通過讀取這些屬性的值來確定顯示對象的大小。還可以指定新值來更改對象的大
小,如下所示:
// 調整顯示對象的大小。
square.width = 420;
square.height = 420;
// 確定圓顯示對象的半徑。
var radius:Number = circle.width / 2;
應用混合模式
應用混合模式
混合模式涉及將一個圖像(基圖像)的顏色與另一個圖像(混合圖像)的顏色進行組合來生
成第三個圖像,結果圖像是實際在屏幕上顯示的圖像。圖像中的每個像素值都與另一個圖像
的對應像素值一起處理的,以便為結果圖像中的相同位置生成像素值。
每個顯示對象都有 blendMode 屬性, 可以將其設置為下列混合模式之一。 以下是在 BlendMode
類中定義的常量。此外,還可以使用 String 值(在括號中) ,這些值是常量的實際值。
■ BlendMode.ADD ("add"):通常用于創建兩個圖像之間的動畫變亮模糊效果。
■ BlendMode.ALPHA ("alpha"):通常用于在背景上應用前景的透明度。
■ BlendMode.DARKEN ("darken"):通常用于重疊類型。
■ BlendMode.DIFFERENCE ("difference"):通常用于創建更多變動的顏色。
■ BlendMode.ERASE ("erase"):通常用于使用前景 Alpha 剪掉 (擦除)背景的一部分。
■ BlendMode.HARDLIGHT ("hardlight"):通常用于創建陰影效果。
■ BlendMode.INVERT ("invert"):用于反轉背景。
■ BlendMode.LAYER ("layer"):用于強制為特定顯示對象的預構成創建臨時緩沖區。
■ BlendMode.LIGHTEN ("lighten"):通常用于重疊類型。
■ BlendMode.MULTIPLY ("multiply"):通常用于創建陰影和深度效果。
■ BlendMode.NORMAL ("normal"):用于指定混合圖像的像素值覆蓋基本圖像的像素值。
■ BlendMode.OVERLAY ("overlay"):通常用于創建陰影效果。
■ BlendMode.SCREEN ("screen"):通常用于創建亮點和鏡頭眩光。
■ BlendMode.SUBTRACT ("subtract"):通常用于創建兩個圖像之間的動畫變暗模糊效果。
調整 DisplayObject 顏色
可以使用 ColorTransform 類的方法 (flash.geom.ColorTransform) 來調整顯示對象的顏
色。每個顯示對象都有 transform 屬性(它是 Tr ans f o rm 類的實例),還包含有關應用到
顯示對象的各種變形的信息 (如旋轉、縮放或位置的更改等) 。除了有關幾何變形的信息之
外,Tr an s f orm 類還包括 colorTransform 屬性,它是 ColorTransform 類的實例,并提供
訪問來對顯示對象進行顏色調整。要訪問顯示對象的顏色轉換信息,可以使用如下代碼:
var colorInfo:ColorTransform = myDisplayObject.transform.colorTransform;
創建 ColorTransform 實例后,可以通過讀取其屬性值來查明已應用了哪些顏色轉換,也可
以通過設置這些值來更改顯示對象的顏色。要在進行任何更改后更新顯示對象,必須將
ColorTransform 實例重新分配給 transform.colorTransform 屬性。
var colorInfo:ColorTransform = my DisplayObject.transform.colorTransform;
// 此處進行某些顏色轉換。
// 提交更改。
myDisplayObject.transform.colorTransform = colorInfo;
使用代碼設置顏色值
ColorTransform 類的 color 屬性可用于為顯示對象分配具體的紅、 綠、藍 (RGB) 顏色值。
在下面的示例中,當用戶單擊名為 blueBtn 的按鈕時,將使用 color 屬性將名為 square 的
顯示對象的顏色更改為藍色:
// square 是舞臺上的一個顯示對象。
// blueBtn、 redBtn、 greenBtn 和 blackBtn 是舞臺上的按鈕。
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
// 訪問與 square 關聯的 ColorTransform 實例。
var colorInfo:ColorTransform = square.transform.colorTransform;
// 單擊 blueBtn 時會調用此函數。
function makeBlue(event:MouseEvent):void
{
// 設置 ColorTransform 對象的顏色。
colorInfo.color = 0x003399;
// 將更改應用于顯示對象
square.transform.colorTransform = colorInfo;
}
blueBtn.addEventListener(MouseEvent.CLICK, makeBlue);
請注意,使用 color 屬性更改顯示對象的顏色時,將會完全更改整個對象的顏色,無論該對
象以前是否有多種顏色。例如,如果某個顯示對象包含一個頂部有黑色文本的綠色圓,將該
對象的關聯 ColorTransform 實例的 color 屬性設置為紅色陰影時,會使整個對象(圓和
文本)變為紅色 (因此無法再將文本與對象的其余部分區分開來) 。
下面的代碼加載一個 JPEG 圖像并為其應用顏色轉換, 當鼠標指針沿 x 軸和 y 軸移動時,將
調整紅色和綠色通道值。在本例中,由于未指定偏移值,因此屏幕上顯示的每個顏色通道的
顏色值將表示圖像中原始顏色值的一個百分比,這意味著任何給定像素上顯示的大部分紅色
或綠色都是該像素上紅色或綠色的原始效果。
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.geom.Transform;
import flash.geom.ColorTransform;
import flash.net.URLRequest;
// 將圖像加載到舞臺上。
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/
images/image1.jpg");
loader.load(url);
this.addChild(loader);
// 當鼠標移過加載的圖像時會調用此函數。
function adjustColor(event:MouseEvent):void
{
// 訪問 Loader 的 ColorTransform 對象 (包含圖像)
var colorTransformer:ColorTransform = loader.transform.colorTransform;
// 根據鼠標位置設置紅色和綠色乘數。
// 紅色值的范圍從 0%(無紅色)(當光標位于左側時)
// 到 100% 紅色 (正常圖像外觀)(當光標位于右側時)。
// 這同樣適用于綠色通道,不同的是它由
// y 軸中鼠標的位置控制。
colorTransformer.redMultiplier = (loader.mouseX / loader.width) * 1;
colorTransformer.greenMultiplier = (loader.mouseY / loader.height) * 1;
// 將更改應用到顯示對象。
loader.transform.colorTransform = colorTransformer;
}
loader.addEventListener(MouseEvent.MOUSE_MOVE, adjustColor);
旋轉對象
使用 rotation 屬性可以旋轉顯示對象。可以通過讀取此值來了解是否旋轉了某個對象,如
果要旋轉該對象,可以將此屬性設置為一個數字 (以度為單位) ,表示要應用于該對象的旋
轉量。例如,下面的代碼行將名為 square 的對象旋轉 45 度 (一整周旋轉的 1/8):
square.rotation = 45;
淡化對象
可以通過控制顯示對象的透明度來使顯示對象部分透明 (或完全透明) ,也可以通過更改透
明度來使對象淡入或淡出。DisplayObject 類的 alpha 屬性用于定義顯示對象的透明度(更
確切地說是不透明度)。可以將 alpha 屬性設置為介于 0 和 1 之間的任何值,其中 0 表示
完全透明, 1 表示完全不透明。例如,當使用鼠標單擊名為 myBall 的對象時,下面的代碼
行將使該對象變得部分 (50%) 透明:
function fadeBall(event:MouseEvent):void
{
myBall.alpha = .5;
}
myBall.addEventListener(MouseEvent.CLICK, fadeBall);
還可以使用通過 ColorTransform 類提供的顏色調整來更改顯示對象的透明度。
遮罩顯示對象
可以通過將一個顯示對象用作遮罩來創建一個孔洞,透過該孔洞使另一個顯示對象的內容
可見。
定義遮罩
要指明一個顯示對象將是另一個顯示對象的遮罩, 請將遮罩對象設置為被遮罩的顯示對象的
mask 屬性:
// 使對象 maskSprite 成為對象 mySprite 的遮罩。
mySprite.mask = maskSprite;
被遮罩的顯示對象顯示在用作遮罩的顯示對象的全部不透明區域之內。
例如,下面的代碼將
創建一個包含 100 x 100 個像素的紅色正方形的 Shape 實例和一個包含半徑為 25 個像素
的藍色圓的 Sprite 實例。單擊圓時,它被設置為正方形的遮罩,所以顯示的正方形部分只是
由圓完整部分覆蓋的那一部分。換句話說,只有紅色圓可見。
// 以下代碼假設它正在顯示對象容器
//(如 MovieClip 或 Sprite 實例)中運行。
import flash.display.Shape;
// 繪制正方形并將其添加到顯示列表中。
var square:Shape = new Shape();
square.graphics.lineStyle(1, 0x000000);
square.graphics.beginFill(0xff0000);
square.graphics.drawRect(0, 0, 100, 100);
square.graphics.endFill();
this.addChild(square);
// 繪制圓并將其添加到顯示列表中。
var circle:Sprite = new Sprite();
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0x0000ff);
circle.graphics.drawCircle(25, 25, 25);
circle.graphics.endFill();
this.addChild(circle);
function maskSquare(event:MouseEvent):void
{
square.mask = circle;
circle.removeEventListener(MouseEvent.CLICK, maskSquare);
}
circle.addEventListener(MouseEvent.CLICK, maskSquare);
在下面的示例中,將在舞臺上創建一個名為 circle 的圓 Sprite 實例。當用戶單擊圓時,腳
本動畫序列開始,從而使 circle 淡化 (其 alpha 屬性值減少) ,直到完全透明:
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
// 繪制圓并將其添加到顯示列表中
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x990000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
addChild(circle);
// 此動畫開始后,每一幀都會調用此函數。
// 此函數進行的更改
//(每一幀都會更新屏幕)將導致產生動畫效果。
function fadeCircle(event:Event):void
{
circle.alpha -= .05;
if (circle.alpha <= 0)
{
circle.removeEventListener(Event.ENTER_FRAME, fadeCircle);
}
}
function startAnimation(event:MouseEvent):void
{
circle.addEventListener(Event.ENTER_FRAME, fadeCircle);
}
circle.addEventListener(MouseEvent.CLICK, startAnimation);
當用戶單擊圓時,將函數 fadeCircle() 訂閱為 enterFrame 事件的偵聽器,這意味著每一
幀都會開始調用一次該函數。通過更改 circle 的 alpha 屬性,該函數會淡化圓,因此對于
每個幀,圓的 alpha 一次減少 .05 (5%) ,并且更新屏幕。最后,當 alpha 值為 0(circle
完全透明)時,fadeCircle() 函數作為事件偵聽器將被刪除,從而結束動畫。
以上代碼還可用來創建動畫運動而不是淡化。通過用不同屬性替換函數中表示 enterFrame
事件偵聽器的 alpha,就可獲得該屬性的動畫效果。例如,將以下行
circle.alpha -= .05;
更改為以下代碼
circle.x += 5;
將獲得 x 屬性的動畫效果,從而使圓在舞臺上移到右側。當到達需要的 x 坐標時,通過更改
結束動畫的條件就可結束動畫 (即取消訂閱 enterFrame 偵聽器) 。
加載顯示對象
Loader 對象用于將 SWF 文件和圖形文件加載到應用程序中。 Loader 類是
DisplayObjectContainer 類的子類。 Loader 對象在其顯示列表中只能包含一個子顯示對
象,該顯示對象表示它加載的 SWF 或圖形文件。如下面的代碼所示,在顯示列表中添加
Loader 對象時,還可以在加載后將加載的子顯示對象添加到顯示列表中:
var pictLdr:Loader = new Loader();
var pictURL:String = "banana.jpg"
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
this.addChild(pictLdr);
加載 SWF 文件或圖像后,即可將加載的顯示對象移到另一個顯示對象容器中,例如本示例
中的 container DisplayObjectContainer 對象:
import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;
var container:Sprite = new Sprite();
addChild(container);
var pictLdr:Loader = new Loader();
var pictURL:String = "banana.jpg"
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
function imgLoaded(event:Event):void
{
container.addChild(pictLdr.content);
}
監視加載進度
文件開始加載后,就創建了 LoaderInfo 對象。LoaderInfo 對象用于提供加載進度、加載者
和被加載者的 URL、媒體的字節總數及媒體的標稱高度和寬度等信息。LoaderInfo 對象還
調度用于監視加載進度的事件。
【Flash顯示編程-ActionScript從入門到精通教程(六)】相關文章:
1.ActionScript從入門到高手教程全集(六) 事件處理
5.Powerpoint 2010視頻教程「PPT從入門到精通」
6.ActionScript從入門到高手教程全集(四)錯誤處理