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
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
Step Two: The ActionScript
// Makes the filter available to use in the Movie.
// 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]
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:
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
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
10582 visitors to this page since
21 March 07 •
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here
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.