In this article, you'll apply a Pixel Bender filter that you saved in Part 2 in this series to an image in Adobe Flash Professional CS4. This is the fifth installment in this series of articles about using the Pixel Bender Toolkit to create visual effects with bitmap images.

In the previous section, you learned how to sample multiple pixels from the same image to create an offset effect. You also added code to reduce the saturation and display the image without doubling the values of the pixels.

In this section, you'll learn how to apply a filter to an image that appears in Flash Player. You'll use the Shader and the ShaderFilter classes to create a vintage tone effect.

Setting up the files

If you are jumping into this article series at this point and didn't complete Part 2, download the sample files provided. You'll use the file named Exercise2Filter.pbj as the filter for this section.

Follow these steps:

Launch Flash CS4 Professional.
Choose File > New and select the option to create a new Flash File (ActionScript 3.0).
Choose File > Import > Import to Stage. Browse to select the YellowFlowers.jpg image that exists at the following location, depending on your operating system:
- Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images
- Mac OS: Mac HD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images
Click the YellowFlowers.png file and then click Import. The flower image appears on the Stage (see Figure 1).
Choose File > Save. In the dialog box that appears, rename the untitled file as Exercise5.fla. Save the file in the pixel_bender folder on your desktop.

Figure 1. Imported yellow flower image displayed on the Stage in Flash CS4

Loading the Pixel Bender bytecode file into Flash

Now that you've set up a Flash project file (FLA file) with an imported bitmap image, the next task is to link the Pixel Bender code that you created previously. The code that you link will create a sepia effect on the flower image.

Follow these steps:

Choose Window > Actions to open the Actions panel, if it is not already open.
Select Frame 1 in the Flash Timeline.
In the Script window of the Actions panel, enter the following code:

        var urlRequest:URLRequest = new URLRequest("Exercise2Filter.pbj");
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener( Event.COMPLETE, applyFilter );
urlLoader.load(urlRequest);
 
function applyFilter( event:Event ):void
{
  trace("apply");
}
    

In the code example shown above, ActionScript loads the filter (Exercise2Filter.pbj) that you created in part two of this series into Flash Player. It also calls a function named applyFilter when the loading operation is complete.

Note: If you did not complete Part 2 of this series, be sure to download the sample files folder and save the files into the same folder where you saved the FLA file to ensure that the path to the Pixel Bender filter is not broken.

Choose Debug > Debug Movie.

If you do not encounter any syntax errors, Flash Player launches to display the Yellow Flowers image. The Output window appears to display the trace command text string: apply (see Figure 2).

If you get an error after launching Flash Player that states that the file could not be found, double-check that both the Exercise5.fla Flash project file (the FLA file) and the Pixel Bender filter named Exercise2Filter.pbj (PBJ file) from Part 2 (or the sample files folder) are saved in the same directory. If one is in a subfolder, the path will be broken.

Figure 2. Output window displaying the string specified in the trace statement command

Applying the Pixel Bender filter on the image

Now that you've added the ActionScript code in the Flash file to link to the Pixel Bender filter, you can begin editing the placeholder code (which is currently a trace statement) to apply an effect.

Follow these steps:

Quit Flash Player. Return to the Flash authoring environment.
Select the yellow flower image on the Stage.
Right-click (control-click) the image and choose the option to Convert to Symbol.
In the Convert to Symbol dialog box, enter the name in the Name field: Flower Image. Use the Type menu to select Movie Clip and click OK (see Figure 3).

Figure 3. Convert to Symbol dialog box

In the Property inspector, enter the instance name of the image: flower (see Figure 4).

Figure 4. Entering the name in the Instance Name field

Choose Window > Actions to open the Actions panel (or click to expand the panel if it is currently collapsed).
Double-check that Frame 1 is selected in the Timeline. You should see the ActionScript code that you wrote in the previous section to load the Pixel Bender filter file.
Locate the following line of code:

trace("apply");

Change the body of the applyFilter ActionScript function, replacing the trace statement with the following code:

        urlLoader.removeEventListener(
Event.COMPLETE, applyFilter );
var shader:Shader = new Shader( event.target.data );
var shaderFilter:ShaderFilter = new ShaderFilter( shader );
flower.filters = [ shaderFilter ];
    

Choose Debug > Debug Movie. If you do not encounter syntax errors, Flash Player launches again to show the Yellow Flowers image. This time, the flower displays with a vintage tone effect (see Figure 5).
Save the Flash file in the folder called pixel_bender on your desktop.

See the Flash CS4 Professional ActionScript 3 Language Reference for additional information about working with the Shader and ShaderFilter classes in Flash CS4.

Figure 5. Vintage tone image displayed in Flash Player

Where to go from here

After experimenting with sampling multiple pixels from the same image, continue with Part 6 in this series, where you'll learn how to update Pixel Bender parameters in Flash.

Check out the following resources to learn more about working with the Pixel Bender Toolkit:

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Tutorials & Samples

Tutorials

Samples

Pixel Bender Forum

05/09/2013	Pixel Bender Installation
02/10/2012	I Cannot get pixel bender to show in PS
05/31/2009	White Hat PBJ Decompiling
01/19/2013	Multiple Image inputs in Blendmode Shader

Pixel Bender Exchange

	Escher's Droste Effect
	4D Quaternion Julia-set Ray Tracer with Ambient Occlusion
	Zoom Blur Focus
	Raytracer

Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash

by Kevin Goldsmith

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Setting up the files

Loading the Pixel Bender bytecode file into Flash

Applying the Pixel Bender filter on the image

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Pixel Bender Forum

Pixel Bender Exchange

Products

Download

Support & Learning

Buy

Company