Loading Pixel Bender Filters in Flash 10
Below is some bare-bones code that shows you how you can load in Pixel Bender filters at runtime. This example uses the new ability to load local files into the player but you could just as easily use URLLoader to import the PBJ file. However you get the file into your movie, all you need to do is a create a new ShaderFilter using the imported shader data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | package { import flash.display.*; import flash.events.*; import flash.net.*; import flash.filters.*; import flash.utils.*; public class PixelBender extends Sprite { private var fr:FileReference; private var shader:Shader; private var shaderFilter:ShaderFilter; private var loader:Loader; public function PixelBender():void { fr = new FileReference(); fr.addEventListener(Event.SELECT, onSelect); fr.addEventListener(Event.COMPLETE, onComplete); loader = new Loader(); loader.load(new URLRequest("SOME_IMAGE")); addChild(loader); loader.addEventListener(MouseEvent.CLICK, loaderClick); } private function loaderClick(e:Event):void { fr.browse(); } private function onSelect(e:Event):void { fr.load(); } private function onComplete(e:Event):void { shader = new Shader(fr.data); shaderFilter = new ShaderFilter(); shaderFilter.shader = shader; loader.filters = [shaderFilter]; } } } |
Have fun with it!
Lee
Hi,
Thanks for this.
I have a question.
(Well, I could test, but I’m kindy lazy…)
Up until now, to see an update in the result, you had to update displayObject.filters.
Meaning, just modifiing a paramater of one of the filters in this array wasn’t updating the visual result.
What about now, can we keep a reference on a shader and see a modification on the displayObjects he’s applied whenever he’s modified?
Also, I gotta say I’m surprised by the CPU that some of the filters can use.
Are the GPU surfacing & compositing working on the Pixel Bender demo?
Hi Lee,
Thanks for this sample, it’s great.
I’m just disapointed because Pixel bender filters don’t run on my G5 at home: i have a geforce 5200.
An other thing :
what is this function loop in your sample ?
loader.addEventListener(MouseEvent.MOUSE_MOVE,loop);
because i’ve an error when i compile (on Diesel) your code
1120: Access of undefined property loop.
Lee, is it possible to share your Actionscript snippets from textmate?
@jeanphillipe Woops that shouldn’t be in there. Thanks!
@Frederick Yes I am planning on distributing my AS bundle. Should be up on a couple of days.
[...] Lee Brimelow nous explique comment charger un filtre Pixel Bender dans un swf [...]
Hi lee …
may i ask you which plugin you used to highlight your actionscript 3 code?
Thanks Lee, run perfectly!! No errors!
If you are using MXMLC you can also use the Embed metadata tag to embed the compiled filter directly within your SWF.
[...] The Back Button » Working with Shaders/Filters in Flash 10 The Flash Blog » Loading Pixel Bender Filters in Flash 10 Astro?ShaderFilter AIF [...]
Sorry, totally OT here, What plugin are you using to display those code samples .. it looks hell sexy.
I should learn to click the “?” .. sorry.
[...] Loading Pixel Bender Filters in Flash 10 (Lee Brimelov) [...]
Thanks for the information about Pixel Bender in Flash.
Here you can find the result: My first demo is using Pixel Bender for color keying on a video:
http://www.video-flash.de/index/flash-player-10-pixel-bender-realtime-color-keying/
do you know any information about this subject in other languages?
I’ve updated flex builder 3 to work with flash player 10 beta, loaded the code into a new actionscript project, grabbed an image and compiled a pbj but the filter does not work. I am not getting any errors in flex builder 3 when building the swf.
Any help or suggestions would be greatly appreciated. Maybe some sample code? Thanks in advance, keep up the great work.
Okay, I know what I was doing wrong. The issue that I’m having now is getting Pixel Bender files (.pbj) to work in Air. Possible future tutorial?
@Ben http://code.google.com/p/syntaxhighlighter/
[...] processing with shaders and filters and looked very interesting. Lee showed a custom demo where he created his own filter in HLSL (High Level Shader Language – which looked a bit like C#). One of the most exciting things [...]
[...] the flash blog – and loading pixel bender filters [...]
If my filter needs to accept two or more images, how do i load them through AS3?
I tried funny things such as
shader.data.src.input = [ MYDISPLAYOBJECT1 ] ;
shader.data.src2.input = [ MYDISPLAYOBJECT2 ] ;
and also
shader.data.src.input = [ MYDISPLAYOBJECT1, MYDISPLAYOBJECT2 ] ;
but these don’t seem to work.. Can you suggest what may work??
[...] at some examples by the usual suspects (Andrew Zupko, Joa Ebert, Mr.Doob, Tinic Uro, Pixelero, Lee Brimelow and Antti Kupila ), Adobes Pixel Bender Exchange and the ‘Pixel Bender Specification’ [...]
[...] http://theflashblog.com/?p=386 [...]
[...] processing with shaders and filters and looked very interesting. Lee showed a custom demo where he created his own filter in HLSL (High Level Shader Language – which looked a bit like C#). One of the most exciting [...]