Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted

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)

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.