Flash Tutorials: Learn how to edit the color Matrix filter parameter settings.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Create Multiple Filters with ActionScript

 

Free Flash Tutorial


Step 11   <<   Previous      Intro   1   2   3   4   5   6   7   8   9   10   11    >>      

 

Step Eleven: Color Matrix Parameter Settings

In this section detailed information is given on each of the Color Matrix Filter settings. I will first explain what each line does and then go through how to set each of the individual settings. This will enable you to set and edit the Filter correctly. This is done with the Matrix section of code:

[2,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0,0,0,1,0];

Important Note: If you wish you can type the Matrix in the standard format like this:

[2,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0,0,0,1,0];

Or like this:

[2,0,0,0,0, 0,1,0,0,0, 0,0,2,0,0, 0,0,0,1,0];

In the examples that follow I have spread the code out into a matrix. This makes it is much easier to understand and edit. If you wish to type the code in a matrix format make sure you don't get your commas (,) and semi colons (;) mixed up. If you do you will get errors. There is only one semi colons (;) which defines the codes end of line:

[2,0,0,0,0,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,2,0,0,   /* Blue */
 0,0,0,1,0]
;  /* Alpha Transparency */

If you wish you can leave out the gray comments and white space. I only add the comments to make the code easier to read and edit. It could just as well be typed like this:

[2,0,0,0,0,
 0,1,0,0,0,
 0,0,2,0,0,
 0,0,0,1,0];

 

You use the matrix to manipulate colors in Flash. The default setting is:



The default setting will have no effect on your image!

Example: Download the Flash file Draw 218a



Original Photo with natural colors.


The red & blue colors have been increased.

 

See how the RGB (Red, Green Blue) settings change the images color. Click on the Flash Movie below and move your Mouse cursor over the image:

Example: Download the Flash file Draw 218b


Matrix values change as your Mouse moves over: Click and move you mouse.


Matrix Settings
- Multiply or Add

The values in the first four columns are multiplied with the source red, green, blue, and alpha values respectively. The fifth column value is added (offset).


To double the red place a 2 in the red row:

[2,0,0,0,0,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,1,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


Red has been doubled.


Instead I could use the offset to add a fixed amount of red. The maximum I can add is 255:


A hint of red.

[0,0,0,0,80,  /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 


Maximum red.

[0,0,0,0,255, /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

You can also add in color by increasing the alpha channel. Maximum is 1:


A hint of red.

[1,0,0,0.4,0,  /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 


Maximum red.

[1,0,0,1,0, /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


Removing Color

Here the red has been removed:

[0,0,0,0,0,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,1,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


There is no red.


Here everything but the red has been removed:

[1,0,0,0,0,   /* Red */
 0,0,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


There is no green or blue.


Matrix Settings - Color Shift & Grayscale

If you want the amount of red in the source image to dictate the green value in the result image:

[1,0,0,0,0,   /* Red */
 1,0,0,0,0,   /* Green */
 0,0,1,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


Green is set by red value.

Here all the colors channels have been shifted to the wrong place :

[0,0,1,0,0,   /* Red */
 1,0,0,0,0,   /* Green */
 0,1,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


All colors have been shifter to the wrong place!


Add the blue into the red column and all color information is set by the red channel thus all colors are the same:

[1,0,0,0,0,   /* Red */
 1,0,0,0,0,   /* Green */
 1,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


All colors are set by red which gives black and white!


True Grayscale :

[.33,.33,.33,0,0,   /* Red */
 .33,.33,.33,0,0,   /* Green */
 .33,.33,.33,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


All colors are set by red which gives black and white!



Matrix Settings - Brightness

Try to add or subtract a little of everything:


Brightness increased .

[1,0,0,0,50,  /* Red */
 0,1,0,0,50,   /* Green */
 0,0,1,0,50,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 


Brightness reduced.

[1,0,0,0,-50,  /* Red */
 0,1,0,0,-50,   /* Green */
 0,0,1,0,-50,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

         

Step 11   <<   Previous      Intro   1   2   3   4   5   6   7   8   9   10   11    >>      


20220 visitors to this page since 4 April 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.