Mike Chambers

code = joy

Encapsulating Custom Pixel Bender Filters in ActionScript 3

with 4 comments

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[0];
		}

		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.

Written by mikechambers

September 8th, 2008 at 2:30 pm

Posted in General

Tagged with ,

4 Responses to 'Encapsulating Custom Pixel Bender Filters in ActionScript 3'

Subscribe to comments with RSS or TrackBack to 'Encapsulating Custom Pixel Bender Filters in ActionScript 3'.

  1. [...] Encapsulating Custom Pixel Bender Filters in ActionScript 3 [...]

  2. [...] In particular, I wrote about how to embed pixel bender filters within a SWF and how to encapsulate custom Pixel Bender filters in an ActionScript 3 class. For this post, I am going to take the next step, and show how to create re-distributable SWC [...]

  3. hey, the filter link isn’t working?!

    noob

    26 Sep 08 at 6:21 am

Leave a Reply