BendPixels: use PixelBender filters as Flex Effects

This was *brand new runtimes* week in RIA land, Silverlight 2 released on Tuesday, Flash Player 10 released on Wednesday. And, now that FP10 is out, I’m guessing a new version of AIR that embeds it should not be very far along.

One of my favorite new features in Flash Player 10 is the ability to use PixelBender to create filters that can be applied to objects inside of Flash Player. As I was watching Lee Brimelow’s very helpful PixelBender tutorials I thought it would be cool to use these filters as Flex Effects. So I wrote a custom Flex effect called BendPixels, this effect can be used with a PixelBender filter to animate properties of the filter and very quickly the whole thing turned into library of Flex effects. I’m releasing the BendPixels effect along with many specialized effects as an open source library on Google Code

• Example (Flash Player 10 required)
• Google Code page
• BendPixels.swc

The base BendPixels effect can be used as follows:

<effects :BendPixels 
	benderFileURL="[URL of .pbj file]"
	benderParams="[
			['property1',startValue1, endValue1],
			['property2',startValue2, endValue2],
			['property3',startValue3, endValue3],
 
		      ]"
	/>

• benderFileURL is the url of the PixelBender binary (.pbj)
• benderParams is a multi-dimentional array which contains arrays of type [propertyname, startval, endval]

The above syntax loads the pbj at runtime, that’s not the best approach if the pbj file is bigger than a few kb, in that case it would be best to embed the filter binary into the swf and use the benderByteArray property of the effect

[Embed("filter.pbj", mimeType="application/octet-stream")]
private var Filter:Class;
 
...
 
 
<effects :BendPixels 
	benderFileURL="{new Filter() as ByteArray}"
	benderParams="[
			['property1',startValue1, endValue1],
			['property2',startValue2, endValue2],
			['property3',startValue3, endValue3],
 
		      ]"
	/>

Some PixelBender input properties can be of type float2, float3, float4 etc. which means that they require an array as input, in which case you can use arrays to specify start and end values.

<effects :BendPixels 
	benderFileURL="[URL of .pbj file]"
	benderParams="[
			['property1',[s1,s2], [e1,e2]],
			['property2',startValue2, endValue2],
			['property3',startValue3, endValue3],
 
		      ]"
	/>

While the general BendPixels effect is great, the benderParams property is a little verbose, so I thought it would be better to have specialized effects for various commonly used filters .. I’ve implemented effects for some of the filters freely available on Adobe’s PixelBender Exchange

The library currently includes:

* SmudgeEffect based on Frank Reitberger’s Smudge Filter
* TintEffect based on Allen Chou’s Tint Filter
* SliceEffect based on Frank Reitberger’s Slicer Filter
* RippleBlocksEffect based on Allen Chou’s RippleBlocks Filter
* ColorQuantizationEffect based on Eduardo Costa Color Quantization Filter

Thank you to all these people for open sourcing their filters. Check out this example to see what the effects look like.

All these specialized effects and even the BendPixels effect can be used just like other flex effects, they can have a target, can be played with play method, can be used in state transitions, can have easing functions etc.

	<smudge :SmudgeEffect id="smudgerEffect" 
		fromAmount="0" toAmount="1" 
		duration="1000"/>
 
	<tint :TintEffect id="bwTintEffect"
		fromAmount="0" toAmount="1" 
		duration="1000"/>	
 
	<tint :TintEffect id="blueTintEffect"
		fromAmount="0" toAmount="1" 
		fromBlue="0" toBlue="0.5"
		duration="1000"/>	
 
	<rippleblocks :RippleBlocksEffect id="rbEffect"
		fromXAmplitude="0" toXAmplitude="100"
		fromYAmplitude="0" toYAmplitude="100"
		duration="1000"/>
 
	<!-- Note: this uses an easing function -->	
	<colorquantization :ColorQuantizationEffect id="cqEffect"
		fromPalette="64" toPalette="3"
		duration="1000" easingFunction="{Exponential.easeOut}"/>
 
	<slice :SliceEffect id="sliceEffect"
		fromAmount="0" toAmount="20"
		duration="1000"/>

It is very easy to extend the BendPixels class and add your own specialized effects, I will write another post on how to do that, meanwhile check out the library and let me know if you have any feedback. Also, If you have any thoughts on how the library can be improved, I would love to know.