`
yangzhiyong77
  • 浏览: 945937 次
文章分类
社区版块
存档分类
最新评论

Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash

 
阅读更多

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 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:

  1. Launch Flash CS4 Professional.
  2. Choose File > New and select the option to create a new Flash File (ActionScript 3.0).
  3. 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
  4. Click the YellowFlowers.png file and then click Import. The flower image appears on the Stage (see Figure 1).
Imported yellow flower image displayed on the Stage in Flash CS4
Figure 1. Imported yellow flower image displayed on the Stage in Flash CS4
  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:

  1. Choose Window > Actions to open the Actions panel, if it is not already open.
  2. Select Frame 1 in the Flash Timeline.
  3. 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.

  1. 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).

Output window displaying the string specified in the trace statement command
Figure 2. Output window displaying the string specified in the trace statement command

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:

  1. Quit Flash Player. Return to the Flash authoring environment.
  2. Select the yellow flower image on the Stage.
  3. Right-click (control-click) the image and choose the option to Convert to Symbol.
  4. 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).
Convert to Symbol dialog box
Figure 3. Convert to Symbol dialog box
  1. In the Property inspector, enter the instance name of the image: flower (see Figure 4).
Entering the name in the Instance Name field
Figure 4. Entering the name in the Instance Name field
  1. Choose Window > Actions to open the Actions panel (or click to expand the panel if it is currently collapsed).
  2. 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.
  3. Locate the following line of code:
trace("apply");
  1. Change the body of the applyFilter ActionScript function, replacing the trace statement 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 ];
  1. 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).
Vintage tone image displayed in Flash Player
Figure 5. Vintage tone image displayed in Flash Player
  1. 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:

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics