Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
Created
11 January 2010
Requirements
Prerequisite knowledge
Some familiarity with ActionScript 3.
User level
Beginning
Required products
Sample files
- pixel_bender_05.zip (1535 KB)
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.
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.
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).
- In the Property inspector, enter the instance name of the image: flower (see Figure 4).
- 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
tracestatement 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.
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.
More Like This
- Effects with the Pixel Bender Toolkit – Part 2: Creating a vintage tone filter
- Effects with the Pixel Bender Toolkit – Part 3: Adding parameters to filters
- Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter
- Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
- Effects with the Pixel Bender Toolkit – Part 4: Sampling multiple pixels
- Pixel Bender release notes
- Effects with the Pixel Bender Toolkit – Part 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit – Part 9: Integrating multiple image sources with a Pixel Bender kernel
- Animating a particle system using Pixel Bender
- Effects with the Pixel Bender Toolkit – Part 10: Using a multiple-input filter as a blend shader
Tutorials & Samples |
Samples
| 04/10/2012 | Fast Fourier Transform (FFT) in Pixel Bender? |
|---|---|
| 04/19/2012 | Shader works in toolkit, not in Flash |
| 04/12/2012 | Pixel Bender removed from AE CS6 !? |
| 03/22/2012 | Load an HDR image into Pixel Bender Toolkit |
