Adding color and brightness effects with code

In addition to using ActionScript to set and animate alpha fades (see Fading objects with code), you can animate various color and brightness effects by using code instead of using the Filters panel in the Property inspector.

The following procedure loads a JPEG image and applies a color transform filter, which modifies the red and green channels as the mouse pointer moves along the x-axis and y-axis.

To change an object's color channels by using ActionScript:

Create a new Flash document called colorTrans.fla.

Select Frame 1 of the Timeline, and add the following code to the Actions panel:

import flash.geom.Transform;
import flash.geom.ColorTransform;

var imageClip:MovieClip = this.createEmptyMovieClip("imageClip", 1);
var clipLoader:MovieClipLoader = new MovieClipLoader();
clipLoader.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", imageClip);

var mouseListener:Object = new Object();
mouseListener.onMouseMove = function():Void {
  var transformer:Transform = new Transform(imageClip);
  var colorTransformer:ColorTransform = transformer.colorTransform;
  colorTransformer.redMultiplier = (_xmouse / Stage.width) * 1;
  colorTransformer.greenMultiplier = (_ymouse / Stage.height) * 1;
  transformer.colorTransform = colorTransformer;
}
Mouse.addListener(mouseListener);

Select Control > Test Movie to test the document, and then move the mouse pointer around the Stage.

The image file that loads transforms colors as you move the mouse.

You can also use the ColorMatrixFilter class to convert a color image to a black and white image, as the following procedure shows.

To use the ColorMatrixFilter class to change an image to a grayscale image:

Create a new Flash document called grayscale.fla.

Select Frame 1 of the Timeline, and add the following code to the Actions panel:

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 = [0.3, 0.59, 0.11, 0, 0,
            0.3, 0.59, 0.11, 0, 0,
            0.3, 0.59, 0.11, 0, 0,
            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/image1.jpg", img_mc);

The preceding code begins by importing the ColorMatrixFilter class, and creates a listener object that will be used with a new MovieClipLoader instance created in some later code. Next, a new movie clip instance is created with the instance name img_mc, as well as a new movie clip loader instance with the instance name img_mcl. Finally, the source movie clip is loaded into the img_mc movie clip on the Stage. When the image is successfully loaded, the onLoadInit event handler is called and attaches a ColorMatrixFilter to the loaded image.

Select Control > Test Movie to test the document.

The image that you load onto the Stage changes to a grayscale image. View the image online (http://www.helpexamples.com/flash/images/image1.jpg) to see the original color of the image.

You can also set an image's brightness by using the ActionScript code in the following procedure.

To change an image's brightness:

Create a new Flash document called brightness.fla.

Select Frame 1 of the Timeline and add the following code to the Actions panel:

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 block of code uses the MovieClipLoader class to load an external JPEG. When the image successfully loads, the MovieClipLoader class onLoadInit event handler is called and modifies the image brightness to 100 using the ColorMatrixFilter filter.

Select Control > Test Movie to test the document.

The image that you load into the SWF file changes its brightness when you test the SWF file. View the image online (http://www.helpexamples.com/flash/images/image2.jpg) to see the original appearance of the image.

For a source sample of scripted animation in Flash, animation.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/Animation folder to access the sample.

For samples of photo gallery applications, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/Galleries folder to access these samples:

gallery_tree.fla

gallery_tween.fla

These files provide examples of how to use ActionScript to control movie clips dynamically while loading image files into a SWF file, which includes scripted animation.

Flash CS3