Blur image effect in Actionscript 3

I previously created a Blur image effect tutorial that used the timeline to create the blurred effect. This time I will create the same effect using only Actionscript 3.0. You will need the tweenMax plug-in for this tutorial which can be downloaded from: blog.greensock.com/tweenmax/.


Blur image effect in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import the image you wish to add the blur effect to by selecting File > Import > Import to Stage. You can alternatively create your own objects on the stage. I have used a free stock image that can be found at www.sxu.hu.




Step 2

Convert your image into a movie clip (F8) and give your movie clip an appropriate instance name. I have used the instance name: car_mc.




Step 3

Add a button component onto the stage by selecting Window > Component and drag the button component onto the stage. Then give the button the instance name: my_button. For more information on the button component take a look at this tutorial.


Step 4

On the timeline insert a new layer called Actions. Then open up the Actions panel and enter the following code.

//Imports the packages needed.
import flash.filters.BlurFilter;
import gs.*;
import gs.easing.*;

//Creates a new instance of the blur filter and adds the filter to the
//car movie clip.
var my_bf:BlurFilter=new BlurFilter(150,150,1);
car_mc.filters=[my_bf];

//Adds 'play' to the button label.
my_button.label="Play";

//Add an event listener with the mouse click event to the button.
my_button.addEventListener(MouseEvent.CLICK, blurEffect);

//Add the blur effect to the car and replay the effect.
function blurEffect(event:MouseEvent):void {
 if (my_button.label=="Play") {
     TweenMax.to(car_mc, 1, {blurFilter:{blurX:0, blurY:0, quality:1}});
     my_button.label="Replay";
 }
 else{
     car_mc.filters=[my_bf];
     my_button.label="Play";
 }
}

For more information on the blur filter checkout the AS3 blur filter Component reference.


Step 5

Test your blur image effect Ctrl + Enter.



You should now have a blur image effect in Actionscript 3.0.