flash.filters

# ConvolutionFilter - AS3

Package | flash.filters
Class | public class ConvolutionFilter
Inheritance | ConvolutionFilter BitmapFilter Object

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The ConvolutionFilter class applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce an image. A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling. You can apply the filter to any display object (that is, objects that inherit from the DisplayObject class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects.

To create a convolution filter, use the syntax `new ConvolutionFilter()`. The use of filters depends on the object to which you apply the filter:

- To apply filters to movie clips, text fields, buttons, and video, use the `filters` property (inherited from DisplayObject). Setting the `filters` property of an object does not modify the object, and you can remove the filter by clearing the `filters` property.
- To apply filters to BitmapData objects, use the `BitmapData.applyFilter()` method. Calling `applyFilter()` on a BitmapData object takes the source BitmapData object and the filter object and generates a filtered image as a result.

If you apply a filter to a display object, the value of the `cacheAsBitmap` property of the object is set to `true`. If you clear all filters, the original value of `cacheAsBitmap` is restored.

A filter is not applied if the resulting image exceeds the maximum dimensions. In AIR 1.5 and Flash Player 10, the maximum is 8,191 pixels in width or height, and the total number of pixels cannot exceed 16,777,215 pixels. (So, if an image is 8,191 pixels wide, it can only be 2,048 pixels high.) In Flash Player 9 and earlier and AIR 1.1 and earlier, the limitation is 2,880 pixels in height and 2,880 pixels in width. For example, if you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds maximum dimensions.

View the examples

Related API Elements

flash.display.BitmapData.applyFilter()
flash.display.DisplayObject.filters
flash.display.DisplayObject.cacheAsBitmap
matrix

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | alpha : Number The alpha transparency value of the substitute color. | ConvolutionFilter
|  | bias : Number The amount of bias to add to the result of the matrix transformation. | ConvolutionFilter
|  | clamp : Boolean Indicates whether the image should be clamped. | ConvolutionFilter
|  | color : uint The hexadecimal color to substitute for pixels that are off the source image. | ConvolutionFilter
|  | constructor : Object A reference to the class object or constructor function for a given object instance. | Object
|  | divisor : Number The divisor used during matrix transformation. | ConvolutionFilter
|  | matrix : Array An array of values used for matrix transformation. | ConvolutionFilter
|  | matrixX : Number The x dimension of the matrix (the number of columns in the matrix). | ConvolutionFilter
|  | matrixY : Number The y dimension of the matrix (the number of rows in the matrix). | ConvolutionFilter
|  | preserveAlpha : Boolean Indicates if the alpha channel is preserved without the filter effect or if the convolution filter is applied to the alpha channel as well as the color channels. | ConvolutionFilter

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | ConvolutionFilter(matrixX:Number = 0, matrixY:Number = 0, matrix:Array = null, divisor:Number = 1.0, bias:Number = 0.0, preserveAlpha:Boolean = true, clamp:Boolean = true, color:uint = 0, alpha:Number = 0.0) Initializes a ConvolutionFilter instance with the specified parameters. | ConvolutionFilter
|  | clone():BitmapFilter [override] Returns a copy of this filter object. | ConvolutionFilter
|  | hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined. | Object
|  | isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter. | Object
|  | propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable. | Object
|  | setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations. | Object
|  | toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions. | Object
|  | toString():String Returns the string representation of the specified object. | Object
|  | valueOf():Object Returns the primitive value of the specified object. | Object

Property Detail

### alpha

property

`alpha:Number`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The alpha transparency value of the substitute color. Valid values are 0 to 1.0. The default is 0. For example, .25 sets a transparency value of 25%.

Implementation
`public function get alpha():Number`
`public function set alpha(value:Number):void`

### bias

property

`bias:Number`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The amount of bias to add to the result of the matrix transformation. The bias increases the color value of each channel, so that dark colors appear brighter. The default value is 0.

Implementation
`public function get bias():Number`
`public function set bias(value:Number):void`

### clamp

property

`clamp:Boolean`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

Indicates whether the image should be clamped. For pixels off the source image, a value of `true` indicates that the input image is extended along each of its borders as necessary by duplicating the color values at each respective edge of the input image. A value of `false` indicates that another color should be used, as specified in the `color` and `alpha` properties. The default is `true`.

Implementation
`public function get clamp():Boolean`
`public function set clamp(value:Boolean):void`
Example ( How to use this example )
The following example creates two boxes using the `BitmapData` class, one of which is half the size of the other. When the example first loads, the larger box is drawn inside `mc` using the `attachBitmap()`. When `mc` is clicked and the `applyFilter()` method is called, the `largeBox` instance of `BitmapData` is redrawn with `smallBox` as a source bitmap. Since `applyFilter()` draws `smallBox` over a `Rectangle` whose width and height is specified as those of `largeBox`, the source bitmap is smaller than the drawing area. The `clamp` property of `ConvolutionFilter` in this case is set to `false` and the area which is not covered by the source bitmap, `smallBox`, is a solid red as determined by the `clampColor` and `clampAlpha` variables.
Copy

     package {
        import flash.display.Sprite;
        import flash.display.BitmapData;
        import flash.filters.ConvolutionFilter;
        import flash.text.TextField;
        import flash.geom.Rectangle;
        import flash.geom.Point;

        public class ConvolutionClampExample extends Sprite {
            // Variables that affect clamping:
            var clamp:Boolean = false;
            var clampColor:Number = 0xFF0000;
            var clampAlpha:Number = 1;

            // For illustration, keep other ConvolutionFilter variables neutral:
            var bias:Number = 0;
            var preserveAlpha:Boolean = false;
            // Also, construct a neutral matrix
            var matrixCols:Number = 3;
            var matrixRows:Number = 3;
            var matrix:Array = [ 1,1,1,
                                 1,1,1,
                                 1,1,1 ];

            var filter:ConvolutionFilter = new ConvolutionFilter(matrixCols, matrixRows, matrix, matrix.length, bias, preserveAlpha, clamp, clampColor, clampAlpha);

            var largeBoxWidth:Number = 100;
            var largeBoxHeight:Number = 100;
            var largeBox:BitmapData = new BitmapData(largeBoxWidth, largeBoxWidth, true, 0xCC00FF00);
            var smallBoxWidth:Number = largeBoxWidth / 2;
            var smallBoxHeight:Number = largeBoxHeight / 2;
            var smallBox:BitmapData = new BitmapData(smallBoxWidth, smallBoxWidth, true, 0xCC0000FF);

            var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
            mc.attachBitmap(largeBox, this.getNextHighestDepth());

            mc.onPress = function() {
                largeBox.applyFilter(smallBox,
                                     new Rectangle(0,0, largeBoxWidth, largeBoxHeight),
                                     new Point(0,0),
                                     filter);
            }
        }
    }

### color

property

`color:uint`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The hexadecimal color to substitute for pixels that are off the source image. It is an RGB value with no alpha component. The default is 0.

Implementation
`public function get color():uint`
`public function set color(value:uint):void`

### divisor

property

`divisor:Number`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The divisor used during matrix transformation. The default value is 1. A divisor that is the sum of all the matrix values smooths out the overall color intensity of the result. A value of 0 is ignored and the default is used instead.

Implementation
`public function get divisor():Number`
`public function set divisor(value:Number):void`

### matrix

property

`matrix:Array`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

An array of values used for matrix transformation. The number of items in the array must equal `matrixX * matrixY`.

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 result pixel is determined by applying the matrix to the corresponding source pixel and its neighboring pixels.

For a 3 x 3 matrix convolution, the following formula is used for each independent color channel:

    	dst (x, y) = ((src (x-1, y-1) * a0 + src(x, y-1) * a1....
    	                  src(x, y+1) * a7 + src (x+1,y+1) * a8) / divisor) + bias

Certain filter specifications perform faster when run by a processor that offers SSE (Streaming SIMD Extensions). The following are criteria for faster convolution operations:

- The filter must be a 3x3 filter.
- All the filter terms must be integers between -127 and +127.
- The sum of all the filter terms must not have an absolute value greater than 127.
- If any filter term is negative, the divisor must be between 2.00001 and 256.
- If all filter terms are positive, the divisor must be between 1.1 and 256.
- The bias must be an integer.

Note: If you create a ConvolutionFilter instance using the constructor without parameters, the order you assign values to matrix properties affects the behavior of the filter. In the following case, the matrix array is assigned while the `matrixX` and `matrixY` properties are still set to `0` (the default value):

Copy

        public var myfilter:ConvolutionFilter = new ConvolutionFilter();
        myfilter.matrix = [0, 0, 0, 0, 1, 0, 0, 0, 0];
        myfilter.matrixX = 3;
        myfilter.matrixY = 3;

In the following case, the matrix array is assigned while the `matrixX` and `matrixY` properties are set to `3`:

Copy

        public var myfilter:ConvolutionFilter = new ConvolutionFilter();
        myfilter.matrixX = 3;
        myfilter.matrixY = 3;
        myfilter.matrix = [0, 0, 0, 0, 1, 0, 0, 0, 0];

Implementation
`public function get matrix():Array`
`public function set matrix(value:Array):void`
Throws

| `TypeError` — The Array is null when being set

### matrixX

property

`matrixX:Number`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The x dimension of the matrix (the number of columns in the matrix). The default value is 0.

Implementation
`public function get matrixX():Number`
`public function set matrixX(value:Number):void`

### matrixY

property

`matrixY:Number`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

The y dimension of the matrix (the number of rows in the matrix). The default value is 0.

Implementation
`public function get matrixY():Number`
`public function set matrixY(value:Number):void`

### preserveAlpha

property

`preserveAlpha:Boolean`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

Indicates if the alpha channel is preserved without the filter effect or if the convolution filter is applied to the alpha channel as well as the color channels. A value of `false` indicates that the convolution applies to all channels, including the alpha channel. A value of `true` indicates that the convolution applies only to the color channels. The default value is `true`.

Implementation
`public function get preserveAlpha():Boolean`
`public function set preserveAlpha(value:Boolean):void`
Constructor Detail

### ConvolutionFilter

()
Constructor

`public function ConvolutionFilter(matrixX:Number = 0, matrixY:Number = 0, matrix:Array = null, divisor:Number = 1.0, bias:Number = 0.0, preserveAlpha:Boolean = true, clamp:Boolean = true, color:uint = 0, alpha:Number = 0.0)`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

Initializes a ConvolutionFilter instance with the specified parameters.

Parameters

| `matrixX:Number` (default = `0`)`` — The x dimension of the matrix (the number of columns in the matrix). The default value is 0.
| `matrixY:Number` (default = `0`)`` — The y dimension of the matrix (the number of rows in the matrix). The default value is 0.
| `matrix:Array` (default = `null`)`` — The array of values used for matrix transformation. The number of items in the array must equal `matrixX * matrixY`.
| `divisor:Number` (default = `1.0`)`` — The divisor used during matrix transformation. The default value is 1. A divisor that is the sum of all the matrix values evens out the overall color intensity of the result. A value of 0 is ignored and the default is used instead.
| `bias:Number` (default = `0.0`)`` — The bias to add to the result of the matrix transformation. The default value is 0.
| `preserveAlpha:Boolean` (default = `true`)`` — A value of `false` indicates that the alpha value is not preserved and that the convolution applies to all channels, including the alpha channel. A value of `true` indicates that the convolution applies only to the color channels. The default value is `true`.
| `clamp:Boolean` (default = `true`)`` — For pixels that are off the source image, a value of `true` indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image. A value of `false` indicates that another color should be used, as specified in the `color` and `alpha` properties. The default is `true`.
| `color:uint` (default = `0`)`` — The hexadecimal color to substitute for pixels that are off the source image.
| `alpha:Number` (default = `0.0`)`` — The alpha of the substitute color.

Method Detail

### clone

()
method

`override public function clone():BitmapFilter`

Language Version: | ActionScript 3.0

Runtime Versions: | AIR 1.0, Flash Player 9

Returns a copy of this filter object.

Returns

| `BitmapFilter` — BitmapFilter A new ConvolutionFilter instance with all the same properties as the original ConvolutionMatrixFilter instance.

Examples How to use this example
ConvolutionFilterExample.as
The following example applies different convolution filters to an image file. The filter constructor calls `buildChild()` four times to load and display four instances of the image. Each call to `buildChild()` takes as an argument a function that applies no filter to the first instance and a different convolution filter to each subsequent instance.

The `buildChild()` function creates a new Loader object named `loader`. For each call to `buildChild()`, attach an event listener to the Loader object to listen for `complete` events, which are handled by the function passed to `buildChild()`.

The `applyBrightness()`, `applySharpness()`, and `applyOutline()` functions use different values for the `matrix` array to achieve different ConvolutionFilter effects.

Note: For best results, use an image approximately 80 pixels in width. The name and location of the image file should match the value you pass to the `url` property. For example, the value passed to `url` in the example points to an image file named "Image.jpg" that is in the same directory as your SWF file.

Copy

    package {
        import flash.display.DisplayObject;
        import flash.display.Loader;
        import flash.display.Sprite;
        import flash.events.*;
        import flash.filters.BitmapFilter;
        import flash.filters.ConvolutionFilter;
        import flash.net.URLRequest;
        import flash.text.TextField;
        import flash.text.TextFieldAutoSize;

        public class ConvolutionFilterExample extends Sprite {
            private var size:uint = 140;
            private var url:String = "Image.jpg";

            public function ConvolutionFilterExample() {
                buildChild(applyNothing);
                buildChild(applyBrightness);
                buildChild(applySharpness);
                buildChild(applyOutline);
            }

            private function buildChild(loadHandler:Function):void {
                var loader:Loader = new Loader();
                loader.x = numChildren * size;
                loader.y = size;
                loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
                if(loadHandler != null) {
                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadHandler);
                }

                var request:URLRequest = new URLRequest(url);
                loader.load(request);
                addChild(loader);
            }

            private function applyNothing(event:Event):void {
                var child:DisplayObject = DisplayObject(event.target.loader);
                applyLabel(child, "no filter");
            }

            private function applyBrightness(event:Event):void {
                var child:DisplayObject = DisplayObject(event.target.loader);
                var matrix:Array = [5, 5, 5,
                                    5, 0, 5,
                                    5, 5, 5];
                applyFilter(child, matrix);
                applyLabel(child, "brightness");
            }

            private function applySharpness(event:Event):void {
                var child:DisplayObject = DisplayObject(event.target.loader);
                var matrix:Array = [0, -1, 0,
                                   -1, 20, -1,
                                    0, -1, 0];
                applyFilter(child, matrix);
                applyLabel(child, "sharpness");
            }

            private function applyOutline(event:Event):void {
                var child:DisplayObject = DisplayObject(event.target.loader);
                var matrix:Array = [-30, 30, 0,
                                    -30, 30, 0,
                                    -30, 30, 0];
                applyFilter(child, matrix);
                applyLabel(child, "outline");
            }

            private function applyFilter(child:DisplayObject, matrix:Array):void {
                var matrixX:Number = 3;
                var matrixY:Number = 3;
                var divisor:Number = 9;
                var filter:BitmapFilter = new ConvolutionFilter(matrixX, matrixY, matrix, divisor);
                var filters:Array = new Array();
                filters.push(filter);
                child.filters = filters;
            }

            private function applyLabel(child:DisplayObject, label:String):void {
                var tf:TextField = new TextField();
                tf.x = child.x;
                tf.y = child.height;
                tf.autoSize = TextFieldAutoSize.LEFT;
                tf.text = label;
                addChild(tf);
            }

            private function ioErrorHandler(event:IOErrorEvent):void {
                trace("Unable to load image: " + url);
            }
        }
    }

© 2015 Adobe Systems Incorporated. All rights reserved.
Mon Apr 10 2017, 12:28 PM -07:00