Kleuren DisplayObject wijzigen

De eigenschap color van de klasse ColorTransform kan worden gebruikt om een specifieke rode, groene of blauwe (RGB) kleurwaarde aan het weergaveobject toe te wijzen. Het volgende voorbeeld gebruikt de eigenschap color om de kleur van het weergaveobject met de naam square in blauw te wijzigen op het moment dat de gebruiker op een knop met de naam blueBtn klikt:

// 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);

Wanneer u de kleur van een weergaveobject wijzigt via de eigenschap color , wordt de kleur van het gehele object gewijzigd, ongeacht of het object hiervoor meerdere kleuren had. Als u bijvoorbeeld een weergaveobject gebruikt dat een groene cirkel met zwarte tekst bevat, wordt het gehele object, de gehele cirkel en alle tekst rood wanneer u de eigenschap color van de gekoppelde instantie ColorTransform van dat object op een rode tint instelt (tekst en object zijn niet langer te onderscheiden).

Stel dat u een weergaveobject met meerdere kleuren hebt (bijvoorbeeld een digitale foto) en dat u niet het gehele object een nieuwe kleur wilt geven. U wilt slechts de kleur van een weergaveobject op basis van de bestaande kleuren wijzigen. Voor dit scenario bevat de klasse ColorTransform verschillende vermenigvuldigings- en verschuivingseigenschappen die u kunt gebruiken om deze wijziging te bewerkstelligen. De vermenigvuldigingseigenschappen ( redMultiplier , greenMultiplier , blueMultiplier en alphaMultiplier ) werken op dezelfde manier als gekleurde fotografische filters (of een zonnebril met gekleurde glazen), ze verhogen of verlagen bepaalde kleuren van het weergaveobject. De verschuivingseigenschappen ( redOffset , greenOffset , blueOffset en alphaOffset ) kunnen worden gebruikt om extra hoeveelheden van een bepaalde kleur aan het object toe te voegen of om de minimale waarde van een bepaalde kleur op te geven.

Deze vermenigvuldigings- en verschuivingseigenschappen en de geavanceerde kleurinstellingen die beschikbaar zijn voor filmclipsymbolen in het Flash-ontwerpgereedschap zijn identiek wanneer u Geavanceerd in het pop-upmenu Kleur in Eigenschapcontrole selecteert.

De volgende code laadt een JPEG-afbeelding en past een kleurtransformatie toe waarmee de rood- en groenkanalen worden aangepast terwijl de muisaanwijzer beweegt langs de x- en y-as. Omdat er geen verschuivingswaarden zijn opgegeven, is de kleurwaarde van elk kleurkanaal dat op het scherm wordt weergegeven een percentage van de oorspronkelijke kleurwaarde in de afbeelding. Dit houdt in dat de meeste hoeveelheid rood of groen die in een pixel wordt weergegeven overeenkomt met de oorspronkelijke hoeveelheid rood of groen in die pixel.

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);