Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Working with filters using ActionScript > Using the color matrix filter

Using the color matrix filter

The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the ARGB color and alpha values of every pixel on the input image to produce a result with a new set of ARGB color and alpha values. This filter allows hue (distinct color or shade) rotation, saturation (intensity of a specific hue) changes, luminance (brightness or intensity of a color) to alpha, and various other effects. Also, you can animate these filters to create effects in your applications.

For more information on the color matrix filter, see ColorMatrixFilter (flash.filters.ColorMatrixFilter) in the ActionScript 2.0 Language Reference.

You can use the color matrix filter to modify the brightness of an instance, as the following example demonstrates.

To increase the brightness of a movie clip:

1. Create a new Flash document and save it as brightness.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   import flash.filters.ColorMatrixFilter;
   System.security.allowDomain("http://www.helpexamples.com/");
   var mcl_obj:Object = new Object();
   mcl_obj.onLoadInit = function(target_mc:MovieClip):Void {
       var myElements_array:Array = [1, 0, 0, 0, 100,
               0, 1, 0, 0, 100,
               0, 0, 1, 0, 100,
               0, 0, 0, 1, 0];
       var myColorMatrix_filter:ColorMatrixFilter = new ColorMatrixFilter(myElements_array);
       target_mc.filters = [myColorMatrix_filter];
   }
   this.createEmptyMovieClip("img_mc", this.getNextHighestDepth());
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mcl_obj);
   img_mcl.loadClip("http://www.helpexamples.com/flash/images/image2.jpg", img_mc);
   

   This code dynamically loads a JPEG image by using a MovieClipLoader instance. After the image is completely loaded and is placed on the Stage, the instance's brightness is set to 100% by using a color matrix filter.

3. Select Control > Test Movie to test the document.

You could also create an animated brightness effect by combining the Tween class with the ColorMatrixFilter class, as the next procedure shows.

To animate the brightness level of an instance by using the Tween class:

1. Create a new Flash document and save it as brightnesstween.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   import flash.filters.ColorMatrixFilter;
   import mx.transitions.Tween;
   import mx.transitions.easing.*;
   System.security.allowDomain("http://www.helpexamples.com");
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip):Void {
       // center movie clip instance on Stage
       target_mc._x = (Stage.width - target_mc._width) / 2;
       target_mc._y = (Stage.height - target_mc._height) / 2;
       target_mc.watch("brightness", brightnessWatcher, target_mc);
       // animate the target_mc movie clip between -100 and +100 brightness
       var myTween:Tween = new Tween(target_mc, "brightness", Elastic.easeOut, 100, -100, 3, true);
       myTween.onMotionFinished = function() {
           this.yoyo();
       };
   };
   this.createEmptyMovieClip("img_mc", 10);
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mclListener);
   img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);
   
   function brightnessWatcher(prop:String, oldVal:Number, newVal:Number, target_mc:MovieClip):Number {
       var brightness_array:Array = [1, 0, 0, 0, newVal,
               0, 1, 0, 0, newVal,
               0, 0, 1, 0, newVal,
               0, 0, 0, 1, 0];
       target_mc.filters = [new ColorMatrixFilter(brightness_array)];
       return newVal;
   };
   

   The first section of code uses the MovieClipLoader class to load a JPEG image onto the Stage. After the image completely loads, you reposition the image to the center of the Stage. Then you use the Tween class to animate the image brightness level. To animate the brightness, you use the Object.watch() method, which registers an event handler that you start when a specified property of an ActionScript object changes. Whenever some ActionScript tries to set the custom brightness property of the target_mc instance, you call the brightnessWatcher function. The custom brightnessWatcher function creates a new array, which uses the color matrix filter to set the target image's brightness to a specified amount.

3. Select Control > Test Movie to test the document.

   After the image loads and is placed on the Stage, the image's brightness animates between -100 and 100. After the brightness tween is complete, the animation is reversed using the Tween.yoyo() method, which causes the tween to constantly animate.

Flash CS3