Flex 3 Cookbook: Chapter 8, Images, Bitmaps, Videos, Sounds
Pages: 1, 2, 3, 4, 5, 6, 7, 8

Its parameters are as follows:

sourceBitmapData:BitmapData

The input bitmap image to use. The source image can be a different BitmapData object or the current BitmapData object.

sourceRect:Rectangle

A rectangle that defines the area of the source image to use as input.

destPoint:Point

The point within the destination image (the current BitmapData instance) that corresponds to the upper-left corner of the source rectangle.

redMultiplier:uint

A hexadecimal uint value by which to multiply the red channel value.

greenMultiplier:uint

A hexadecimal uint value by which to multiply the green channel value.

blueMultiplier:uint

A hexadecimal uint value by which to multiply the blue channel value.

alphaMultiplier:uint

A hexadecimal uint value by which to multiply the alpha transparency value.

A complete code listing follows with modifiable controls to alter the values of the ColorTransform:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="550" 
creationComplete="imgMod()">
    <mx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;
            import mx.controls.Image;


            [Embed(source="../assets/bigshakey.png")]
            private var shakey:Class;

            [Embed(source="../assets/mao.jpg")]
            private var mao:Class;

            //superimpose the two images together
            //using the vslider data
            private function imgMod():void
            {
                var maoData:BitmapData = new BitmapData(firstImg.width, 
firstImg.height);
                var shakeyData:BitmapData = new BitmapData(secondImg.width, 
secondImg.height);
                maoData.draw(firstImg);
                shakeyData.draw(secondImg);
                maoData.colorTransform(new Rectangle(0, 0, maoData.width, 
maoData.height), new ColorTransform(redSlider.value/10, greenSlider.value/10,
blueSlider.value/10,alphaSlider.value/10));
                var red:uint = (uint(redSlider.value.toString(16)) / 10) * 160;
                var green:uint = (uint(greenSlider.value.toString(16)) / 10) * 160;
                var blue:uint = (uint(blueSlider.value.toString(16)) / 10) * 160;
                var alpha:uint = (uint(alphaSlider.value.toString(16)) / 10) * 160;
                shakeyData.merge(maoData, new Rectangle(0, 0, shakeyData.width, 
shakeyData.height), new Point(0, 0), red, green, blue, alpha);
                mainImg.source = new BitmapAsset(shakeyData);
            }

        ]]>
    </mx:Script>
    <mx:HBox>
        <mx:Image id="firstImg" source="{mao}" height="200" width="200"/>
        <mx:Image id="secondImg" source="{shakey}" height="200" width="200"/>
    </mx:HBox>
    <mx:HBox>
        <mx:Text text="Red"/>
        <mx:VSlider height="100" id="redSlider" value="5.0" change="imgMod()"/>
        <mx:Text text="Blue"/>
        <mx:VSlider height="100" id="blueSlider" value="5.0" change="imgMod()"/>
        <mx:Text text="Green"/>
        <mx:VSlider height="100" id="greenSlider" value="5.0" change="imgMod()"/>
        <mx:Text text="Alpha"/>
        <mx:VSlider height="100" id="alphaSlider" value="5.0" change="imgMod()"/>
    </mx:HBox>
    <mx:Image id="mainImg"/>
</mx:VBox>

Section 8.6: Apply a Convolution Filter to an Image

Problem

You want to allow users to alter the colors, contrast, or sharpness of an image.

Solution

Create an instance of a ConvolutionFilter and bind the properties of the matrix within the ConvolutionFilter to text inputs that the user can alter. Then push the filter onto the image's filters array to apply the filter.

This excerpt is from Flex 3 Cookbook. This highly practical book contains more than 300 proven recipes for developing interactive Rich Internet Applications and Web 2.0 sites. You'll find everything from Flex basics and working with menus and controls, to methods for compiling, deploying, and configuring Flex applications. Each recipe features a discussion of how and why it works, and many of them offer sample code that you can put to use immediately.

Discussion

ConvolutionFilter is one of the most versatile and complex filters in the package. It can be used to emboss, detect edges, sharpen, blur, and perform many other effects. All the parameters are controlled by a Matrix object representing a three-by-three matrix that is passed to the filter in its constructor. The ConvolutionFilter conceptually goes through each pixel in the source image one by one and determines the final color of that pixel by using the value of the pixel and its surrounding pixels. A matrix, specified as an array of numeric values, indicates to what degree the value of each particular neighboring pixel affects the final resulting value. The constructor is shown here:

ConvolutionFilter(matrixX:Number = 0, matrixY:Number = 0, matrix:Array = null, 
divisor:Number = 1.0, bias:Number = 0.0, preserveAlpha:Boolean = true,
clamp:Boolean = true, co
lor:uint = 0, alpha:Number = 0.0)

Its parameters are as follows:

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

Some common effects for the ConvolutionFilter are as follows:

new ConvolutionFilter(3,3,new Array(-5,0,1,1,-2,3,-1,2,1),1)

Creates an edge-detected image, where only areas of greatest contrast remain.

new ConvolutionFilter(3,3,new Array(0,20,0,20,-80,20,0,20,0),10)

Creates a black-and-white outline.

new ConvolutionFilter(5,5,new Array(0,1,2,1,0,1,2,4,2,1,2,4,8,4,2,1,2,4,2, 1,0,1,2,1,0),50);

Creates a blur effect.

new ConvolutionFilter(3,3,new Array(-2,-1,0,-1,1,1,0,1,2),0);

Creates an emboss effect.