Since I just worked with the BevelFilter class, I thought I would easily turn it over to the BlurFilter class. Don’t forget that these filters may also be applied to movieclips and textfields, not just images.
Here is the document class, named BlurFilterDemo.as:
package
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class BlurFilterDemo extends Sprite
{
private var loadStatus:TextField;
private var myImg:Loader = new Loader();
private var distance_ct:Number = 100;
public function BlurFilterDemo()
{
init();
}
private function init():void
{
// get the preloader text box ready
CreateTextField();
// let's load the image
try {
myImg.load(new URLRequest("http://manewc.com/projects/flash/BlurFilter/gahlord.jpg"));
} catch (error:Error) {
loadStatus.text = "Unable to load requested document.";
}
myImg.contentLoaderInfo.addEventListener(Event.OPEN,open);
myImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progress);
myImg.contentLoaderInfo.addEventListener(Event.COMPLETE,result);
}
public function open(evt:Event):void
{
loadStatus.text = "Opening File";
}
public function progress(evt:ProgressEvent):void
{
loadStatus.text = "loading: " + evt.bytesLoaded + " bytes out of " + evt.bytesTotal;
}
public function result(evt:Event):void
{
loadStatus.text = " -> FULLY LOADED -> press your mouse down over the image to view effect";
addChild(myImg);
myImg.y = loadStatus.height;
myImg.x = (stage.stageWidth / 2) - (myImg.width / 2);
// since the image is loaded.. we will just blur it
// add the listeners
addEventListener(MouseEvent.MOUSE_DOWN, ApplyChangeBlur);
addEventListener(MouseEvent.MOUSE_UP, RemoveChangeBlur);
}
private function CreateTextField():void
{
loadStatus = new TextField();
loadStatus.autoSize = TextFieldAutoSize.LEFT;
loadStatus.background = false;
loadStatus.border = false;
var format:TextFormat = new TextFormat();
format.font = "Arial";
format.color = 0xffffff;
format.size = 10;
format.underline = false;
loadStatus.defaultTextFormat = format;
addChild(loadStatus);
}
private function ApplyChangeBlur(e:MouseEvent):void
{
stage.addEventListener(Event.ENTER_FRAME,changeBlur);
}
private function RemoveChangeBlur(e:MouseEvent):void
{
stage.removeEventListener(Event.ENTER_FRAME,changeBlur);
}
private function changeBlur(e:Event):void
{
if (distance_ct >= 0)
{
distance_ct--;
}
else
{
distance_ct = 100;
}
// Apply the blur filter to the rectangle.
var blur:BlurFilter = new BlurFilter();
blur.blurX = distance_ct;
blur.blurY = distance_ct;
blur.quality = BitmapFilterQuality.MEDIUM;
myImg.filters = [blur];
}
}
}
made some slight changes introduced the timer for timer based animation on the load event, added ability to fade in or out. thanks for the great example! Very well done.
package {
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.events.ProgressEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.utils.*;
public class BlurTransition extends Sprite {
private var loStatus:TextField;
private var loImageLoader:Loader = new Loader();
private var lnDistance:Number = 20;
public var loTimer:Timer = new Timer(40); //default interval
public function BlurTransition(){
this.Blur();
}
private function Blur():void {
CreateTextField(); // preloader text box
try {
this.loImageLoader.load(new URLRequest(”home.gif”));
} catch (loError:Error) {
this.loStatus.text = “Unable to load requested document.”;
}
this.loImageLoader.contentLoaderInfo.addEventListener(Event.OPEN, this.openEvents);
this.loImageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, this.progressEvents);
this.loImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.loadCompleteEvents);
}
public function openEvents(loEvent:Event):void {
this.loStatus.text = “Opening File”;
}
public function progressEvents(loEvent:ProgressEvent):void {
this.loStatus.text = “loading: ” + loEvent.bytesLoaded + ” bytes out of ” + loEvent.bytesTotal;
}
public function loadCompleteEvents(loEvent:Event):void {
this.loStatus.text = ” -> FULLY LOADED -> press your mouse down over the image to view effect”;
this.loImageLoader.y = this.loStatus.height;
this.loImageLoader.x = (stage.stageWidth / 2) – (this.loImageLoader.width / 2);
this.applyBlurFilter(); //initialze blur prior to render
addChild(this.loImageLoader); //display image
//blur into focus
this.loTimer.addEventListener(”timer”, this.BlurIn);
this.loTimer.start();
//blur into focus
}
public function BlurIn(eventArgs:TimerEvent) { //this.loTimer.currentCount;
if (this.lnDistance>=0){
this.lnDistance–;
} else {
this.loTimer.stop();
}
this.applyBlurFilter();
}
public function BlurOut(eventArgs:TimerEvent) {
if (this.lnDistance<100){
this.lnDistance++;
} else {
this.loTimer.stop();
}
this.applyBlurFilter();
}
private function applyBlurFilter():void {
var loBlurFilter:BlurFilter = new BlurFilter(); // Apply the blur filter
loBlurFilter.blurX = this.lnDistance;
loBlurFilter.blurY = this.lnDistance;
loBlurFilter.quality = BitmapFilterQuality.HIGH;
this.loImageLoader.filters = [loBlurFilter];
}
private function CreateTextField():void {
this.loStatus = new TextField();
this.loStatus.autoSize = TextFieldAutoSize.LEFT;
this.loStatus.background = false;
this.loStatus.border = false;
var format:TextFormat = new TextFormat();
format.font = “Verdana”;
format.color = 0xffffff;
format.size = 10;
format.underline = false;
this.loStatus.defaultTextFormat = format;
addChild(this.loStatus);
}
}
}