Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
2011-03-07 13:43
471 查看
Requirements
Flash Professional (Download trial)
Pixel Bender Toolkit (Macintosh)
Pixel Bender Toolkit (Windows)
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.
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:
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.
Choose Window > Components to open the Components panel, if it isn't already open.
Click the arrow to expand the list of User Interface components. Drag an instance of the Slider component onto the Stage.
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
Place your cursor above the
In the body of the
After making these changes, the ActionScript code in Frame 1 should look like this:
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
Save the Flash project file to the pixel_bender folder on your desktop.
At the top of the ActionScript code in the Script window of the Actions panel, add the following line of code:
Add the following lines of code in the
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
Since the code shown above references the
Immediately after the
Note: In Flash, Pixel Bender parameters are always set as arrays, even if they contain a single value.
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.
Choose File > Save to save the changes you made to the Flash project.
Choose Debug > Debug Movie. If you do not encounter any syntax errors, Flash Player launches to display the yellow flower image.
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:
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
User level
BeginningRequired products
Flash Player 10 and laterFlash Professional (Download trial)
Pixel Bender Toolkit (Macintosh)
Pixel Bender Toolkit (Windows)
Sample files
.zip]pixel_bender_06.zipIn 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:Choose Window > Components to open the Components panel, if it isn't already open.
Click the arrow to expand the list of User Interface components. Drag an instance of the Slider component onto the Stage.
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:Place your cursor above the
applyFilterfunction declaration and type the following two lines of code:
var shader:Shader; var shaderFilter:ShaderFilter;
In the body of the
applyFilterfunction, remove the
varkeyword 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 ]; }
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
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: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;
Add the following lines of code in the
applyFilterfunction, 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
updateFilterfunction when the slider changes.
Since the code shown above references the
updateFilterfunction, the next step is to add the code for that function.
Immediately after the
applyFilterfunction, 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.
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.
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:Choose Debug > Debug Movie. If you do not encounter any syntax errors, Flash Player launches to display the yellow flower image.
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
相关文章推荐
- Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
- Effects with the Pixel Bender Toolkit – Part 3: Adding parameters to filters
- Effects with the Pixel Bender Toolkit – Part 9: Integrating multiple image sources with a Pixel Bender kernel
- Effects with the Pixel Bender Toolkit – Part 2: Creating a vintage tone filter
- Effects with the Pixel Bender Toolkit – Part 4: Sampling multiple pixels
- Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
- Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
- Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter
- Effects with the Pixel Bender Toolkit – Part 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit – Part 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit
- GWT in Action: Easy Ajax with the Google Web Toolkit
- [转]Working with Parameters and Return Codes in the Execute SQL Task
- IE title changes to <afterHash> if the page has a url with '#' , and has flash/swf embedded in it
- use update cache to synchronize the part in the cache with the library
- - Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- How to deal with the "ErrorWebPart" error displayed in the web part maintenance page
- REST web services with Python, MongoDB, and Spatial data in the Cloud - Part 2