Flash tutorial training on the Color Matrix Filter as used with ActionScript.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Color Matrix Filter with ActionScript

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

Full Version of this: Tutorial