Flash Blur Filters & ActionScript

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Click by Click: Create a Blur Filter with ActionScript

See 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!

See Full Version of this: Tutorial


10642 visitors to this page since 21 March 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.