Embedding Pixel Bender Filters within a SWF
I was just watching Lee Brimelow’s excellent video introductions to creating and using Pixel Bender filters in Flash Player 10.
In his second video, he shows how to use a custom Pixel Bender filter within Flash Player 10. One issue that Lee had was that you have to load the filter at runtime in order to use it.
I have modified Lee’s example to allow the filter to be embedded within the SWF, and not require it to be dynamically loaded at runtime.
package
{
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.net.*;
import flash.utils.ByteArray;
// SWF Metadata
[SWF(width="600", height="400", backgroundColor="#000000", framerate="30")]
public class PB extends Sprite
{
//the file that contains the binary bytes of the PixelBender filter
[Embed("testfilter.pbj", mimeType="application/octet-stream")]
private var TestFilter:Class;
//The image to display the filter on
[Embed(source="image.jpg")]
private var image:Class;
private var im:Bitmap;
public function PB():void
{
im = new image() as Bitmap;
addChild(im);
//Pass the loaded filter to the Shader as a ByteArray
var shader:Shader = new Shader(new TestFilter() as ByteArray);
shader.data.amount.value = [100];
var filter:ShaderFilter = new ShaderFilter(shader);
//add the filter to the image
im.filters = [filter];
}
}
}
Check out the Flex Cookbook for some good information on How to embed any type of data within a SWF.
Make sure to check out Lee’s video tutorial on using Pixel Bender filters in Flash Player 10.
You can see an example of the filter here.
You can find more information on Pixel Bender on Labs.
[...] up on my earlier post on how to embed Pixel Bender filters within a SWF, here is a super simple example that show how to use a Pixel Bender filter within a Flex [...]
Using Pixel Bender Filters within Flex at Mike Chambers
8 Sep 08 at 1:26 pm
[...] 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 [...]
Encapsulating Custom Pixel Bender Filters in ActionScript 3 at Mike Chambers
8 Sep 08 at 2:30 pm
This is a great idea. It does make you wonder if Adobe could have simplified the work-flow a little here.
While it could be useful to have these reusable “pbj” nuggets, in some ways it would have been a lot simpler to bundle that whole process into the compiler (in a similar way to mxml getting converted into AS3 at compile time).
Noel
8 Sep 08 at 3:18 pm
@noel
Yeah, we will be doing more work on this in the tools and Flex 4, so stay tuned.
mike chambers
mesh@adobe.com
mikechambers
8 Sep 08 at 3:50 pm
Hi, I made a post on how to access the parameters in a Pixel Blender Filter in Flex, a couple of weeks ago.You can see it here.
http://pradeekonflex.wordpress.com/2008/08/14/dynamically-changing-pixel-blender-data-at-runtime/
Pradeek
9 Sep 08 at 4:39 am
[...] Embedding Pixel Bender Filters within a SWF (from Mike Chambers) [...]
Flex Monkey Patches » Blog Archive » Rubbernecker’s Review - Week 11
9 Sep 08 at 10:30 am
[...] Embedding Pixel Bender Filters within a SWF [...]
localToGlobal » Blog Archive » news review -> 37th week of 2008
12 Sep 08 at 2:24 am
[...] work with Pixel Bender filters in Flash, Flex and ActionScript. 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 [...]
Creating Re-distributable ActionScript Libraries of Pixel Bender Filters at Mike Chambers
17 Sep 08 at 12:43 pm
Nice one Mike!
I was having a problem with loading the filter when I uploaded it to the webserver – it wasn’t loading in even though it was in the same directory as the .swf
I have been through Lee’s excellent demo of Pixel Bender, and yes indeed I find it really slow:
I have animated Lees blur filter demo with the code below, it is set to only update twice per second and yet after running for only a short while it slows down even further… Any ideas why?
Nice work Mike!
P.S This is compiling in Flash CS4 and so not wrapped in a package – which I think is right?
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.net.*;
import flash.utils.ByteArray;
// SWF Metadata
[SWF(width="1024", height="424", backgroundColor="#000000", framerate="2")]
//the file that contains the binary bytes of the PixelBender filter
[Embed("blur1.pbj", mimeType="application/octet-stream")]
var TestFilter:Class;
//The image to display the filter on
[Embed(source="image.jpg")]
var image:Class;
var im:Bitmap;
var a=0;
var inout=0;
addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event):void
{
PB();
}
function PB():void
{
im = new image() as Bitmap;
addChild(im);
//Pass the loaded filter to the Shader as a ByteArray
var shader:Shader = new Shader(new TestFilter() as ByteArray);
shader.data.amount.value = [a];
var filter:ShaderFilter = new ShaderFilter(shader);
//add the filter to the image
im.filters = [filter];
if (inout ==0)
{
a = a+1;
if (a>10)
{
inout =1;
}
}
else
{
a = a-1;
if (a<0)
{
inout =0;
}
}
}
Stan
9 Nov 08 at 9:23 am
Great stuff. This and the file reference tutorial were really helpful for getting me up and going in a hurry with the 2 things I really was interested in. I built out a little class to save classes that can wrap .pbj files using both of them: http://blog.pixelrevision.com/actionscript/pixelbender-and-file-creation
pixelrevision
5 Dec 08 at 4:26 pm
Great information. Some details for people who are new to Flash 10 and/or are developing without Flex Builder. 1) to embed the pixel bender file, you have to have flex sdk installed (which is probably the best choice). It will tell you this when you try to compile and it can be downloaded from Adobe labs. 2) At first, the compiler couldn’t find the Shader and ShaderFilter classes. I realized that my Publish settings needed to be changed to Flash 10 (it was on 9).
Bob Brodie
9 Mar 09 at 8:54 pm