Changing fill color of MovieClip Actionscript 3

Question

i want to ask, how to change only fill color of an instance on the stage - i can do it by using ColorTransform object, but it changes color of the whole instance, not just t

Answer 1

If you are targeting FP10, and you want a simple filter like what you tried with ColorTransform, you could write a PixelBlender Kernel to take an 2 arguments of colors (one for source, one for destination), match the pixel with the source color, and swap them for the destination; something like this:

//I release this under the MIT License. Use it to your heart's content.



kernel ReplaceColor
<   namespace : "PIPEEP";
    vendor : "PiPeep";
    version : 1;
    description : "Replace color";
>
{
    input image4 src;
    output pixel4 dst;

    parameter pixel4 sColor
    < 
        minValue:pixel4(0.); 
        maxValue:pixel4(255.);
    >; 
    parameter pixel4 dColor;
    parameter float tolerance;

    void
    evaluatePixel()
    {
        dst = sampleNearest(src,outCoord());
        pixel4 sColorAdjusted = abs((sColor/pixel4(255.)) - dst);
        if(sColorAdjusted.r < tolerance && sColorAdjusted.g < tolerance && sColorAdjusted.b < tolerance && sColorAdjusted.a < tolerance) {
            dst = dColor;
        }
    }
}

Remembers why he hates the PixelBlender IDE

EDIT: Remember that this will not play well with anti-aliasing, but if you are using stage.quality = "low", it won't matter.

To add use it in as3, try this (stolen from http://scriptplayground.com/tutorials/as/Flash-CS4-and-Pixel-Bender-Overview/, so you will need to change a few lines of code):

The first part of the code is defining some variables to be used later on. The only two that may look new are Shader and ShaderFilter. These are new to Flash Player 10 and are the classes responsible for handling the Pixel Bender filter data.

var loader:URLLoader;
var shader:Shader;
var shaderFilter:ShaderFilter;
var image:MovieClip;
var timer:Timer;
var timerInt:uint = 40;

The next step in the code is to load the image to the stage, that you added in the previous steps.

image = new SampleImage(); image.y =
20; image.x = 25;

addChild(image);

The first two methods to be created are for loading the pbj file and initializing the filter creation process

function startEffect() {  loader = new
URLLoader();  loader.dataFormat =
URLLoaderDataFormat.BINARY;
  loader.addEventListener(Event.COMPLETE,
loadComplete);    loader.load(new
URLRequest("sample.pbj")); }



function loadComplete(e:Event):void {
  shader = new Shader(loader.data);
  initFilter(); }

The next function initFilter() is called once the pbj file is successfully loaded, so the filter can be created. This filter sets the r,g, b color values of the image, which essentially blows the detail from the image. The "shader.data.red.value" for example is referencing the pixel bender code that was written at the beginning, if you notice that code has a "parameter float red" which is a float variable to set the level of red. In this case the value is being set to 20. This process is repeated for the other 2 colors, and then is passed to the image instance.

The last part of this function sets up the timer that will run to apply this filter until the image returns to its normal look

function initFilter() {
  shader.data.red.value = [20];
  shader.data.green.value = [20];
  shader.data.blue.value = [20];
  shaderFilter = new
ShaderFilter(shader);     image.filters =
[shaderFilter];



  timer = new Timer(timerInt, 0);
  timer.addEventListener(TimerEvent.TIMER,
timerHit);    timer.start(); }

The final function repeats the process of applying the filter, but first grabs the current filter values and subtracts 0.1 from the value on each pass. This process slowly removes the filter intensity from the image until it is completely gone. This timerHit() function is called from the timer that was created in the initFilter() function.

function timerHit(e:TimerEvent):void
{
  if(shader.data.red.value == 1)
  {
      timer.stop();
      return;
  }

  var r:uint = shader.data.red.value   - 0.1;
  var g:uint = shader.data.green.value - 0.1;
  var b:uint = shader.data.blue.value  - 0.1;

  shader.data.red.value =     [r];
  shader.data.green.value =   [g];
  shader.data.blue.value =    [b];
  shaderFilter = new ShaderFilter(shader);
  image.filters = [shaderFilter]; 
}

The last step in the code is to start the process, which in this application is done by calling the startEffect() function, so that is what we will do

startEffect();

Sorry for making your eyes bleed! I think that is my longest answer yet!