Follow Skinkers.




Flex Effects with Pixel Bender filters, part 2.

  March 21st, 2010 | AS3, Flex | David Spanton

This is the second part of a series on using Pixel Bender to create effects in Flex. In this part I’ll go through making a simple filter in Pixel Bender that can be used to animate an effect in a similar way to the last post.

You can get hold of a copy of the Pixel Bender toolkit here and also get hold of a lot of good reading material to get started using it.

The filter I’ve made basically alters the alpha value of pixels based on their y position in the image. Using a sine function this is done in horizontal stripes to create a shutter show/hide effect. Here the code for the filter:

<languageVersion : 1.0;>

kernel ShutterFade
<   namespace : "com.as3offcuts.filters";
    vendor : "as3offcuts";
    version : 1;
    description : "shutter fade";
    //input pixel
    input image4 src;
    //output pixel
    output pixel4 dst;

    //parameter that takes the image through the effect from fully visible (0) to invisible (1)
    parameter float transition
        minValue:       0.0;
        maxValue:       1.0;
        defaultValue:   0.0;

    //parameter that governs the height of the 'shutters'. The higher the number, the bigger the shutter.
    parameter float shutterHeight
        minValue:       1.0;
        maxValue:       10.0;
        defaultValue:   1.0;

        //sample the current pixel
        pixel4 pix = sampleNearest( src, outCoord() );
        //get a base value from a sin function of the pixel's y position divided by the shutterHeight parameter
        float sinHeight = sin( outCoord().y / shutterHeight );
        //assign the base value adjusted by the transition value to the current pixel's alpha
        pix.a = sinHeight - ((transition * 3.) -2.);
        //assign the transformed pixel to the output
        dst = pix;

Shutterfade source

This filter calculates a value based on the sine of the pixel’s y position divided by the shutterHeight parameter. This value is then either exaggerated or reduced based on the transition parameter before being assigned to the output pixel’s alpha value. This gives a graduated opaque-transparent effect in horizontal stripes going down the image.

Using this in a custom Flex effect is just a case of exporting the filter as a .pbj file and plugging it into an effect class in the same way as in the last post, and manipulating the transition parameter to create the animation. Below is a simple example of this in action. Right-click on the swf to view the source.

[kml_flashembed publishmethod="static" fversion="10.0.0" movie="http://www.as3offcuts.com/wp-content/uploads/2010/03/shutterfade/ShutterFade.swf" width="450" height="300" targetclass="flashmovie"]

Get Adobe Flash player


Tags: , ,

Leave a Reply