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;
>;
void
evaluatePixel()
{
//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;
}
}
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.