更改MovieClip Actionscript 3的填充颜色

时间:2023-02-09 20:22:23

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?

我想问一下,如何只更改舞台上实例的填充颜色 - 我可以通过使用ColorTransform对象来实现它,但它会改变整个实例的颜色,而不仅仅是填充颜色。我想只改变填充颜色,而不是笔触颜色。有谁能够帮我?

this is my code:

这是我的代码:

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

    myColorTransform.color = someColorNumber;

    coloredObject.transform.colorTransform = myColorTransform;

}

3 个解决方案

#1


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.

如果它是一个简单的形状,使用Graphics对象绘制它,您可以在其中指定填充颜色和笔触颜色。

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.

可能引擎盖是,并且我首选的方法,将是第一个选项,因为形状可能很复杂并且留在fla中为设计师提供更大的控制能够改变它而不是开发人员。虽然稍微复杂一些,但它的工作要多一些。

#2


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:

我知道游戏有点晚了,但我遇到了同样的问题并且修改得有点不同。它可能没有任何帮助,因为它只能在有限的情况下工作*,但我从我的形状开始填充白色和抚摸黑色。这样,您可以应用具有RGB乘数的颜色转换,将白色淡化为所需的颜色,使黑色边框保持完整。因此,要使您的对象变为红色(带有黑色边框),请使用:

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

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

或者Stack Overflow橙色(仍然带有黑色边框):

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.

*只有你想要一种带黑色边框的单色才能使用它。

#3


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:

如果你的目标是FP10,并且你想要一个像你尝试使用ColorTransform的简单过滤器,你可以编写一个PixelBlender内核来获取2个颜色参数(一个用于源,一个用于目标),将像素与源颜色匹配,并将它们换成目的地;像这样的东西:

//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

记得他讨厌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.

编辑:请记住,这不会很好地与抗锯齿,但如果您使用stage.quality =“低”,它将无关紧要。

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):

要在as3中添加使用它,请尝试此操作(从http://scriptplayground.com/tutorials/as/Flash-CS4-and-Pixel-Bender-Overview/中窃取,因此您需要更改几行代码):

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.

代码的第一部分是定义一些稍后要使用的变量。唯一可能看起来很新的两个是Shader和ShaderFilter。这些是Flash Player 10的新增功能,是负责处理Pixel Bender过滤器数据的类。

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

要创建的前两个方法是加载pbj文件并初始化过滤器创建过程

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.

成功加载pbj文件后,将调用下一个函数initFilter(),因此可以创建过滤器。此滤镜可设置图像的r,g,b颜色值,从而基本上可以从图像中提取细节。例如,“shader.data.red.value”引用了在开头写的像素弯曲代码,如果你注意到代码有一个“参数浮动红”,它是一个浮点变量来设置红色等级。在这种情况下,将值设置为20.对其他2种颜色重复此过程,然后将其传递给图像实例。

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.

最终函数重复应用滤波器的过程,但首先抓取当前滤波器值并从每次传递的值中减去0.1。此过程会慢慢消除图像中的滤镜强度,直至完全消失。此timerHit()函数是从initFilter()函数中创建的计时器调用的。

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()函数完成,这就是我们要做的

startEffect();

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

抱歉让你的眼睛流血!我认为那是我最长的答案!

#1


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.

如果它是一个简单的形状,使用Graphics对象绘制它,您可以在其中指定填充颜色和笔触颜色。

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.

可能引擎盖是,并且我首选的方法,将是第一个选项,因为形状可能很复杂并且留在fla中为设计师提供更大的控制能够改变它而不是开发人员。虽然稍微复杂一些,但它的工作要多一些。

#2


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:

我知道游戏有点晚了,但我遇到了同样的问题并且修改得有点不同。它可能没有任何帮助,因为它只能在有限的情况下工作*,但我从我的形状开始填充白色和抚摸黑色。这样,您可以应用具有RGB乘数的颜色转换,将白色淡化为所需的颜色,使黑色边框保持完整。因此,要使您的对象变为红色(带有黑色边框),请使用:

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

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

或者Stack Overflow橙色(仍然带有黑色边框):

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.

*只有你想要一种带黑色边框的单色才能使用它。

#3


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:

如果你的目标是FP10,并且你想要一个像你尝试使用ColorTransform的简单过滤器,你可以编写一个PixelBlender内核来获取2个颜色参数(一个用于源,一个用于目标),将像素与源颜色匹配,并将它们换成目的地;像这样的东西:

//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

记得他讨厌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.

编辑:请记住,这不会很好地与抗锯齿,但如果您使用stage.quality =“低”,它将无关紧要。

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):

要在as3中添加使用它,请尝试此操作(从http://scriptplayground.com/tutorials/as/Flash-CS4-and-Pixel-Bender-Overview/中窃取,因此您需要更改几行代码):

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.

代码的第一部分是定义一些稍后要使用的变量。唯一可能看起来很新的两个是Shader和ShaderFilter。这些是Flash Player 10的新增功能,是负责处理Pixel Bender过滤器数据的类。

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

要创建的前两个方法是加载pbj文件并初始化过滤器创建过程

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.

成功加载pbj文件后,将调用下一个函数initFilter(),因此可以创建过滤器。此滤镜可设置图像的r,g,b颜色值,从而基本上可以从图像中提取细节。例如,“shader.data.red.value”引用了在开头写的像素弯曲代码,如果你注意到代码有一个“参数浮动红”,它是一个浮点变量来设置红色等级。在这种情况下,将值设置为20.对其他2种颜色重复此过程,然后将其传递给图像实例。

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.

最终函数重复应用滤波器的过程,但首先抓取当前滤波器值并从每次传递的值中减去0.1。此过程会慢慢消除图像中的滤镜强度,直至完全消失。此timerHit()函数是从initFilter()函数中创建的计时器调用的。

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()函数完成,这就是我们要做的

startEffect();

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

抱歉让你的眼睛流血!我认为那是我最长的答案!