In this article, you'll learn how to bring a multiple-image-manipulating filter from the Pixel Bender Toolkit to work in a Flash CS4 project. This is the tenth, and final, 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 create a Pixel Bender kernel that integrates values from multiple image sources. You blended two images together and also learned how to control the way the effect blends the images by adjusting the filter's parameters.

In this final installment, you'll take the filter you created in Part 9, create a new Flash CS4 project, and then add the ActionScript code to display the effect in Flash Player 10.

Setting up the files

If you completed Part 9, you can work with the filter that you already created, named Exercise9Filter.pbk, and apply it as a blend mode within Flash. If you are just beginning to follow along with these instructions, download the sample files provided, uncompress the ZIP file, and save the contents into a folder called pixel_bender on your desktop.

Creating a new Flash file

To begin, create a brand new Flash file and set it up for this project. Follow these steps:

Launch Flash CS4.
Choose File > New and select the option to create a new Flash File (ActionScript 3.0).
Select the blank keyframe on Frame 1 of Layer 1.
Choose File > Import > Import to Stage. In the dialog box that appears, browse to select the ShrineNearDarjeeling.png file.
Note: Use the platform specific path below to locate the image on your machine:
- 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
Select the ShrineNearDarjeeling.png image located in the sample images folder and click Import.
Click the gray area outside the Stage. Use the Property inspector to edit the size of the Stage. After clicking Edit, choose the option to Match Contents. Click OK.
Choose File > Import > Import to Stage. In the dialog box that appears, browse to select the YellowFlowers.png file in the sample images folder. Click Import. Use the same path shown above, depending on your operating system, to access the sample images folder. Now both of the images are imported onto the Stage on same layer.
While the yellow flower image is still selected, press the Q key to access the Free Transform tool. Resize the flower image to match the dimensions of the ShrineNearDarjeeling image. Position the flower image so that it completely covers the image underneath.
Right-click (or Control-click) the flower image and select the Convert to Symbol option.
In the Convert to Symbol dialog box, enter the name the new symbol: flower_mc. Use the Type menu to select Movie Clip. Click OK.
In the Property inspector, enter the instance name of the flower image: flower. If you've been following these instructions from the beginning, you'll remember that this is the same process described in Part 5 of this series.
Choose File > Save and save the Flash file. Name it Exercise10.fla and save it in the folder named pixel_bender on your desktop.

In the next section, you'll learn how to add the ActionScript to make the filter run on the two imported images in Flash Player 10.

Adding the code the integrate the multiple-input filter

In this section, you'll add the ActionScript to link the filter you created in Part 9 to the Flash project. Follow these steps:

Choose Window > Actions to open the Actions panel.
Create a new layer above the current layer and name it AS. Select Frame 1 of the AS layer.
Enter the following code into the Script window to load the Pixel Bender filter:

        var urlRequest:URLRequest = new URLRequest("Exercise9Filter.pbj");
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener( Event.COMPLETE, applyFilter );
urlLoader.load(urlRequest);
 
var shader:Shader;
 
function applyFilter( event:Event ):void
{
  urlLoader.removeEventListener( Event.COMPLETE, applyFilter );
  shader = new Shader( event.target.data );
  shader.data.amount.value = [0.5];
  flower.blendShader = shader;
}
    

Note: If you've been following along with this article series since the beginning, you'll notice that this code is very similar to the filter-loading code you wrote in Part 5.

Choose Debug > Debug Movie. If you do not encounter any syntax errors, Flash Player launches and shows the two images as cross-faded (see Figure 1).
Choose File > Save to save the Flash Project and save your changes.

Figure 1. Blended images displayed in Flash Player 10

Where to go from here

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 10: Using a multiple-input filter as a blend shader

by Kevin Goldsmith

Content

Modified

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Setting up the files

Creating a new Flash file

Adding the code the integrate the multiple-input filter

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Pixel Bender Forum

Pixel Bender Exchange

Products

Download

Support & Learning

Buy

Company