We present a custom AS3 class InterpolateColorTransform. The methods of the class are more versatile than the built-in method Color.interpolateTransform of the Color class in fl.motion package. Our class allows for manipulating each color channel separately and that leads to more varied color effects. Click each screen shot below to open a Flash movie with an example.
Manipulate each channel:
Channel by channel animation:
- Download all source files corresponding to this effects: interpcolors.zip
Download the zip package containing all source files for the two examples above. Below, we present comments and the description of the custom class, InterpolateColorTransform. But first a few words about the built-in AS3 class ColorTransform.
Each DisplayObject, say dispObj, has a property dispObj.transform.colorTransform. Values for that property are instances of the built-in ColorTransform class. Any instance of ColorTransform, say colTrans, is an object with the following properties:
Multipliers can be positive or negative floating point numbers, most often between -1 and 1, offset values are numbers between -255 and 255. If you assign:
dispObj.transform.colorTransform = colTrans;
the color and alpha of each pixel of dispObj is transformed as follows. Let origRed, origGreen, origBlue, origAlpha be original values for a given pixel. Then transformed values, newRed, newGreen, newBlue, newAlpha, are:
newRed = origRed * colTrans.redMultiplier + colTrans.redOffset
newGreen = origGreen * colTrans.greenMultiplier + colTrans.greenOffset
newBlue = origBlue * colTrans.blueMultiplier + colTrans.blueOffset
newAlpha = origAlpha * colTrans.alphaMultiplier + colTrans.alphaOffset
anotherTrans = new ColorTransform();
by default gives the identity transform; that is, the ColorTransform with multiplier and offset values of: 1,1,1,1,0,0,0,0.
Using a ColorTransform with multipliers between 0 and 1 and offset values 0, tints the original DisplayObject. For example, a transform with values: 0.5,1,1,1,0,0,0,0 decreases the amount of red in each pixel by half. See our tutorial: Applying Color Tints to a Photo.
If you want to fill an object with a solid color, set multipliers to 0 and offset values to red, green, and blue components of the desired color. See our tutorial: Changing Colors of Display Objects in Flash CS3, ColorTransform in AS3.
The ColorTransform That Inverts an Image
In our examples, we use the ColorTransform that, when applied to an image or a DisplayObject inverts all the colors and produces a negative of our image. The transform that inverts an image replaces origRed with 255-origRed, origGreen with 255-origGreen, and origBlue with 255-origBlue. It is the the transform with multiplier and offset values of: -1,-1,-1,1,255,255,255,0. To obtain a ColorTransform with given values, you can pass those values to the constructor:
invertTrans = new ColorTransform(-1,-1,-1,1,255,255,255,0);
The Custom InterpolateColorTransform AS3 Class
The InterpolateColorTransform class has several useful static methods that produce in-between ColorTransforms; that is, interpolate, between two given ColorTransforms, say tr0 and tr1. The in-between transforms when applied to a DisplayObject create an effect of a smooth transition between two color schemes of the object, the two color schemes defined by the two transforms tr0, tr1. In our examples, the two ColorTransforms between which we interpolate are the identity transform and the transform that inverts an image.
The methods of the class are more versatile than the built-in method Color.interpolateTransform of the Color class in fl.motion package. The Color.interpolateTransform method interpolates between two color transforms by transforming concurently each color channel from the start transform values to the end transform values. It works as follows. For two ColorTransforms, say tr0 and tr1, and a progress parameter prog that starts at 0 and ends at 1, the value returned by:
is the ColorTransform obtained by moving the value of each color channel by the fraction prog from the channel value of tr0 to the channel value of tr1.
Beacuse all the channels are changing at the same time, the in-between transforms often produce grayish results, not always the most compelling.
Our custom InterpolateColorTransform class has a static method that allows you to set the progress parameters, pr1, pr2, pr3,pr4 separately for each color channel and the alpha channel:
You can see this method in action in the first of our examples with the sliders.
The class has other useful static methods. For example:
The latter method interpolates color channels one-by-one, first red, then green, then blue. The results are often quite interesting. You can see goRGB method in action in the second of our examples.
The class has the methods goGBR, goBRG and so on for any order in which you want to gradually change color channels. Download the zip package with the class and other source files and enjoy playing with the class.