Question

I would like to know why does AS3 colorTransform only transforms the border of a shape?

Similar question is posted however I do not think that such a massive workaround needs to be done in order to do so.

I have something like:

var sh:Shape = new Shape();
sh.graphics.lineStyle(4, 0x000000);
sh.graphics.beginFill(0xFFFF00);
sh.graphics.drawRect(0, 0, 200, 200);
sh.graphics.endFill();
addChild(sh);

Ye I know we can use with(sh.graphics) do here, however if I make a color transform like:

sh.transform.colorTransform = new ColorTransform(1, 1, 1, 1, red_offset, green_ofs, b_off, 0);

Only the border of a shape is transformed.
I’ve tried to redraw on everyframe the object with different fill but it’s an overkill in performance, about 10 3d planes were performance killers.

I can only think of that because beginFill() does not use a pen set by lineStyle() and that may be causing the problem, however I would really like to know the problem as I need my uber-super-semi3d-spinner to spin while changing colors and not his borders! 🙂

Thanks in advance!

Answer 1

I don’t know why ColorTransform affects only line color (seems just design decision), but ColorMatrixFilter will transform entire shape (tested). Don’t be afraid of it – it’s quite simple. First four columns of matrix are multipliers (1.0 is 100%) and fifth column is added to result.

        var sht:Shape = new Shape();
        sht.graphics.lineStyle(4, 0x7F7FFF);
        sht.graphics.beginFill(0xFFFFFF);
        sht.graphics.drawRect(0, 0, 200, 200);
        sht.graphics.endFill();
        sht.x = 300;
        sht.y = 100;
        sht.filters = [ new ColorMatrixFilter(
            [   0.5, 0.0, 0.0, 0.0, 0.0,
                0.0, 1.0, 0.0, 0.0, 0.0,
                0.0, 0.0, 0.7, 0.0, 0.0,
                0.0, 0.0, 0.0, 1.0, 0.0
            ])];
        addChild(sht);