PBGUI - A minimal actionscript UI for Pixel Bender shaders

15.11.10 George Profenza

Pixel Bender shaders can be used in Photoshop, After Effects and Flash Player. While Photoshop and After Effects provides a GUI, there are no helper GUI classes for actionscript.

PBGUI generates a simple interface using Keith Peters' Minimal Comps.

On the super secret project me and Max have been working on in summer, I had the change to play with Pixel Bender a bit. Recently a newer project gave me the opportunity to test Pixel Bender shaders again. While testing, I got a bit annoyed by the fact that by default you get a GUI when you use the shaders in Photoshop or After Effects, but not in actionscript.

I started whipping out some quick controls using MinimalComps and fetching shader details and that's how PBGUI started.

Here's a little snippet to get you started, once you download the classes:

                      //shader is a reference to an initialized Shader instance
var controls:ShaderControls = new ShaderControls(shader);
addChild(controls);
//changes are handled through callbacks
controls.onToggle = onToggle;
controls.onUpdate = onUpdate;
controls.onReset = onReset;

//name = shader parameter name and value is the array of values for the updated parameter
//preview = a DisplayObject used for previewing/applying the filters
function onUpdate(name : String, value : Array) : void {
    shader.data[name].value = value;
    preview.loader.filters = [shaderFilter];
}
function onReset():void{
    preview.loader.filters = [shaderFilter];    
}
function onToggle(on:Boolean):void{
    preview.loader.filters = on ? [shaderFilter]:[];    
}

                    

This is also my first github project...woo hoo!

PBGUI preview PBGUI preview 3 PBGUI preview 2