Applying Flash Filters to Flash Video

Flash Professional 8 introduces a full range of filters ranging from Blurs to Color changes that can be applied to movie clips. The neat thing about thse filters is they can also be applied to video. The reason is the FLVPlaybock component is, for all intents and purposes, one great big movie clip.

Before you get all excited, keep in mind that filters can be added to the component in one of two ways:

1) When you are creating the Flash movie (author time) provided the component is in a movie clip.

2) At runtime through the use of ActionScript.

This tutorial focuses on the second approach.

  1. Open a new Flash movie, drag an FLVPlayback component to the stage and in the Parameters set the Skin to none and link an FLV to the conentPath. Select the component on the stage and give it the instance name of myPlayer.

  2. Add two new layers to the movie. Name them Buttons and Actions.

  3. Select the keyframe in the Actions layer and open the ActionScript Editor by pressing F9 (PC) or Option-F9 (Mac).

  4. Enter the following script:

import flash.filters.*;

var myBlur: BlurFilter = new BlurFilter (8,8,3);

myPlayer.filters = [myBlur];

  1. Save and test the movie.

The blurred video

Image 1: The video has a blur applied to it using ActionScript.

The first line of the code imports the ActionScript Filters package into the movie and makes the methods and properties of all of the filters available for use in ActionScript. The second line constructs a new Blur Filter. The numbers in the parameters determine the blur to be applied to the x axis, the y axis and the final number is the quality of the blur. The last line applies the filter object to the filters property of the component.

When using the Blur filter apply values that are powers of 2 such as 2,4,8,16 and so on. The reason is these values can be computed a lot quicker by your computer and the result is a performance boost in the 20-30% range.

Now that you know how to apply it, let's give the user the chance to turn it on and off.

  1. Open the Flash movie, select the Buttons layer and drag a button component from the UI components panel to the stage.
  2. Select the button on the stage and give it the instance name of btnBlur. With the button still selected, open the Parameters panel and enter Blur is the Label parameter.
  3. Drag another Button component to the stage and give it the name of btnReset and change its Label parameter to Reset.
  4. Open the Actions panel, select the last line of the code and change it to:

btnBlur.onPress = function(): Void {
mcPlayer.filters =[myBlur];
}

btnReset.onPress = function(): Void {
mcPlayer.filters =[];
}

Go ahead, try it:

Creative Commons logo