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 the fill. I want to change only the fill color, not the stroke color. can anybody help me?

this is my code:

function paint(){
    var myColorTransform:ColorTransform = new ColorTransform();

    myColorTransform.color = someColorNumber;

    coloredObject.transform.colorTransform = myColorTransform;

}

Answer 1

I know this is a bit late to the game, but I was having this same issue and fixed it a bit differently. It may not be of any help since it will only work in limited circumstances*, but I started with my shape being filled white & stroked black. That way you can apply a color transform with RGB multipliers, to fade the white down to your desired colour leaving the black border intact. So to make your object red (with black border) use:

function paint() {
    shape.transform.colorTransform = new ColorTransform(1, 0, 0);
}

Or for Stack Overflow orange (still with black border):

function paint() {
    shape.transform.colorTransform = new ColorTransform(0.996, 0.478, 0.082);
}

*It'll only work if you just want a single colour with a black border.

Answer 2

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.

<languageVersion : 1.0;>

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!

Answer 3

This cant be done once you've drawn a shape as action script has no way of determining what is a stroke and what is a fill.

You have a couple of options.

Separate your fill and stroke into separate movie clips and set the color transform to only apply to the fill.

or

If it's a simple shape, draw it using the Graphics object where you can specify fill colours and stroke colours.

Likely hood is, and my preferred method, would be the first options as the shape is likely to be complex and leaving it in the fla gives greater control for a designer being able to change it rather than a developer. It's a little more work though and slightly more complex.