調整 DisplayObject 顏色

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

您可以使用 ColorTransform 類別 (flash.geom.ColorTransform) 的方法,調整顯示物件的顏色。每一個顯示物件都有 transform 屬性,它是 Transform 類別的實體,其中包含有關套用至顯示物件之各種變形的資訊 (如旋轉、縮放或位置變更,諸如此類)。除了有關幾何變形的資訊以外,Transform 類別也包含 colorTransform 屬性,它是 ColorTransform 類別的實體,可供對顯示物件進行顏色調整。若要存取顯示物件的顏色轉換資訊,可以使用如下的程式碼:

var colorInfo:ColorTransform = myDisplayObject.transform.colorTransform;

建立了 ColorTransform 實體之後,您可以讀取其屬性值,找出已經套用的顏色轉換,也可以設定這些值,對顯示物件進行顏色變更。若要在任何變更之後更新顯示物件,必須重新將 ColorTransform 實體指定回 transform.colorTransform 屬性。

var colorInfo:ColorTransform = myDisplayObject.transform.colorTransform; 
 
// Make some color transformations here. 
 
// Commit the change. 
myDisplayObject.transform.colorTransform = colorInfo;

使用程式碼設定顏色值

ColorTransform 類別的 color 屬性可用來將特定紅、綠、藍 (RGB) 顏色值指定給顯示物件。下列範例會使用 color 屬性,當使用者按一下名為 blueBtn 的按鈕時,將名為 square 的顯示物件顏色變更為藍色:

// square is a display object on the Stage. 
// blueBtn, redBtn, greenBtn, and blackBtn are buttons on the Stage. 
 
import flash.events.MouseEvent; 
import flash.geom.ColorTransform; 
 
// Get access to the ColorTransform instance associated with square. 
var colorInfo:ColorTransform = square.transform.colorTransform; 
 
// This function is called when blueBtn is clicked. 
function makeBlue(event:MouseEvent):void 
{ 
    // Set the color of the ColorTransform object. 
    colorInfo.color = 0x003399; 
    // apply the change to the display object 
    square.transform.colorTransform = colorInfo; 
} 
 
blueBtn.addEventListener(MouseEvent.CLICK, makeBlue);

請注意,當您使用 color 屬性變更顯示物件的顏色時,會完全變更整個物件的顏色,不管物件在之前是否有多個顏色都一樣。例如,如果有顯示物件包含頂端有黑色文字的綠色圓形,將該物件的相關聯 ColorTransform 實體的 color 屬性設定為紅色形狀會讓整個物件、圓形和文字都變為紅色 (因此文字將無法再與其餘物件區別)。

使用程式碼改變顏色和亮度特效

假設有包含多個顏色的顯示物件 (例如,數位相片),而且您不要完全重新為物件上色,則只要根據現有顏色調整顯示物件的顏色即可。在這種情況下,ColorTransform 類別包含一系列倍數及偏移屬性,可供您用來進行這類調整。名為 redMultipliergreenMultiplierblueMultiplieralphaMultiplier 的倍數屬性運作方式與彩色照相濾鏡 (或彩色太陽眼鏡) 類似,會增加或減少顯示物件中的某些顏色。偏移屬性 (redOffsetgreenOffsetblueOffsetalphaOffset) 可以用來將某些顏色的額外色量加入物件,或指定該特定顏色可有的最小值。

當您在「屬性」檢測器上的「顏色」彈出式選單中選擇「進階」時,這些倍數和偏移屬性會與 Flash 編寫工具中影片片段元件可用的進階顏色設定完全相同。

下列程式碼會載入 JPEG 影像,然後套用顏色轉換,當滑鼠指標沿著 x 軸和 y 軸移動時修改紅色和綠色色版。在此範例中,因為已指定了偏移值,顯示在螢幕上每一個顏色色版的顏色值都是影像中原始顏色的百分比,也就是說,顯示在任何指定像素中最紅或最綠的將是該像素中的原始紅色或綠色量。

import flash.display.Loader; 
import flash.events.MouseEvent; 
import flash.geom.Transform; 
import flash.geom.ColorTransform; 
import flash.net.URLRequest; 
 
// Load an image onto the Stage. 
var loader:Loader = new Loader(); 
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg"); 
loader.load(url); 
this.addChild(loader); 
 
// This function is called when the mouse moves over the loaded image. 
function adjustColor(event:MouseEvent):void 
{ 
    // Access the ColorTransform object for the Loader (containing the image) 
    var colorTransformer:ColorTransform = loader.transform.colorTransform; 
     
    // Set the red and green multipliers according to the mouse position. 
    // The red value ranges from 0% (no red) when the cursor is at the left 
    // to 100% red (normal image appearance) when the cursor is at the right. 
    // The same applies to the green channel, except it's controlled by the 
    // position of the mouse in the y axis. 
    colorTransformer.redMultiplier = (loader.mouseX / loader.width) * 1; 
    colorTransformer.greenMultiplier = (loader.mouseY / loader.height) * 1; 
     
    // Apply the changes to the display object. 
    loader.transform.colorTransform = colorTransformer; 
} 
 
loader.addEventListener(MouseEvent.MOUSE_MOVE, adjustColor);