How to animate through a rainbow of colors on a bitmap image

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

You said you were working with bitmapData, so this answer is assuming you can / want to directly manipulate it.

You can use bitmapData.setPixel(row, column, color); to change a pixel's color. row and column are 0-based and represent exactly which pixel to modify - think of it like grid paper if you have never dealt with this before. The color parameter is actually a uint - unsigned integer. You can use a hex value like 0x000000 to set the pixel to black and 0xFFFFFF to white.

To alternate colors, you can just loop through different values for uint. There are 16777215 different possible values for colors and I honestly don't know much about hex colors - I just google the color I want.

But, here's a little tip if you're mathematically inclined: Each spot in a hex number corresponds to 16 to the power of that spot * the actual number in that spot, in decimal. I probably worded that wrong, so here is a visual example: 456789 in hex is (4 * 16^5) + (5 * 16^4) + (6 * 16^3) + (7 * 16^2) + (8 * 16^1) + (9 * 16^0) in decimal which equals 4548489.

The first 2 spots (from the left) correspond to Red, then Blue, then Green. so FF0000 is red, 00FF00 is green and 0000FF is blue. You can (I think) supply the decimal value for color in the setPixel function, so you can do (or find online) some conversions to get the color you want / loop through colors in a rainbow style pattern!

I hope this random crash course on Hex was helpful :P

Answer 2

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

}