The ColorMatrixFilter is a really useful filter for color manipulation of an image in Flash. It is basically a 4×5 matrix that allows you to change the RGBA value of each pixel based on its current RGBA value. You can look at it like row 1 is R, row 2 is G, row 3 is B and row 4 is A. Columns 1-4 also represent R G B A and column 5 is the offset value. The new value for each RGBA component of the color is calculated from its respective row. If R G B and A denote the result values and r g b and a denote the source values and a cell of the matrix is denoted mrow col , then the new value of the pixel can be calculated by doing some matrix multiplication:
| m1 1 | m1 2 | m1 3 | m1 4 | m1 5 |
| m2 1 | m2 2 | m2 3 | m2 4 | m2 5 |
| m3 1 | m3 2 | m3 3 | m3 4 | m3 5 |
| m4 1 | m4 2 | m4 3 | m4 4 | m4 5 |
*
| r |
| g |
| b |
| a |
| 1 |
=
| R |
| G |
| B |
| A |
If you are not familiar with matrices, the result can also be written:
R = m1 1*r + m1 2*g + m1 3*b + m1 4*a + m1 5
G = m2 1*r + m2 2*g + m2 3*b + m2 4*a + m2 5
B = m3 1*r + m3 2*g + m3 3*b + m3 4*a + m3 5
A = m4 1*r + m4 2*g + m4 3*b + am4 4*a + m4 5
In this post I’m going to talk about how we can use the ColorMatrixFilter to desaturate/supersaturate images and how to make them fade towards a specific color.
Saturation
First we are going to work out a saturation filter:
The basic formula we are going to use to build this matrix is the formula for finding a percentage between two numbers (a and b) which looks like this:
n = a+(b-a)*percent;
For example, we know that 30% between 0 and 10 is 3, but you could calculate it by saying 0+(10-0)*.3 . We’re going to use this basic principal, only substituting matrices for numbers. We want a matrix between a black and white version of the image, and the normally saturated image. For the normally saturated image we are going to use the identity matrix (denoted N) because when you multiply by the identity matrix, it is like multiplying a number by 1.
| 1 | 0 | 0 | 0 | 0 |
| 0 | 1 | 0 | 0 | 0 |
| 0 | 0 | 1 | 0 | 0 |
| 0 | 0 | 0 | 1 | 0 |
For the black and white matrix we are going to use this matrix (denoted G):
| .33 | .33 | .33 | 0 | 0 |
| .33 | .33 | .33 | 0 | 0 |
| .33 | .33 | .33 | 0 | 0 |
| 0 | 0 | 0 | 1 | 0 |
We use this because we are just taking a third of each R G B value and then adding them together to get the final value. Because we’re doing the exact same thing in each row, the resulting R G B values will be the same, resulting in a grayscale image.
So now using the formula we had before (n = a+(b-a)*percent; ), each cell can be calculated by aij = gij + (nij – gij)*percent . When you plug that equation in for each cell and simplify you get:
| .33+.67*percent | .33-.33*percent | .33-.33*percent | 0 | 0 |
| .33-.33*percent | .33+.67*percent | .33-.33*percent | 0 | 0 |
| .33-.33*percent | .33-.33*percent | .33+.67*percent | 0 | 0 |
| 0 | 0 | 0 | 1 | 0 |
What you are essentially doing is taking a black and white base and adding a percentage of the color back, but you add a percentage of the difference since you’re not starting at white. When percent = 0 you have a black and white image and when percent = 1, you have normal saturation. What is nice about this matrix is now you can put in a percent value greater than 1 and get a supersaturated image.
Color Fade
We can also use this principal to fade a multicolored image towards a solid color, like so:
Just like before we are going to use the identity matrix (N) as one of the matrices, although in this case it will be our starting matrix rather than the ending matrix. For our ending matrix we are going to use the matrix that would transform the image to a solid color, we’ll call it C:
| 0 | 0 | 0 | 0 | r |
| 0 | 0 | 0 | 0 | g |
| 0 | 0 | 0 | 0 | b |
| 0 | 0 | 0 | 1 | 0 |
This matrix is basically just ignoring the original rgb values and putting in the rgb values that we want as the offset. So using the same formula as before for each cell we get:
| 1 – percent | 0 | 0 | 0 | r*percent |
| 0 | 1 – percent | 0 | 0 | g*percent |
| 0 | 0 | 1 – percent | 0 | b*percent |
| 0 | 0 | 0 | 1 | 0 |
In this case percent = 0 will give you the original image and percent = 1 will give you the solid color. When you apply this filter, it gives the effect of a solid color overlay with an alpha equal to the percent used in the matrix.
For both of these filters you can plug in percentages outside the bounds of [0,1] to get different effects. You’ll just have to experiment!
