Flash Blur Filters & ActionScript	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Create a Blur Filter with ActionScript

Full Version: This is a shortened click by click version of a: Full Length Tutorial

Free Flash Tutorial

The Blur Filter lets you add a blur effect to a variety of objects in Flash. The Blur filter softens the edges and details of objects. Applying a blur to an object can make it appear as if it is behind other objects, or make an object appear to be in motion. You can produce blurs that range from a softly unfocused look to a Gaussian blur, a hazy appearance like viewing an image through semi-opaque glass.

A Blur filter an be applied to objects such as Buttons, Movie Clips and Text. You can customize the look of the Blur with different amounts of X or Y blur.

In this tutorial you will learn the ActionScript needed to apply the Flash Blur Filter to Text, Movie Clips and Button symbols. In addition to this I will describe the parameters (settings) which enable you to customise the Blur Filter.

Here is an example of what you will create in this tutorial:

Example: Download the Flash file Draw 213a

 

Flash Movie Clip with Blur Filter applied.

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. Go to: File > Publish Settings
3. If the Flash Tab is not selected, select it:
4. For Version select: Flash Player 8
5. For ActionScript version select: ActionScript 2
6. Click: OK
   
   
7. Create a Movie Clip, Button or Text and place it on the Stage: Movie Clip, Button or Text
8. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
   
9. With the Symbol or Text still selected type an Instance Name: myObject

Step Two: The ActionScript

1. In the Timeline insert a new Layer:
2. Name the Layer: ActionScript
3. Select Frame 1 of the Actionscript Layer: Frame 1
4. Open the Actions Panel: Window > Actions (F9)
5. If Script Assist is on, Switch it off:
6. Type the following into the Actions Panel:

   // Makes the filter available to use in the Movie.
   import flash.filters.BlurFilter;

   // Creates a variable with info about the Filter settings
   var myBlurFilter = new BlurFilter (10,2,3);

   // Applies the filter to the object named myObject
   myObject.filters = [myBlurFilter]

7. Test your Movie: Control > Test Movie (Ctrl Enter)

Step Three: Blur Filter Parameters

In this section detailed information is given on each of the BlurFilter parameters. This will enable you to set the Filter parameter's correctly. The parameters are set with this section of code:

(10,2,3);

Here is what the parameters set:

Blur X, Blur Y & Quality.

Each of these parameters has a default setting and if you are not familiar with the Filter it is often best to start with the default and then edit:

Example: Download both the Flash files Draw 213a & 213b

My Settings Draw 213a

Default Settings Draw 213b

Here are my parameter setting compared to the default setting:

Parameter   My Setting   Default Blur X:   10   4 Blur Y:   2   4 Quality   3   1

 

Blur X: 0 to 255 - Default = 4
The amount of horizontal blur in pixels. Valid values are from 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values.

Blur Y: 0 to 255 - Default = 4
The amount of vertical blur in pixels. Valid values are from 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values.

Quality: 0 to 15 - Default: 1
The number of times to apply the filter. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality. Filters with lower values are rendered more quickly. For most applications, a quality value of 1, 2, or 3 is sufficient. Although you can use additional numeric values up to 15 to achieve different effects, higher values are rendered more slowly. Instead of increasing the value of quality, you can often get a similar effect, and with faster rendering, by simply increasing the values of blurX and blurY.

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

Full Version of this: Tutorial