Question

I have a bitmap (bitmapData) that I’d like it to change colors over time. I’ve seen examples of applying a color transform and I couldn’t get it to work. Also, with those examples they only apply one color. I would like to animate through the ROYGBIV range. Note: I am dynamically loading images. I don’t want to tint the image I want the color in the image to change if that makes sense.

Answer 1

To manipulate/tint colors you would use the colorTransform function

To illustrate:
In the example below I embed the image and reference it, if you are using adobe flash you would ‘name’ your asset and reference it in you code.

    import flash.geom.ColorTransform;
    import flash.events.Event;
    import flash.display.Bitmap;

    [Embed(source="img/logo.png")] private var logoCls:Class;
    private var bitmapLogo:Bitmap = new logoCls();

    public function Test()
    {
        addEventListener(Event.ADDED_TO_STAGE, init);
        addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }

    private function init(e:Event):void
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        addChild(bitmapLogo);
    }

    // r, g, b colors
    var r:int = 256; // start at Red
    var g:int = 0;
    var b:int = 0;
    var increment:int = 16; // how quickly to change the color
    var colorCycle:int = 0; 
    var mult:Number = 0.25; // How heavily TINTED you want the image

    private function onEnterFrame(e:Event):void
    {
        var ct:ColorTransform = new ColorTransform (1-mult,1-mult,1-mult,1,r*mult,g*mult,b*mult,0);
        bitmapLogo.transform.colorTransform = ct;
        incrementRainbowColors();
    }
    private function incrementRainbowColors():void
    {
        if (colorCycle == 0) // -> yellow
            if ((g+=increment) >= 256) colorCycle=1;
        else if (colorCycle == 1) // -> green
            if ((r-=increment) <= 0) colorCycle=2;
        else if (colorCycle == 2) // -> cyan
            if ((b+=increment) >=256) colorCycle=3;
        else if (colorCycle == 3) // -> blue
            if ((g-=increment) <= 0) colorCycle = 4;
        else if (colorCycle == 4) // -> magenta
            if ((r+=increment) >=256) colorCycle = 5;
        else if (colorCycle == 5) // -> red
            if ((b-=increment)<=0) colorCycle = 0;
    }

}