Flash CS3 Documentation

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

Using the convolution filter

The ConvolutionFilter class applies a matrix convolution filter effect. A convolution combines pixels in a source image that you specify with neighboring pixels to produce an image. You can achieve a wide variety of imaging operations by using the convolution filter, which includes blurring, edge detection, sharpening, embossing, and beveling effects.

A matrix convolution is based on an n x m matrix, which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value. Each resulting pixel is determined by applying the matrix to the corresponding source pixel and its neighboring pixels.

This filter is only available by using ActionScript. For more information on this filter, see ConvolutionFilter (flash.filters.ConvolutionFilter) in the ActionScript 2.0 Language Reference.

The following procedure applies the convolution filter to a dynamically loaded JPEG image.

To use the convolution filter to modify an image's color:

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

   import flash.filters.ConvolutionFilter;
   import flash.display.BitmapData;
   
   this.createEmptyMovieClip("shape_mc", 1);
   shape_mc.createEmptyMovieClip("holder_mc", 1);
   var imageLoader:MovieClipLoader = new MovieClipLoader();
   imageLoader.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", shape_mc.holder_mc);
   var matrixArr:Array = [1, 4, 6, 4, 1, 4, 16, 24, 16, 4, 16, 6, 24, 36, 24, 6, 4, 16, 24, 16, 4, 1, 4, 6, 4, 1];
   var convolution:ConvolutionFilter = new ConvolutionFilter(5, 5, matrixArr);
   shape_mc.filters = [convolution];
   
   var mouseListener:Object = new Object();
   mouseListener.onMouseMove = function():Void {
       convolution.divisor = (_xmouse / Stage.width) * 271;
       convolution.bias = (_ymouse / Stage.height) * 100;
       shape_mc.filters = [convolution];
   };
   Mouse.addListener(mouseListener);
   

   The preceding code is separated into three sections. The first section imports two classes: ConvolutionFilter and BitmapData. The second section creates a nested movie clip and uses a movie clip loader object to load an image into the nested movie clip. A convolution filter object is created and applied to the shape_mc movie clip. The final section of code defines a mouse listener object that modifies the convolution filter's divisor and bias properties based on the current position of the mouse pointer and reapplies the convolution filter to the shape_mc movie clip.

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

   Moving the mouse pointer along the x-axis of the Stage modifies the filter's divisor, whereas moving the mouse pointer along the y-axis of the Stage modifies the filter's bias.

Flash CS3