AS 3.0 blur filter using the Tween classes.

Here’s another AS 3.0 test I scripted up just for fun. As you know the Tween engine in flash will only allow you to tween properties of a MovieClip. I on the other hand have been using the tween classes to tween filters and just recently transform color. It’s just another way to create an animation with out an OnEnterFrame Event or using the Timer Event. The example below loads up an image in a blurry state and tweens it into the actual image. I set up a Timer in the Main.as that triggers the image to go from a clear image state to a blurred out and remove state, then the fun just starts all over again.

All you need to do is create an .fla assign Main.as as the Document class and make sure that all corresponding files are in the same file folder including the image. Below are the two classes:

Main.as

package{
import flash.display.*;
import flash.utils.*;

public class Main extends Sprite{

private var blurImg:BluryImage;
private var intervalId:uint;

public function Main():void
{
blurImg = new BluryImage("image.jpg");
blurImg.x = 110;
blurImg.y = 35;
blurImg.loadImage();
addChild(blurImg);
startBlurOutInterval();
}

private function startBlurOutInterval() {
clearInterval(intervalId);
intervalId = setInterval(blurOut, 10000);
}
private function blurOut():void
{
clearInterval(intervalId);
blurImg.blurType="blur_out";
blurImg.animateBlur();
intervalId = setInterval(startOver, 10000);
}
private function startOver():void
{
blurImg.loadImage();
blurImg.blurType="blur_in";
startBlurOutInterval();
}

}

BluryImage.as

package {
import flash.display.*;
import flash.events.Event;
import flash.net.URLRequest;
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;

public class BluryImage extends Sprite
{

private var img:Loader;
private var typeOfBlur:String;
private var emptyClip:MovieClip;
private var tw:Tween;
private var blur:BlurFilter;
private var imagePath:String;

public function BluryImage(imgPath:String,typeOBlur:String="blur_in"):void
{
typeOfBlur = typeOBlur;
imagePath = imgPath;
blur = new BlurFilter();

}

public function set blurType(inBlur:String):void
{
typeOfBlur = inBlur;
}

public function get blurType():String
{
return typeOfBlur;
}

public function loadImage():void
{

img = new Loader();
img.contentLoaderInfo.addEventListener(Event.INIT,initImage);
img.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoaded);

try {
img.load(new URLRequest(imagePath));
} catch (error:Error) {
trace("IOErrorEvent catch: " + error);

}
}

public function animateBlur():void
{
emptyClip = new EmptyMovie();
addChild(emptyClip);
if(typeOfBlur == "blur_in"){
emptyClip.x = 255;
tw = new Tween(emptyClip, "x", None.easeIn, 255, 0, 3, true);
}else{
emptyClip.x = 0;
tw = new Tween(emptyClip, "x", None.easeIn, 0, 255, 3, true);
}
tw.addEventListener(TweenEvent.MOTION_CHANGE, blurObject);
tw.addEventListener(TweenEvent.MOTION_FINISH, cleanUp);
}

private function initImage(evt:Event):void
{
addChild(img.content);
if(typeOfBlur == "blur_in"){
blur.blurX = 255;
blur.blurY = 255;
}else{
blur.blurX = 0;
blur.blurY = 0;
}
blur.quality = BitmapFilterQuality.MEDIUM;
img.content.filters = [blur];
}

private function imageLoaded(evt:Event):void
{
animateBlur();

}

private function cleanUp(e:TweenEvent):void
{
removeChild(emptyClip);
tw.removeEventListener(TweenEvent.MOTION_CHANGE, blurObject);
tw.removeEventListener(TweenEvent.MOTION_FINISH, cleanUp);

if(typeOfBlur == "blur_out"){
removeChild(img.content)
}
}

private function blurObject(e:TweenEvent):void
{

var val = Math.floor(e.position);
blur.blurX = val;
blur.blurY = val;
blur.quality = BitmapFilterQuality.MEDIUM;
img.content.filters = [blur];

}

}

}

Essentially, you can take the class and refine it so that you only pass an object /image which it will blur. I added the loading just as a test, I would separate the loading from the blurring.
Enjoy!

Download Source:
LoadAndBlur (405)

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: