Effects with the Pixel Bender Toolkit – Part 10: Using a multiple-input filter as a blend shader
Modified
11 January 2010
Requirements
Prerequisite knowledge
Some familiarity with ActionScript 3.
User level
Beginning
Required products
Sample files
- pixel_bender_10.zip (5896 KB)
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.
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.
More Like This
- Pixel Bender release notes
- Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter
- 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 4: Sampling multiple pixels
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
- Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
- Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
- 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
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 |
