Encapsulating Custom Pixel Bender Filters in ActionScript 3
If you read my blog regularly (or just today) you should have noticed that I have been playing around with some Pixel Bender filters and ActionScript / Flex (all inspired by Lee Brimelow`s video screencast on creating and using Pixel Bender filters in Flash Player 10.)
Previously, I posted some code showing how to embed a custom Pixel Bender filter within a SWF and then apply the filter to an image. That works well, but the code is not that reusable since the filter loading code is mixed in with the main code.
Below is a simple example that shows how to encapsulate a custom filter inside of an ActionScript 3 class, which you can then use and re-use like any other built in filter.
Document Class : PBFilter.as
package
{
import flash.display.Bitmap;
import flash.display.Sprite;
// SWF Metadata
[SWF(width="600", height="400", backgroundColor="#000000", framerate="30")]
public class PBFilter extends Sprite
{
//The image to display the filter on
[Embed(source="image.jpg")]
private var image:Class;
private var im:Bitmap;
public function PBFilter():void
{
im = new image() as Bitmap;
addChild(im);
var filter:TestFilter = new TestFilter();
filter.value = 30;
//add the filter to the image
im.filters = [filter];
}
}
}
Filter Class : TestFilter.as
package
{
import flash.display.Shader;
import flash.filters.ShaderFilter;
import flash.utils.ByteArray;
public class TestFilter extends ShaderFilter
{
//the file that contains the binary bytes of the PixelBender filter
[Embed("testfilter.pbj", mimeType="application/octet-stream")]
private var Filter:Class;
private var _shader:Shader;
public function TestFilter(value:Number = 50)
{
//initialize the ShaderFilter with the PixelBender filter we
//embedded
_shader = new Shader(new Filter() as ByteArray);
//set the default value
this.value = value;
super(_shader);
}
//This filter only has one value, named value
public function get value():Number
{
return _shader.data.amount.value[];
}
public function set value(value:Number):void
{
//not that pixel bender filters take an array of values, even
//though we only have one in our example
_shader.data.amount.value = [value];
}
}
}
Compiled using the Flex 3.1.0.2710 SDK (although it does not use the Flex Framework), and requires Flash Player 10.
You would of course, have to add the appropriate getters and setters depending on the values your custom Pixel Bender filter accepts.
Using this technique, you could then create a SWC (distributable ActionScript library) to package your custom filter(s) and re-use them in MXMLC, Flex Builder and / or Flash Authoring.
You can see an example of the filter here.
You can find more information on Pixel Bender here.
You can download the filter from here.
