Applying effects to an image with Flex Convolution

Like the ColorMatrixFilter, the ConvolutionFilter also uses a matrix to change the image but in this case the matrix can be any size. There are a number of factors that affect performance and they are outlined in the Flex documentation. The most common matrix you will use is a 3x3 matrix. Applying effects is basically the same as applying color effects - you create a filter and add it to the filters array of the display object. Here is the example shows three effects: emboss, sharpen and edge detection.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 creationComplete="transformImage()"   verticalScrollPolicy="off" horizontalScrollPolicy="off">
 <mx:Script>
  <![CDATA[
 

    [Bindable]
    [Embed(source="images/demo.jpg")]
    private var demoImage:Class;
  

   private function transformImage():void
   {
    var emboss:ConvolutionFilter = new ConvolutionFilter(3, 3, [-2, -1, 0, -1, 1, 1, 0, 1, 2]);
    embossImage.filters = [emboss];            
    var sharpen:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, -1, 0, -1, 5, -1, 0, -1, 0]);
    sharpenImage.filters = [sharpen];
    var edge:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, -1, 0, -1, 4, -1, 0, -1, 0]);
    EdgeImage.filters = [edge];
   }
 

  
  ]]>
 </mx:Script>
 
 <mx:HBox width="800" height="300">
  <mx:VBox>
    <mx:Label text="Original Image"/>
    <mx:Image source="{demoImage}" width="160" height="120"/>
  </mx:VBox>
  <mx:VBox>
   <mx:Label text="emboss"/>
   <mx:Image id="embossImage" source="{demoImage}" width="160" height="120"/>
  </mx:VBox>
  <mx:VBox>
   <mx:Label text="sharpen"/>
   <mx:Image id="sharpenImage" source="{demoImage}" width="160" height="120"/>
  </mx:VBox>
  <mx:VBox>
   <mx:Label text="Edge Detection"/>
   <mx:Image id="EdgeImage" source="{demoImage}" width="160" height="120"/>
  </mx:VBox>
 </mx:HBox>
 
</mx:Application>