Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash

Requirements

User level

Beginning

Required products

• Flash Player 10 and later
• Flash Professional (Download trial)
• Pixel Bender Toolkit (Macintosh)
• Pixel Bender Toolkit (Windows)

Sample files

• pixel_bender_06.zip

In this article, you'll learn how to modify the parameters in a Pixel Bender filter to create an interactive effect with a Slider component that allows users to change the effect at runtime.

This is the sixth 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 apply a Pixel Bender filter to Flash content by adding some ActionScript code to link to the PBJ filter file. You also used the Shader and the ShaderFilter classes to create a visual effect.

In this section, you'll use the filter you created in Part 3, named Exercise3Filter.pbj. Using the provided instructions, you'll update the project to control the filter effect with a slider that appears in Flash Player 10. You'll also use the parameter metadata that you set on the filter to set the minimum, maximum, and default properties of Flash UI components.

Setting up the files

If you didn't complete Part 3 of this article series, download the sample files provided and save them in a folder called pixel_bender on your desktop. Then launch Flash CS4 and open the exercise6A.fla file. Otherwise, you can continue working with the file named Exercise5.fla you've previously created.

In the Flash authoring environment, you should see the following ActionScript code in the Script window of the Actions panel when Frame 1 of the Timeline is selected:

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 { urlLoader.removeEventListener( Event.COMPLETE, applyFilter ); var shader:Shader = new Shader( event.target.data ); var shaderFilter:ShaderFilter = new ShaderFilter( shader ); flower.filters = [ shaderFilter ]; }

The code example shown above loads a Pixel Bender bytecode file and applies it to the image that has the following instance name: flower.

Before moving on to the next section, edit the code in the first line of code. Change the filename in the URLRequest from Exercise2Filter.pbj to Exercise3Filter.pbj.

Adding the Slider component

In this section, you'll add a Flash UI component to the Stage to make the movie interactive. Follow these steps:

1. Choose Window > Components to open the Components panel, if it isn't already open.
2. Click the arrow to expand the list of User Interface components. Drag an instance of the Slider component onto the Stage.
3. Select the new Slider component and open the Property inspector. Enter the instance name for the component: amount_slider (see Figure 1).

Figure 1. Slider component at the bottom of the Stage below the image

Making the Shader objects globally available

In this section, the goal is to modify the filter that is applied to the flower image. This requires reapplying the filter by resetting it on the image. To ensure that the code continues to work, you'll create two global variables to hold the Shader and ShaderFilter objects:

1. Place your cursor above the applyFilter function declaration and type the following two lines of code:

var shader:Shader; var shaderFilter:ShaderFilter;

1. In the body of the applyFilter function, remove the var keyword and the type definition as shown in the two lines below (highlighted in red):

var shader:Shader = new Shader( event.target.data ); var shaderFilter:ShaderFilter = new ShaderFilter( shader );

After making these changes, the ActionScript code in Frame 1 should look like this:

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

1. Choose Debug > Debug Movie. If you do not encounter any syntax errors, Flash Player launches and displays the image of yellow flowers. At this point, the image should not look different from the original image you imported in Part 5 of this series, even when you move the slider (see Figure 2).

Figure 2. Flash Player displaying the Slider component underneath the flower image

1. Save the Flash project file to the pixel_bender folder on your desktop.

Connecting the slider to the shader

The parameter metadata that you added to the filter in Part 3 is accessible in Flash Player at runtime once the filter has been loaded. In this section, you'll use this metadata to control animation of the filter. Follow these steps:

1. At the top of the ActionScript code in the Script window of the Actions panel, add the following line of code:

import fl.events.SliderEvent;

1. Add the following lines of code in the applyFilter function, above the closing curly brace:

amount_slider.minimum = shader.data.amount.minValue; amount_slider.maximum = shader.data.amount.maxValue; amount_slider.value = shader.data.amount.defaultValue; amount_slider.snapInterval = Math.abs(amount_slider.minimum - amount_slider.maximum) / 100; amount_slider.liveDragging = true; amount_slider.addEventListener( SliderEvent.CHANGE, updateFilter );

The code example above initializes the shader object and uses the parameter metadata to set its upper and lower bounds, as well as its initial value. The last line is an event listener that calls the updateFilter function when the slider changes.

Since the code shown above references the updateFilter function, the next step is to add the code for that function.

1. Immediately after the applyFilter function, add the following code:

function updateFilter( event:SliderEvent ):void { shader.data.amount.value = [amount_slider.value]; flower.filters = [ shaderFilter ]; }

Note: In Flash, Pixel Bender parameters are always set as arrays, even if they contain a single value.

1. Choose Debug > Debug Movie. If you do not encounter any syntax errors, Flash Player launches. The yellow flower and the slider are displayed. Move the slider to see how the filter affects the image.
2. Choose File > Save to save the changes you made to the Flash project.

Using the displacement shader

In this section, you'll begin working with the displacement filter. (In Part 7, you'll add more code to improve its capabilities.) To get started, edit the first line of code to replace the reference to the file in the URLRequest object from Exercise3Filter.pbj to Exercise4Filter.pbj:

1. Choose Debug > Debug Movie. If you do not encounter any syntax errors, Flash Player launches to display the yellow flower image.
2. Move the slider and notice that this time when the slider is moved, the image is displaced and composited on top of itself (see Figure 3).

Figure 3. Two versions of the flower composited to create a blurry appearance

Note: In Flash Player, when pixels are sampled off the edge of an image, the background color (white) is returned instead of transparent black. This causes the edge of the image to appear lighter, as shown in the screenshot above.

Take a moment to review your code. The ActionScript code on Frame 1 should look like this:

import fl.events.SliderEvent; var urlRequest:URLRequest = new URLRequest("Exercise4Filter.pbj"); var urlLoader:URLLoader = new URLLoader(); urlLoader.dataFormat = URLLoaderDataFormat.BINARY; urlLoader.addEventListener( Event.COMPLETE, applyFilter ); urlLoader.load(urlRequest); var shader:Shader; var shaderFilter:ShaderFilter; function applyFilter( event:Event ):void { urlLoader.removeEventListener( Event.COMPLETE, applyFilter ); shader = new Shader( event.target.data ); shaderFilter = new ShaderFilter( shader ); // set up slider amount_slider.minimum = shader.data.amount.minValue; amount_slider.maximum = shader.data.amount.maxValue; amount_slider.value = shader.data.amount.defaultValue; amount_slider.snapInterval = Math.abs(amount_slider.minimum - amount_slider.maximum) / 100; amount_slider.liveDragging = true; amount_slider.addEventListener( SliderEvent.CHANGE, updateFilter ); flower.filters = [ shaderFilter ]; } function updateFilter( event:SliderEvent ):void { shader.data.amount.value = [amount_slider.value]; flower.filters = [ shaderFilter ]; }

Where to go from here

After testing and reviewing the code from the Flash file, continue with Part 7 in this series, where you'll learn how to update the way the displacement filter performs and improve the resulting effect.

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

• Pixel Bender forum
• Pixel Bender basics for Flash
• Pixel Bender basics for Flex and AIR