Using Custom Pixel Bender Filter Classes in MXML
Ok. Last post on Pixel Bender for today (I promise). This one is simple, but ties together my previous posts.
Now, that we know how to load and use Pixel Bender filters in Flex, and know how encapsulte Pixel Bender filters in an ActionScript class, lets combine the two to leverage custom Pixel Bender filters in MXML.
First, again, we need our custom Pixel Bender class:
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];
}
}
}
Once we have defined that, we can then treat the class like any other filter, and use it directly within MXML, like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:local="*"
>
<mx:Image left="10" top="10" width="375" height="500" source="@Embed(source='image.jpg')">
<mx:filters>
<local:TestFilter value="25" />
</mx:filters>
</mx:Image>
</mx:Application>
Note that the local namespace maps to the package that contains our custom filter (in this case, the root package).
Compiled using the Flex 3.1.0.2710 SDK, and requires Flash Player 10. The Flex team is working on making this workflow even easier for Flex 4, so keep an eye on the Flex 4 project page.
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
Nice one.
In this example you set ‘value’ in the MXML implicitly by using the setter. This way you could actually remove the not so nice violation of the interface specification in your constructor. Note, that you offer a Number parameter in your constructor, whereas your base class, the ShaderFilter, offers a Shader. If someone now would want to code against the generic ShaderFilter and use your concrete filter class, he couldn’t use the constructors value argument, because it is not specified in ShaderFilter, so it is better to offer ‘value’ via setter/getter, as your are using it in the MXML anyway.
Sven
9 Sep 08 at 12:20 am
I just posted an example of Pixel Bender filters being applied to a live web cam video stream.
http://blog.everythingflex.com/2008/09/09/pixel-bender-live/
Rich Tretola
9 Sep 08 at 10:18 am
[...] Using Custom Pixel Bender Filter Classes in MXML [...]
localToGlobal » Blog Archive » news review -> 37th week of 2008
12 Sep 08 at 2:10 am