Pixel Blender Tutorial : Using Pixel Blender in Flex

Pixel Blender Toolkit is a new graphics programming language being developed by Adobe. Pixel Blender Toolkit can be used to create Pixel Blender filters and effects. You can find a lot of sample filters in the Gallery in Adobe Labs and in the Pixel Blender Exchange.  The Pixel Blender reference(which is in the docs folder inside your Pixel Blender Toolkit Folder with the name “PixelBenderLanguage10“) explains the basics of the language. Start the Adobe Pixel Blender Toolkit and click on “Create a new Filter” button. You’ll see that a small program is automatically generated. Type the following code and save it with any filename.

 
<languageVersion : 1.0;>

kernel RGBAEdit <
    namespace : "My Filters";
    vendor : "Pradeek";
    version : 1;
    description : "Editing RGBA values of an image";
>
{
 input image4 image;
 parameter float4 color
 <
        minValue:float4(0, 0, 0, 0);
        maxValue:float4(1, 1, 1, 1);
        defaultValue:float4(1, 1, 0, 1);
 >;
 output pixel4 result;

    void evaluatePixel()
    {
     result = sampleNearest(image,outCoord());
     result *= color;
    }
}

Press Run. You will be prompted to load a image. Load it and run. You will see the image and the parameters on the side with which you can change the red,blue,green colors and the alpha of the image.Click File and “Export Kernel Filter for Flash Player“. This creates a Pixel Blender Byte Code file (.pbj file) which we can use in flex.

Now, create a Flex project and create a folder named assets inside the src folder and copy paste the .pbj file that you generated and a sample image into the assets folder. Now type in the following code in your mxml file. I have named the byte code file as RBGAEdit.pbj and the sample image file as test.png.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:gumbo="library:adobe/flex/gumbo" xmlns:mx="library:adobe/flex/halo" applicationComplete="init()">

    <Script>
        <![CDATA[
        
        import flash.display.*;
        import flash.filters.ShaderFilter;
        
        private var shader:Shader;
        private var shaderFilter:ShaderFilter;
        
        [Embed(source="assets/RGBAEdit.pbj", mimeType="application/octet-stream")]
        private var ImgFilter:Class;
        
        private function init():void
        {
         shader = new Shader(new ImgFilter());
         shaderFilter = new ShaderFilter(shader);
         img.filters = [shaderFilter];
        }
        
        ]]>
    </Script>
    
    <mx:Image id="img" source="@Embed('assets/test.png')"/>

</Application>

This is just a basic usage of the Pixel Blender Toolkit. You can use it as

• a filter (ShaderFilter)


• a blend mode


• a fill and


• a number cruncher

Happy experimenting :D