Using the ColorTransform object

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading ... Loading ...

The now deprecated Color object was the subject of the previous blog article. If you have not read that article, please do so as it provides a useful introduction. The more complex ColorTransform object allows the user alter an objects color and alpha based on existing values and applied multipliers and offsets.

When a ColorTransform object is used, each color channel is calculated using the following formulas:

  • red value = (original red value * redMultiplier) + redOffset
  • green value = (original green value * greenMultiplier) + greenOffset
  • blue value = (original blue value * blueMultiplier) + blueOffset
  • alpha value = (original alpha value * alphaMultiplier) + alphaOffset

The calculated value is clipped so that it falls in the range 0 to 255. (ie a value > 255 is changed to 255. A value < 0 is changed to 0).

The example movie above demonstrates the Transform being applied to a gradient shaded object. Press the play button to see the effect. Unlike the Color object, each color in the gradient is changed to a new color after the transform. This is not possible with the Color object which would change the entire object into a new single color. Note that as the offsets are altered, the object color tends towards white because of the clipping.

A detailed description of the ColorTransform() object can be found at the Adobe website or in the Flash AS2 language reference pdf document which can be downloaded from here.

In summary the object has the following properties:

Property Description
alphaMultiplier A decimal value that is multiplied by the current alpha channel value to obtain a new value. Generally values between -1.0 and 1.0 are the most useful. The default value is 1.
alphaOffset A number in the range -255..255. This value is added to the result. The default value is 0.
blueMultiplier A decimal value that is multiplied by the current blue channel value to obtain a new value. Generally values between -1.0 and 1.0 are the most useful. The default value is 1.
blueOffset A number in the range -255..255. This value is added to the result. The default value is 0.
greenMultiplier A decimal value that is multiplied by the current green channel value to obtain a new value. Generally values between -1.0 and 1.0 are the most useful. The default value is 1.
greenOffset A number in the range -255..255. This value is added to the result. The default value is 0.
redMultiplier A decimal value that is multiplied by the current red channel value to obtain a new value. Generally values between -1.0 and 1.0 are the most useful. The default value is 1.
redOffset A number in the range -255..255. This value is added to the result. The default value is 0.
rgb Sets the RGB value for the color transform object.

When the transform is applied, the new colors are applied according the the formula described above.  The final values are then clipped to be forced into the range 0..255.

Examples

The example above was implemented with the following script.

onSelfEvent (load) {
 import flash.geom.ColorTransform;
 import flash.geom.Transform;

 var c = new ColorTransform();
 var t = new Transform(shadowclip.colorswatch);
 this.stop();
}
onFrame (3) {
 c.blueOffset += 3;
 c.blueOffset %= 256;
 c.redOffset += 5;
 c.redOffset %= 256;
 c.greenOffset += 7;
 c.greenOffset %=256;
 t.colorTransform = c;
 // trace(c.rgb);
}
function Events(n,v) {
 if (v) this.play(); 
 else this.stop();
}

Explanation

The script creates ColorTransform and Transform objects c and t. The Transform object is associated with the colorswatch circle inside the shadowclip movie clip. On every 3rd frame, the blue, red and green offsets are incremented by 3, 5 and 7. The result is then limited to a value 0..255 using the modulo (%) function. The ColorTransform is then applied via the script:

t.colorTransform = c;

Example 2

The example shown in the previous article could be implemented using the ColorTransform and the following script:

onSelfEvent (load) {
    import flash.geom.ColorTransform;
    import flash.geom.Transform;

    var c = new ColorTransform();
    var t = new Transform(shadowclip.colorswatch);
}
function Events(n,v) {
    v = Math.round(v);
    c.rgb = v;
    t.colorTransform = c;
}

In this case, the rgb property is used to set the red, green and blue color channels directly. This use is similar to the way the Color object works.

Both of the above example .swi files can be obtained from this .zip file. ColorTransform.swi is the second example and ColorTransform2.swi is the first example.

 

Tags: , ,

One Response to “Using the ColorTransform object”

  1. Darren says:

    I’ve been playing with Swishscript for about 2 months now and I absolutely love it! I remember having to code ColorTransforms in flash… arduous!


Switch to our mobile site