Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Flash CS4 and Pixel Bender Overview

Flash CS4 and Pixel Bender Overview

Learn how to work with Pixel Bender created filters in the all new Adobe Flash CS4.

View an Example of this article before you get started.

As you know CS4 was announced recently and packs a pretty substantial list of features, but Adobe is equally impressing developers on the Adobe Labs. One of the newer additions is Pixel Bender. Pixel Bender is essentially a toolkit that is used to develop filters. These filters can be used in Flash 10 and After Effects and allow everyday people to create some very interesting filters.

The running of the filter in Flash is pretty much identical to an included filter, like the BlurFilter or DropShadowFilter.

I don't intend to teach you Pixel Bender in depth with this example, its basically just showing a really simple example and the code used to create it. At the moment the only way to develop the final SWF is to use the Flex SDK with Flash Player 10 support added in. The purpose of this tutorial is to show the creation process using Flash CS4, so you will be ready to roll once its released.

Image with Pixel Bender filter applied

Start by opening the Pixel Bender Toolkit, which can be obtained on the Adobe labs.

Pixel Bender toolkit

Create your kernel script by simply copying and pasting the code provided here into the code window of the Pixel Bender toolkit.

<languageVersion : 1.0;>

kernel SampleFilter
<   namespace : "com.mkeefedesign";
    vendor : "Matthew Keefe";
    version : 1;
    description : "SampleFilter";
>
{
    input image4 src;
    output pixel4 dst;

    parameter float red
    <
        minValue:1.0;
        maxValue:15.0;
        defaultValue:1.0;
    >;
    parameter float green
    <
        minValue:1.0;
        maxValue:15.0;
        defaultValue:1.0;
    >;
    parameter float blue
    <
        minValue:1.0;
        maxValue:15.0;
        defaultValue:1.0;
    >;

    void
    evaluatePixel()
    {
        pixel4 p = sampleNearest(src,outCoord());
        p.r *= red;
        p.g *= green;
        p.b *= blue;
        dst = p;
    }
}

Then export the filter File > Export Kernel Filter for Flash Player and save the .pdk file on you desktop.

Now Open Flash and create a new ActionScript 3 document. Save the new Flash document to your desktop, where you saved the filter file. Once the file is saved import an image that you will apply the filter to.

Importing an image into Flash CS4

Create a new MovieClip Insert > New Symbol... name the instance, choose a Type of MovieClip, make sure "Export for ActionScript" is checked and provide a Class name of SampleImage. Click OK to create the blank instance, and once that is open, drag the image you imported to the stage.

In the properties panel, choose x,y coordinates of 0,0 and close the instance.

Now open the Actions panel (F9) to begin writing the code.

Action panel in Flash CS4

The first part of the code is defining some variables to be used later on. The only two that may look new are Shader and ShaderFilter. These are new to Flash Player 10 and are the classes responsible for handling the Pixel Bender filter data.

var loader:URLLoader;
var shader:Shader;
var shaderFilter:ShaderFilter;
var image:MovieClip;
var timer:Timer;
var timerInt:uint = 40;

The next step in the code is to load the image to the stage, that you added in the previous steps.

image = new SampleImage();
image.y = 20;
image.x = 25;

addChild(image);

The first two methods to be created are for loading the pbj file and initializing the filter creation process

function startEffect()
{
	loader = new URLLoader();
	loader.dataFormat = URLLoaderDataFormat.BINARY;
	loader.addEventListener(Event.COMPLETE, loadComplete);
	loader.load(new URLRequest("sample.pbj"));
}

function loadComplete(e:Event):void
{
	shader = new Shader(loader.data);
	initFilter();
}

The next function initFilter() is called once the pbj file is successfully loaded, so the filter can be created. This filter sets the r,g, b color values of the image, which essentially blows the detail from the image. The "shader.data.red.value" for example is referencing the pixel bender code that was written at the beginning, if you notice that code has a "parameter float red" which is a float variable to set the level of red. In this case the value is being set to 20. This process is repeated for the other 2 colors, and then is passed to the image instance.

The last part of this function sets up the timer that will run to apply this filter until the image returns to its normal look

function initFilter()
{
	shader.data.red.value = [20];
	shader.data.green.value = [20];
	shader.data.blue.value = [20];
	shaderFilter = new ShaderFilter(shader);
	image.filters = [shaderFilter];

	timer = new Timer(timerInt, 0);
	timer.addEventListener(TimerEvent.TIMER, timerHit);
	timer.start();
}	

The final function repeats the process of applying the filter, but first grabs the current filter values and subtracts 0.1 from the value on each pass. This process slowly removes the filter intensity from the image until it is completely gone. This timerHit() function is called from the timer that was created in the initFilter() function.

function timerHit(e:TimerEvent):void
{
	if(shader.data.red.value == 1)
	{
		timer.stop();
		return;
	}

	var r:uint = shader.data.red.value   - 0.1;
	var g:uint = shader.data.green.value - 0.1;
	var b:uint = shader.data.blue.value  - 0.1;

	shader.data.red.value = 	[r];
	shader.data.green.value =	[g];
	shader.data.blue.value =	[b];
	shaderFilter = new ShaderFilter(shader);
	image.filters = [shaderFilter];	
}	

The last step in the code is to start the process, which in this application is done by calling the startEffect() function, so that is what we will do

startEffect();	

Now if you test out this application you should see the image being displayed on the stage, the filter applied to that image and it should slowly disappear until the filter is completely gone.

I hope you enjoyed this tutorial on using Pixel Bender filters in Flash CS4, stay with Scriptplayground as we will be covering much more of CS4 in the coming tutorials and articles.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Flash CS4 and Pixel Bender Overview

 travis  Mon Oct 6, 2008 11:29 am  
Nice article there. The flash example is not working in FireFox for some reason, it shows "Pixel Blender RGB Fade", but the restart button flashes and goes wild lol
 mkeefe  Mon Oct 6, 2008 11:45 am  
@travis - The "flashing" is when Flash Player encounters an error. Are you using Flash Player 10? That is a requirement, and would obviously be shipping with CS4.

Glad you liked the article.
 SDub  Thu May 7, 2009 10:35 am  
http://xuroq.co.uk does something similar like this if you want to download it
 Vadim  Wed Jan 26, 2011 1:23 am  
Did you try to use adding instead of multiplying? Filter will be less sharp.
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles