Flash tutorial training on the Color Matrix Filter as used with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Click by Click: Color Matrix Filter with ActionScript

See Full Version: This is a shortened click by click version of a: Full Length Tutorial



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.


Step One: Setting up the Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. Go to: File > Publish Settings
  3. If the Flash Tab is not selected, select it:
  4. For Version select: Flash Player 8
  5. For ActionScript version select: ActionScript 2
  6. Click: OK
  7. Import o Photo: File > Import > Import to Stage (Ctrl R)
  8. Convert photo to a Movie Clip: Modify > Convert to Symbol (F8)
  9. Give the Movie Clip an appropriate name: myMovieClip
  10. For type select: Movie Clip
  11. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  12. With the Symbol, Text or Button still selected type 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:
  6. Type (or paste) 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];

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


Important Note: There is considerably more information in the full version of this tutorial especially as to how to set the Matrix to achieve particular color effects. See Full Version of this: Tutorial


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

See Full Version of this: Tutorial

16076 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.