Blur text effect in Actionscript 3

I create the blur text effect tutorial back in 2008 where I used the timeline and the filters panel. I will now recreate the same effect using Actionscript 3 code and the TweenMax plugin which can be download from greensocks.com


Step 1

Open a new AS3 file and select the Text tool with static text and type a message on the stage. Then convert your message into a movie clip (F8) and give the instance name: myText_mc.


Step 2

Add the following code in the Actions panel (F9).

//Imports the packages needed for the blur fiter
//and the TweenMax plugin.
import flash.filters.BlurFilter;
import com.greensock.*

//This creates a new instance of the blur filter
//with 100 for the blurX value, 5 for the blurY value 
//and 1 for the quality. And adds the filter to
//the text movie clip.
var bf:BlurFilter = new BlurFilter(100,5,1);
myText_mc.filters= [bf];


//This removes the blurX and blurY by tweening 
//both the values to 0. 
TweenMax.to(myText_mc, 1, {blurFilter:{blurX:0, blurY:0}});

You can also set a delay for the tween by using ‘delay’ property. For more information on the BlurFilters class take a look at the documentation here.