SlideShowPro for Flash

How to: Apply Pixel Bender filters

Flash CS4 and Flash Player 10 introduced "Pixel Bender," a new high-performance graphics programming language used for image processing. The toolkit allows developers to create (and share) custom filters to manipulate bitmaps in all kinds of creative ways, like applying tints, making color images grayscale, sharpening, etc. Many filters come with modifiable parameters as well for fine tuning.

Requirements

Any SWF that uses Pixel Bender must be published to Flash Player 10 and use ActionScript 3 as their language. For that reason the ActionScript 3 version of SlideShowPro for Flash is required to use this option. This document will walk you through the process of embedding a Pixel Bender filter in your FLA, and applying it to content loaded inside SlideShowPro. Let's get started.

Step one: Obtain a filter

If you don't already have a Pixel Bender filter, there are a number of free ones you can download from the Pixel Bender Exchange. Pixel Bender filters come in two forms, a *.pbj file, and a *.pbk file. The pbk version is a kernel file, and is editable within the standalone Pixel Bender Toolkit (and is a good way to experiment with filter settings). The pbj file is a compiled bytecode file for embedding in a SWF. It's the pbj file we need for this walkthrough.

Step two: Embed filter

If you haven't already created an FLA, do so now by launching Flash CS4 and selecting "Flash File - ActionScript 3.0". When open, drag an instance of SlideShowPro from the Components panel to the Stage. Open the Properties panel and assign the component an instance name of "my_ssp".

Next, copy the pbj file to the same directory as your FLA. For the purposes of this tutorial, we'll use the When finished, create a new timeline layer in your FLA, and in the first empty keyframe enter the following:

import flash.display.*;
import flash.filters.*;
import flash.utils.ByteArray; 
import flash.net.*;

[Embed("grayscale.pbj", mimeType="application/octet-stream")]
var GrayscaleFilter:Class;
var grayShader:Shader = new Shader(new GrayscaleFilter() as ByteArray);			
var grayFilter:ShaderFilter = new ShaderFilter(grayShader);

This code embeds our pbj file in the SWF when published and creates a ShaderFilter for us to use with SlideShowPro.

Step three: Apply filter

Now that our filter is created, you can assign it to slideshow content, thumbnail navigation links, navigation link previews, album previews, or all of the above. Each has their own filter parameter you can use to apply your Pixel Bender filter. For example, if we wanted to apply our grayscale filter to all slideshow content, we'd use the contentFilter parameter like so:

my_ssp.contentFilter = [grayFilter];         

Note that our the filter we created is assigned as an array, which is why the brackets are included. Why an array? Well, here's the cool thing. An array means you can assign more than one filter to the same image. For example, if you used the sharpening filter, you could embed/setup the filter just like Step two above, then add the filter to the array for images that are both black/white and sharpened, like so:

my_ssp.contentFilter = [grayFilter,sharpFilter];         

Step four (optional): Assign other filters

If you'd like to apply your filters to other images in SlideShowPro, you can do so with the albumPreviewFilter, navThumbLinkFilter and navLinkPreviewFilter parameters. For example:

// album previews
my_ssp.albumPreviewFilter = [grayFilter];

// navigation thumbnail links
my_ssp.navThumbLinkFilter = [grayFilter]; 

// navigation thumbnail link previews
my_ssp.navLinkPreviewFilter = [grayFilter];

Step five: Publish

Publish your SWF to ensure that your ActionScript is coded correctly. The first time you do so, Flash CS4 will ask to verify the path to the Flex SDK (shown right). This is because of the Embed metadata in our ActionScript. Click "Update library path" to continue.

Your SWF should now publish and display the results of your filter.

Tip: Modifying parameters

As noted at the beginning, most filters have parameters that can be manipulated to modify their effect. To see these parameters, open the pbk file in the standalone Adobe Pixel Bender Toolkit that's installed with Flash CS4. Select File > Load Image to load an image to experiment with, then press the "Run" button at the bottom. The parameters will appear in the right column.

Every filter is different, so you may want to refer to the filter's readme or help documentation (if available) for specifics. To modify these parameters via ActionScript in our FLA, we make the adjustments on the Shader we create and pass values as arrays, like the following example which modifies the amount and radius parameters of the sharpen filter.

[Embed("sharpen.pbj", mimeType="application/octet-stream")]
var SharpenFilter:Class;
sharpenShader = new Shader(new SharpenFilter() as ByteArray);
sharpenShader.data.amount.value = [6];
sharpenShader.data.radius.value = [0.1];
var sharpenFilter:ShaderFilter = new ShaderFilter(sharpenShader);      

Additional resources

Grayscale filter by Mike Chambers: http://www.mikechambers.com/blog/2008/09/18/pixel-bender-grayscale-filter/

Sharpen filter: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1698056

Pixel Bender Exchange: http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26&loc=en_us

Pixel Bender on Twitter: http://twitter.com/pixelbender