ColorTransform removes shadow

I've got movie clip on stage that has shadow filter. When I apply ColorTransform to that mo开发者_JAVA技巧vie clip, the shadow removes.

        var ct:ColorTransform = new ColorTransform;
        ct.color = 0x99CC00;
        lamp.transform.colorTransform = ct;

How to save shadow?

The idea is to

1. save the filters (shadow) of your clip lamp,
2. apply the transformation,
3. put the clip in a master clip and
4. re-apply the filters to this untransformed parent.

code:

var lampFilters:Array = lamp.filters.slice();    //save filters

lamp.filters = [];                               //empty filters
var ct:ColorTransform = new ColorTransform();
ct.color = 0x99CC00;
lamp.transform.colorTransform = ct;              //apply your transformation
var superLamp:Sprite = new Sprite();
superLamp.addChild(lamp);                        //nest the clip
addChild(superLamp);

superLamp.filters = lampFilters;                 //re-apply the filters

ColorTransform will transform the entire MovieClip, unfortunately, the filter is included. I suggest you layer lamp and apply the transform to the top most layer keeping the bottom layer (shadow) untouched.

Test example:

var ball:Sprite = new Sprite();
ball.graphics.beginFill(0x00FF00, 1);
ball.graphics.drawCircle(50, 50, 50);
ball.graphics.endFill();
ball.filters = [new DropShadowFilter()]; //default black
ball.addEventListener(MouseEvent.CLICK, changeColor);
addChild(ball);

//...
private function changeColor(evt:MouseEvent):void {
    var ball:Sprite = evt.target as Sprite;
    var ct:ColorTransform = new ColorTransform();
    ct.color = 0x99CC00; // green-ish
    ball.transform.colorTransform = ct;
    ball.filters = [new DropShadowFilter(4, 45, 0xFFFFFF)]; //now white
}

Even with the shadow filter reapplied you can see it's still going to be green-ish as set by the transform.

You should use nested display objects to achieve this...

for instance you can create a movieclip within another movieclip. apply the colortransform to inner movie clip and apply the shadow to outer movie clip. works like a charm for me :)

Here is an alternate method that does not require a parent object. You basically use an AdjustColor and ColorMatrix to change the color instead of a ColorTransform.

Note:If you are using an IDE other than Flash, like Flex or FlashDevelop, you will need to include flash.swc into your library from 'Common/Configuration/ActionScript 3.0/libs/flash.swc' for the fl.motion.AdjustColor package/class. You can also Google the swc.

    var mc:Sprite = new Sprite();
    mc.graphics.beginFill(0xFF0000);
    mc.graphics.drawCircle(100, 100, 100);
    mc.graphics.endFill();
    addChild(mc); 

    // White out the entire shape first
    var whiteAC:AdjustColor = new AdjustColor();
    whiteAC.brightness = 100;
    whiteAC.contrast = 100;
    whiteAC.saturation = -100;
    whiteAC.hue = 0;            
    var whiteMatrix:Array = whiteAC.CalculateFinalFlatArray();
    var whiteCMF:ColorMatrixFilter = new ColorMatrixFilter(whiteMatrix);

    // Now use ColorMatrixFilter to change color
    var colorMatrix:Array = hexToMatrix(0x0000FF);
    var colorCMF:ColorMatrixFilter = new ColorMatrixFilter(colorMatrix);

    // Create Drop Shadow 
    var myDropShadow:DropShadowFilter = new DropShadow();

    mc.filters = [whiteCMF, colorCMF, myDropShadow];

    function hexToMatrix ( hex:uint, alpha:Number = 1 ) 
    {
        var r:Number = ((hex & 0xFF0000) >> 16);
        var g:Number = ((hex & 0x00FF00) >> 8);
        var b:Number = ((hex & 0x0000FF));

        var matrix:Array = [];
        matrix = matrix.concat([r, 0, 0, 0, 0]); // red
        matrix = matrix.concat([0, g, 0, 0, 0]); // green
        matrix = matrix.concat([0, 0, b, 0, 0]); // blue
        matrix = matrix.concat([0, 0, 0, alpha, 0]); // alpha
        return matrix;
    }