Filters are readymade effects which you can apply to all visual objects in Flash. This tutorial will teach you how to apply, customize, and remove these filers from any object using ActionScript 3.0. This is a beginner tutorial that does not require you to have any advanced AS3 skills.
All display objects have a special filters property which can add filters to. We will explain how to manipulate this property to add whatever filters you wish to it. This tutorial is divided into the following sections:
- Preparing the FLA.
- Applying a Filter.
- Removing a Filter.
- Customizing Filters.
Preparing the FLA
Start off by creating a new FLA in AS3 format. We need to create the object which we are going to apply our filters to. Use the Rectangle Tool to draw a square on stage. Once you have that on stage, press F8 to convert it to a MovieClip Symbol.
In order to easily manipulate this object via ActionScript we need to give it an instance name. Select your new MovieClip and access the Properties Inspector. Set my_mc as the instance name of this object.
Our MovieClip is now ready for ActionScript. Right-click the only frame you have on the timeline and select Actions to open up the Actions panel and start coding.
Applying a Filter
We are going to explain the uses of the four basic filters, namely BlurFilter, GlowFilter, BevelFilter, and DropShadowFilter. There are a number of advanced filters such as GradientGlowFilter and GradientBevelFilter which we will not explore in this tutorial.
Before being able to use any Filter in your project you must import the relevant ActionScript package to your project. You can do this by using the import keyword to do that. At the top of your code type the following to import ALL the filters into your project:
That should allow us to use any Filter we want in our project.
The process for applying a specific filter to a specific object involves two main steps:
- Creating an instance of the filter.
- Adding that instance to the filters property of the object.
The first step for instantiating a filter is the same process for any class. You simply use the var keyword to create a variable and the new keyword to create a new instance of the required class. Type the following to do this trick:
var myBlur:BlurFilter = new BlurFilter();
The next step simply requires us to add this to the filters property of our object. This property is not a regular property, but it an array. This means that we should use the square brackets to set its value or use the array push() method to add something to it. To keep things simpler we are just going to use the square brackets to do this:
var myBlur:BlurFilter = new BlurFilter();
my_mc.filters = [myBlur];
That should do it, to see your filter applied test your movie by going through Window>Text – or alternatively press Ctrl+Enter to do the same thing.
The blur effect is a bit subtle because we did not configure the filter. We are going to do that later.
If you would like to add more than one to your object you can do that by instantiating another filter and then passing it together with the previous one to the filters property. The example below adds a Glow effect:
var myBlur:BlurFilter = new BlurFilter();
var myGlow:GlowFilter = new GlowFilter();
my_mc.filters = [myBlur, myGlow];
You should note that you need to separate your filters by a coma , inside the same square brackets as they are values of an array.
You can add as many filters as you wish by simply adding them to your filters array. It is really simple.
Removing Filters
For some reason you might want to remove a filter you added from an object. This is not a complicated process. All you have to do to delete all your filters is simply set the value of the filters property to empty square brackets. This clears an array of all its contents:
var myBlur:BlurFilter = new BlurFilter();
var myGlow:GlowFilter = new GlowFilter();
my_mc.filters = [myBlur, myGlow];
my.filters = [];
Testing the code above will produce the MovieClip without any filters applied to it at all.
Customizing Filters
It is possible to customize each filter with different attributes before applying the filter to an object. These attributes may be customized at the time the Filter is instantiated or they could be later changed using Filter properties. In this tutorial we are going to use the slow method for modifying the properties after a Filter is instantiated. For example, if you would like to modify the transparency of a Glow filter you can do that by using the alpha property of that filter:
var myGlow:GlowFilter = new GlowFilter();
myGlow.alpha=0.5;
my_mc.filters = [myGlow];
It is important to note that you need to modify the properties of a filter before you apply that filter to an object. Attempting to change it afterwards will affect the actual filter on the object. The following code is WRONG:
var myGlow:GlowFilter = new GlowFilter();
my_mc.filters = [myGlow];
myGlow.alpha=0.5; // THIS WILL NOT WORK. MUST CHANGE THE PROPERTY BEFORE APPLYING THE FILTER.
Each filter has a number of different properties that could be customized. You may use all of none We are going to go through these one by one.
The Blur Filter
The Blur Filter has the following properties:
- quality – The number of image duplications used to create the blur. The larger the better, but also caused the SWF to run slower.
- blurX – The distance at which the blur splits horizontally.
- blurY – The distance at which the blur splits vertically.
Example of use:
var myBlur:BlurFilter = new BlurFilter();
myBlur.quality = 3;
myBlur.blurX = 10;
myBlur.blurY = 10;
my_mc.filters = [myBlur];
You can test this code to generate the following result:
The Glow Filter
The Glow Filter has the following properties:
- alpha – sets the transparency of the glow. Ranges from 0 to 1.
- blurX – amount of horizontal blur in the glow.
- blurY – amount of vertical blur in the glow.
- color – the color of the blur in hex value.
- inner – Set this to true to make the effect an inner glow.
- knockout – Set this to true to knockout the original shape and keep the glow only.
- quality – The number of glow duplicates used for the effect.
- strength – The intensity of the glow. Ranges from 0 to 255.
Example of use:
var myGlow:GlowFilter = new GlowFilter();
myGlow.inner=true;
myGlow.color = 0×000000;
myGlow.blurX = 20;
myGlow.blurY = 20;
my_mc.filters = [myGlow];
You can test this code to generate the following result:
The Bevel Filter
The Bevel Filter has the following properties:
- angle – the angle of the bevel. Ranges from 0 to 360.
- blurX – the amount of horizontal blur in the bevel.
- blurY – the amount of vertical blur in the bevel.
- distance – the distance of the bevel.
- highlightAlpha – the transparency of the highlight color.
- highlightColor – the color of the highlighted section of the bevel.
- knockout – set this to true to knockout the original shape and keep the bevel only.
- quality – The number of bevel duplicates used for the effect.
- shadowAlpha – the the transparency of the bevel shadow color.
- shadowColor – the color of the shadowed section of the bevel.
- strength – the intensity of the bevel. Ranges from 0 to 255.
- type – Sets the type of bevel. Acceptable values are:
- BitmapFilterType.INNER
- BitmapFilterType.OUTER
- BitmapFilterType.FULL
Example of use:
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.FULL;
myBevel.distance = 10;
myBevel.highlightColor = 0xFF0000;
myBevel.shadowColor = 0xFFFF00;
myBevel.blurX = 20;
myBevel.blurY = 20;
my_mc.filters = [myBevel];
You can test this code to generate the following result:
The DropShadow Filter
The DropShadow Filter has the following properties:
- alpha – the transparency of the shadow.
- angle – the angle of the shadow. Ranges from 0 to 360.
- blurX – the amount of horizontal blur in the shadow.
- blurY – the amount of vertical blur in the the shadow.
- color – the color of the shadow.
- distance – the distance of the shadow away from the object.
- hideObject – set this to true to hide the object and keep the shadow only.
- inner – set this to true to make your shadow appear only inside the object.
- knockout – set this to true to knockout the original shape and keep the shadow only.
- quality – The number of shadow duplicates used for the effect.
- strength – the intensity of the shadow. Ranges from 0 to 255.
Example of use:
var myShadow:DropShadowFilter = new DropShadowFilter();
myShadow.distance = 10;
myShadow.color = 0xFF0000;
myShadow.blurX = 10;
myShadow.blurY = 10;
myShadow.quality = 3;
my_mc.filters = [myShadow];
You can test this code to generate the following result:
Special Thanks : RepublicOfCode
You might also like
 |
 |
 |
 |
