The color matrix in Flash

Source: Internet
Author: User
Tags filter array first row

Color matrix

In Flash, you can use the matrix to manipulate colors easily. In previous versions of Flash8, the only way to manipulate colors was by modifying the values of red, green, and blue three channels in the Color object, in Flash8, the "Color Matrix filter" Colormatrixfilter (flash.filters.ColorMatrixFilter Provides you with a better control method at the granular level. The color matrix filter is a multidimensional matrix (an array of 20 elements) of 4 rows and 5 columns. Figure 4 is the matrix equivalent to the color matrix filter.


Figure 4. Matrix equivalent to the color matrix filter

The values of red, green, and blue channels are determined by the calculation method shown below:

CODE:

Redresult = a[0] * SRCR + a[1] * SRCG + a[2] * SRCB + a[3] * Srca + a[4]
Greenresult = a[5] * SRCR + a[6] * SRCG + a[7] * SRCB + a[8] * Srca + a[9]
Blueresult = a[10] * SRCR + a[11] * SRCG + a[12] * SRCB + a[13] * Srca + a[14]
Alpharesult = a[15] * SRCR + a[16] * SRCG + a[17] * SRCB + a[18] * Srca + a[19]

As you can see, the value in the first row determines the red value, the second row is green, the third line is blue, and line fourth is the Transparent (ALPHA) channel value. You can also see that the first four column values are the product of the values of the red, green, blue, and alpha channels, and the value of column V is and (offset) respectively. Note that the source and result values for each row are within a range of 0 to 255. Therefore, even if the value of each channel is less than 0 or greater than 255, it will be forced into the interval. Let me give you some examples of how it works.

If you want to add 100 (offset) to the red channel, set A[4 to 100, such as (Figure 5).


Figure 5. Red value increased by 100

If you want to double the green channel, set the A[6] to 2, as (Figure 6)


Figure 6. Green Double

If you want to make the blue in the resulting image equal to the red number of the original, set the a[10] to 1, a[12 to 0, as (Figure 7)


Figure 7. Red determines blue value

To change the brightness of the image, you need to change the same number of values in each color channel. The easiest way to do this is to set the same offset in each channel. When the offset is positive, the brightness can be reduced by increasing the brightness to negative. (Figure 8) is an example of increasing brightness.


Figure 8. Increase brightness

You can also change the brightness proportionally by multiplying each color channel by a value that is greater than 1 with an increased brightness of less than 1 and decreasing brightness.
By principle, you convert an image to a grayscale image, and you need to set the portion of each channel to be equivalent. Because there are three channels, you can multiply each channel by 0.33 and add them to the resulting value. For example (Figure 9)


Figure 9. Grayscale Graph Matrix

Because of the relative screen luminosity of different color channels, there is a special "luminance factor" value that provides a more realistic grayscale image. For example, create a pure green block in PS and then put it in a pure blue block, and then gray the image, you will see the original green place of the gray will be brighter than the original blue area.

Use these matrices in Flash to create an instance of a "color matrix filter" and then add it to a movie clip (MovieClip) instance. Here is an example of doubling green:

CODE:
Import Flash.filters.ColorMatrixFilter;
var mat:array = [1,0,0,0,0,
0,2,0,0,0,
0,0,1,0,0,
0,0,0,1,0];
var colormat:colormatrixfilter = new Colormatrixfilter (MAT);
Clip.filters = [Colormat];

The color matrix filter is used with a known matrix, and you can complete the complex color adjustment in addition to brightness and grayscale. Adjust the contrast, saturation and hue in Flash 8 kinds have become Ken. While it's a little far away from this article, it's enough to say that Flash 8 provides a way for color manipulation that no previous version can do.

The following flash can see how the result matrix changes when manipulating the image!
Flash:
http://www.adobe.com/devnet/flash/articles/matrix_transformations/
colormatrixdemo.swf

There's a wrong place to translate, and a master's advice.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.