Sunday, 25 October 2009

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:

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

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);

//Adds 'play' to the button label.

//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") {, 1, {blurFilter:{blurX:0, blurY:0, quality:1}});
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.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP