My first very simple Pixelbender script

Everybody is now talking about Flash 10 player and its possibilities. One of the new classes is the Shader class, which allows pixelbender scripts to be executed in Flash. You can download the Pixelbender toolkit here. To see a simple filter working click on the image below.

The pbk script

After reading the tutorial, of which I have digested only a small part I have to admit I tried out writing some simple script, which is shown below. What it does is changing the brightness of a bitmap. The script contains one parameter, which can be used in Flash, the brNess parameter. Changing it will alter the brightness of a bitmap, something often asked in forums.

          <languageVersion : 1.0;>

kernel ChangeBright
<   namespace : "Flashscript.biz";
    vendor : "";
    version : 1;
    description : "Brightness";
>
{
    input image4 src; 
    output float4 dst; 
        
    parameter float brNess
    <
        minValue: float(0.1);
        maxValue: float(2);
        defaultValue: float(0.4);
    >;
        
    void evaluatePixel() 
    {
        float b=sin(-3.5)/brNess;
        dst = sample( src, outCoord() )/b; 
    } 
} 
	

The Flash script

We now need to incorporate this script in Flash. below the script is shown with comments, so I don't further comment here.

	/****************************************************
BrightImg class: testing the brightness pixelbender filter.
Flashscript.biz
/****************************************************/
package 
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	[SWF(width="300",height="200",backgroundColor="0xBDC6DE",frameRate="24")]
	public class BrightImg extends Sprite
	{
		private static  var bitmap:Bitmap;
		private static  var shader:Shader;
		private static  var shaderLoader:URLLoader;
		private static  var count:Number;
		public function BrightImg ():void
		{
	/*
/ loading the image
*/
			var myLoader:Loader=new Loader  ;
			myLoader.contentLoaderInfo.addEventListener (Event.COMPLETE,loaded);
			myLoader.load (new URLRequest("libs/people.jpg"));
			addChild (myLoader);
	/*
/ we initiate the filter by clicking on the movie.
*/
			stage.addEventListener (MouseEvent.CLICK,clickHandler);
			function clickHandler (event:MouseEvent):void
			{
	/*
/ we create a new shader object and load the pixelbender script.
*/
				shader=new Shader  ;
				shaderLoader=new URLLoader  ;
				shaderLoader.dataFormat=URLLoaderDataFormat.BINARY;
				shaderLoader.addEventListener (Event.COMPLETE,onCompleteHandler);
				shaderLoader.load (new URLRequest("brightness.pbj"));
			}
		}
	/*
/ when the image is loaded we declare a bitmap variable of type Bitmap.
*/
		private function loaded (event:Event):void
		{
			bitmap=event.currentTarget.content  as  Bitmap;
		}
		private function onCompleteHandler (event:Event):void
		{
	/*
/ we need to make the original image invisible, since the new images are drawn 
/ underneath the loaded image.
*/
			bitmap.visible=false;
	/*
/ we set the default value for brNess from the pbk script, which will show the
/ unaltered image.
*/
			count=0.4;
	/*
/ now we can input the data from the pbj file by using shader.data
/ followed by the variable for the image, src (see pbk file), and by input. We
/ set this equal to the bitmapData of the bitmap.
*/
			try
			{
				shader.byteCode=event.currentTarget.data;
				shader.data.src.input=bitmap.bitmapData;
				addEventListener (Event.ENTER_FRAME,makeBright);
			}
			catch (e:Error)
			{
				trace (e);
			}
		}
		private function makeBright (event:Event):void
		{
	/*
/ we increment count to change the brNess value from the pbk script. This variable determines
/ the brightness value.
*/
			count=count + 0.02;
			shader.data.brNess.value=[count];
	/*
/ when we reach a desired brightness we stop and set it back to the default value.
*/
			if (count >= 2.0)
			{
				count=0.4;
				shader.data.brNess.value=[count];
				removeEventListener (Event.ENTER_FRAME,makeBright);
			}
	/* 
/ we need to constantly create a new image including the changes.
*/
			graphics.clear ();
			graphics.beginShaderFill (shader);
			graphics.drawRect (0,0,300,200);

		}
	}
}
	

And this concludes the tutorial.

Mail Form

Leave any comments here. Please enter a valid email.