Changing colour while keeping gradient

Question

I'm making a Flash game with ActionScript 3 and I have a square with a gradient applied to it. I am trying to programmatically changing the colour of the square depending on time, for example, some times it is orange, some times it is red, but it must always fade to black at the bottom.

The problem is, I'm using ColorTransform (as per here) but it seems to overwrite the gradient and simply fill the square with the solid colour. This isn't what I want. I want the colour that is chosen to fade to black at the bottom, like the original gradient.

How can I do this? Is there a way to only change the "hue" of the symbol (IE: not filling the entire thing with a solid colour), or will I have to reapply a gradient programmatically, with the desired colours?

Answer 1

That should be pretty simple with the ColorTransform class. You can't simply set the color property though, you need to make use of the multipliers of the ColorTransform. Example:

function colorize(object:DisplayObject, color:uint):void {
    // get individual color components 0-1 range
    var r:Number = ((color >> 16) & 0xff) / 255;
    var g:Number = ((color >> 8) & 0xff) / 255;
    var b:Number = ((color) & 0xff) / 255;

    // get the color transform and update its color multipliers
    var ct:ColorTransform = object.transform.colorTransform;
    ct.redMultiplier = r;
    ct.greenMultiplier = g;
    ct.blueMultiplier = b;

    // assign transform back to sprite/movieclip
    object.transform.colorTransform = ct;
}

Then you can simply color your sprite like this:

colorize(mySprite, 0xffaa00); // colors sprite orange

Instead of tinting the whole sprite in the given colors, it uses multiplication. So if you have a white pixel (1) it will have the given color, while a black pixe (0) will remain black (0 * color = 0)

Answer 2

You can use two layers: the top layer contains a gradient that goes from fully transparent to black, and the bottom layer contains the colour that you are changing.