This series of animate flash color tutorials use Color Matrix Transformation to make some flash color animation with Flash ActionScript 3.
Our Color Matrix Transformation examples include brightness, red-green-blue channels, alpha channel, color contrast, color saturation, etc..
Table of Contents
Adjust Brightness
The first animate flash tutorial show how to use Color Matrix Transformation to adjust the brightness of image.
We start exploring Color Matrix transformation matrix by adjusting the brightness of a movieclip.
The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the ARGB color and alpha values of every pixel on the input image to produce a result with a new set of ARGB color and alpha values. This filter allows hue (distinct color or shade) rotation, saturation (intensity of a specific hue) changes, luminance (brightness or intensity of a color) to alpha, and various other effects. Also, you can animate these filters to create effects in your applications.
Adjust Red Green Blue Channels
This Flash ActionScript tutorial show how to use Color Matrix Transformation to adjust the Red, green and Blue color channels of image.
As we mentioned before that the ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the ARGB color and alpha values of every pixel on the input image to produce a result with a new set of ARGB color and alpha values. For example:
Red, 0, 0, 0, Offset,
0, Green, 0, 0, Offset,
0, 0, Blue, 0, Offset,
0, 0, 0, Alpha, Offset
We can adjust the Red green Blue color of Color Matrix transformation matrix by adjusting the RGB channels of a movieclip. To increase red color (e.g. double), simply increase the Red Channel as shown below:
2, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, 1, 0
Adjust Alpha Channels
This Flash ActionScript tutorial show how to use Color Matrix Transformation to adjust the Alpha channels of image.
As we learned that the ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the ARGB color and alpha values of every pixel on the input image to produce a result with a new set of ARGB color and alpha values.
Red, 0, 0, 0, Offset,
0, Green, 0, 0, Offset,
0, 0, Blue, 0, Offset,
0, 0, 0, Alpha, Offset
We can adjust the Alpha of Color Matrix transformation matrix by adjusting the Alpha channel of a movieclip.
1, 0, 0, 0, 80,
0, 1, 0, 0, 80,
0, 0, 1, 0, 80,
0, 0, 0, Alpha, 0
where alpha is between 0.0 and 1.0
Adjust Color Contrast
This Flash ActionScript tutorial show how to use Color Matrix Transformation to adjust the color contrast of image.
As we learned that the ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the ARGB color and alpha values of every pixel on the input image to produce a result with a new set of ARGB color and alpha values.
Red, 0, 0, 0, Offset,
0, Green, 0, 0, Offset,
0, 0, Blue, 0, Offset,
0, 0, 0, Alpha, Offset
We can adjust the Color Contrast of Color Matrix transformation matrix by adjusting the offset channels of a movieclip.
To adjust the color contrast, simply adjust:
– the Offset of each color, and
– the Red Channel, the Green Channel and the Blue Channel
For example:
3, 0, 0, 0, -256,
0, 3, 0, 0, -256,
0, 0, 3, 0, -256,
0, 0, 0, 1, 0
Adjust Color Saturation
This Flash ActionScript tutorial show how to use Color Matrix Transformation to adjust the color saturation of image.
As we learned that the ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the ARGB color and alpha values of every pixel on the input image to produce a result with a new set of ARGB color and alpha values.
Red, 0, 0, 0, Offset,
0, Green, 0, 0, Offset,
0, 0, Blue, 0, Offset,
0, 0, 0, Alpha, Offset
We can adjust the Color Saturation of Color Matrix transformation matrix by adjusting the RGB channels of a movieclip.
To adjust the saturation, simply adjust:
– the Red Channel, the Green Channel and the Blue Channel
– the Red Green Blue Factors
For example:
30, Green Factor, Blue Factor, 0, 0,
Red Factor, 30, Blue Factor, 0, 0,
Red Factor, Green Factor, 30, 0, 0,
0, 0, 0, 1, 0
Brightness Animation
This Flash ActionScript tutorial show how to use Color Matrix Transformation to create flash color brightness animation of image.
We already know how to use Color Matrix Transformation in previous examples. We can now do some interesting flash animation with Color Matrix Transformation. In this flash tutorial, we show how to use color Matrix Transformation to animate the brightness of an image from dark to normal.
Photo Aging Animation (Color to Black/White)
This Flash ActionScript tutorial show how to use Color Matrix Transformation to create a flash color aging effect animation of image.
Let’s do one more flash color animation with Color Matrix Transformation. In this flash example, we use Color Matrix Transformation to animate a picture from color to black/white. This simulate an aging effect of a color picture.
Download Source Files:
The compressed zip file contains the following source files:
brightness.fla
adjust-red-green-blue.fla
alpha.fla
contrast.fla
saturation.fla
brightness-animation.fla
aging-to-grey-and-white-animation.fla
Leave a Reply