Flash training: Learn to use the ColorMatrixFilter & ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Color Matrix Filter with ActionScript

 

Free Flash Tutorial

 

 

The Color Matrix Filter lets you add color filters to Movie Clips, Buttons, Text and Bitmap Images. A Color Matrix Filter shifts the color in a particular direction. It allows changes to the images color saturation, hue, luminance brightness and other color shift effects.

Example: Download the Flash file Draw 218a



Original Photo with natural colors.


The red & blue colors have been increased.

 

In this tutorial you will learn the ActionScript needed to apply the Color Matrix Filter to a Movie Clips with a Jpeg image placed inside the Movie Clip.

 

In this tutorials you will create the following Color Matrix Effect:

Example: Download the Flash file Draw 218a

 


Flash Movie created with a Color Matrix Filter.

Note: A filter is not applied if the resulting image exceeds 2880 pixels in width or height. For example, if you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds the limit of 2880 pixels.

Important Cross Ref: This tutorial shows you all the ActionScript including all the options available through the parameters. But it only briefly describes how to apply this to an object within Flash or how to edit the parameter settings. If you are not familiar with this I suggest that you return here after first reading the tutorial: Creating Filters with ActionScript

 

Quick Link: Go straight to: Color Matrix Filter ActionScript

Quick Link: Go straight to: Color Matrix Settings

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 

Important Note: These Filters only work in Flash Professional 8. The filters are not available in Flash 8 Basic or any of the earlier versions of Flash such as Flash MX04/MX/5.

 

If you don't know what version you are using go to: Help > About Flash and you will see the logo:

 

 

Step One: Setting up the Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. Important Note: You will not see the Filters unless your Movie is set to be published in the Flash 8 Player. It also needs to be set to ActionScript 2 otherwise you will get error messages. It is best to set these options right from the start.

  3. Go to: File > Publish Settings
  4. If the Flash Tab is not selected, select it:
  5. Note: This Tab will not be visible unless the Flash box (under the Formats Tab) is selected: .

  6. For Version select: Flash Player 8
  7. For ActionScript version select: ActionScript 2
  8. Click: OK
  9. Note: For the next section you will need to have a Photo saved to a location that you can find. If you want use my Jpeg photo. Right click (Mac: Ctrl + click) on the photo and select: Save Picture As...


    Right click on the photo and save the picture.

  10. Import a Photo: File > Import > Import to Stage (Ctrl R)
  11. Convert photo to a Movie Clip: Modify > Convert to Symbol (F8)
  12. Give the Movie Clip an appropriate name: myMovieClip
  13. For type select: Movie Clip
  14. This is my Movie Clip:


    My Movie Clip before the Color Matrix has been applied.

    Note: It is possible to apply the Color Matrix Filter directly to a photo using Linkage from the Library. In this tutorial I am not using the Linkage system but placing the Jpeg into a Movie Clip.

  15. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  16. With the Movie Clip still selected type an Instance Name: myObject

  17. My Movie Clip with an instance name: myObject


Step Two: The ActionScript

  1. In the Timeline insert a new Layer:
  2. Name the Layer: ActionScript
  3. Select Frame 1 of the Actionscript Layer: Frame 1
  4. Open the Actions Panel: Window > Actions (F9)
  5. If Script Assist is on, Switch it off:

    Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

  6. Type the following into the Actions Panel:

    // Makes the filter available to use in the Movie.
    import flash.filters.ColorMatrixFilter;

    // Defines which colors to change.
    var myMatrix:Array = [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 */

    // Creates a variable with info about the Filter settings.
    var colorMatrix = new ColorMatrixFilter(myMatrix);

    // Applies the filter to the object named myObject.
    myObject.filters = [colorMatrix];

     

    Note: If you wish you can type the Matrix in a more 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];

    I have spread it out into a matrix as 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 and space 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];

     

  7. Test your Movie: Control > Test Movie (Ctrl Enter)


Step Three: Color Matrix Filter 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,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,2,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

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



The default setting will have no effect on your image!

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.


Step Four: 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 */


Step Five: Matrix Settings - 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.


Step Six: 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!



Step Seven: 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 */

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


33492 visitors to this page since 2 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.