15 Nov

PBGUI - A minimal actionscript UI for Pixel Bender shaders

15. November 2010 by 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);

    //_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!




    Subscribe to newsletter:

    RSS Feed