Active Window Blur

I was checking out a website yesterday when it suddenly reminded me of a Pixelfumes experiment I remembered seeing many moons ago. After finding it with a quick Google search, just for kicks, I decided to play around and update the idea to AS3. I didn’t bother with the constant updating to accomadate video as that seemed a tad processor hungry, but it wouldn’t be difficult to implement at all. What I would rather do with it is make it possible to open several windows at once all masking the same background image. Maybe later on tonight.

Anyway here’s the script for interested parties. An example follows below. Thank you to Pixelfumes for the original idea and AS2 script.

WindowBlur.as:

package com.onebyonedesign.extras {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	/**
	* Blurs a background (MovieClip or Sprite) behind a transparent window (MovieClip or Sprite).
	* Based on Pixelfumes AS2 class
	* 
	* @author Devon O.
	*/
	public class WindowBlur {
		
		private var _background:DisplayObjectContainer;
		private var _window:DisplayObjectContainer;
		
		private var _blurredImageData:BitmapData;
		private var _blurredImage:Bitmap;
		private var _mask:DisplayObjectContainer;
		private var _blurAmount:int;
		
		private var _blur:BlurFilter;
		private var _point:Point = new Point();
		
		/**
		 * 
		 * @param	background		MovieClip or Sprite which will be blurred behind window.
		 * @param	window			(Semi) transparent MovieClip or Sprite behind which will be a blurred background.
		 * @param	blurAmount		The amount of blur to apply to background image.
		 * 
		 * NOTE: background and window objects *must* be added to display list before instantiating an instance of this class.
		 * TODO: allow multiple window instances with same background.
		 * FLASH BUG: 	If window instance is created programatically, it cannot have filters applied.
		 * 				If window instance is linked to MovieClip in library it CAN have filters applied.
		 */
		public function WindowBlur(background:DisplayObjectContainer, window:DisplayObjectContainer, blurAmount:int = 8 ):void {
			_background = background;
			_window = window;
			_blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;
			_blur = new BlurFilter(_blurAmount, _blurAmount, 3);
			
			initBlur();
			initMask();
		}
		
		private function initBlur():void {
			_blurredImageData = new BitmapData(_background.width, _background.height, false);
			_blurredImageData.draw(_background);
			_blurredImageData.applyFilter(_blurredImageData, _blurredImageData.rect, _point, _blur);
			_blurredImage = new Bitmap(_blurredImageData);
			
			_background.addChild(_blurredImage);
		}
		
		private function initMask():void {
			var MaskClass:Class = Object(_window).constructor;
			_mask = new MaskClass();
			_mask.filters = _window.filters;
			_blurredImage.mask = _mask;
			_mask.visible = false;
			
			_window.addChildAt(_mask, 0);
		}
		
		private function update():void {
			_background.removeChild(_blurredImage);
			_blurredImageData.dispose();
			initBlur();
			_blurredImage.mask = _mask;
		}
		
		public function kill():void {
			_background.removeChild(_blurredImage);
			_window.removeChild(_mask);
			
			_blurredImageData.dispose();
			
			_blurredImage = null;
			_blurredImageData = null;
			_mask = null;
			_blur = null;
		}
		
		public function get blurAmount():int { return _blurAmount; }
		
		public function set blurAmount(value:int):void {
			_blurAmount = value;
			_blur.blurX = _blur.blurY = _blurAmount;
			update();
		}
	}
}

package com.onebyonedesign.extras {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.DisplayObjectContainer;

import flash.display.Sprite;

import flash.events.Event;

import flash.filters.BlurFilter;

import flash.geom.Point;

import flash.geom.Rectangle;

/**

* Blurs a background (MovieClip or Sprite) behind a transparent window (MovieClip or Sprite).

* Based on Pixelfumes AS2 class

* @author Devon O.

public class WindowBlur {

private var _background:DisplayObjectContainer;

private var _window:DisplayObjectContainer;

private var _blurredImageData:BitmapData;

private var _blurredImage:Bitmap;

private var _mask:DisplayObjectContainer;

private var _blurAmount:int;

private var _blur:BlurFilter;

private var _point:Point = new Point();

/**

* @param background MovieClip or Sprite which will be blurred behind window.

* @param window (Semi) transparent MovieClip or Sprite behind which will be a blurred background.

* @param blurAmount The amount of blur to apply to background image.

* NOTE: background and window objects *must* be added to display list before instantiating an instance of this class.

* TODO: allow multiple window instances with same background.

* FLASH BUG: If window instance is created programatically, it cannot have filters applied.

* If window instance is linked to MovieClip in library it CAN have filters applied.

public function WindowBlur(background:DisplayObjectContainer, window:DisplayObjectContainer, blurAmount:int = 8 ):void {

_background = background;

_window = window;

_blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;

_blur = new BlurFilter(_blurAmount, _blurAmount, 3);

initBlur();

initMask();

}

private function initBlur():void {

_blurredImageData = new BitmapData(_background.width, _background.height, false);

_blurredImageData.draw(_background);

_blurredImageData.applyFilter(_blurredImageData, _blurredImageData.rect, _point, _blur);

_blurredImage = new Bitmap(_blurredImageData);

_background.addChild(_blurredImage);

}

private function initMask():void {

var MaskClass:Class = Object(_window).constructor;

_mask = new MaskClass();

_mask.filters = _window.filters;

_blurredImage.mask = _mask;

_mask.visible = false;

_window.addChildAt(_mask, 0);

}

private function update():void {

_background.removeChild(_blurredImage);

_blurredImageData.dispose();

initBlur();

_blurredImage.mask = _mask;

}

public function kill():void {

_background.removeChild(_blurredImage);

_window.removeChild(_mask);

_blurredImageData.dispose();

_blurredImage = null;

_blurredImageData = null;

_mask = null;

_blur = null;

}

public function get blurAmount():int { return _blurAmount; }

public function set blurAmount(value:int):void {

_blurAmount = value;

_blur.blurX = _blur.blurY = _blurAmount;

update();

}

Main.as (document class):

package {
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import com.onebyonedesign.extras.WindowBlur;
	import com.onebyonedesign.ui.OBO_ValueSlider;
	import com.onebyonedesign.ui.events.ValueSliderEvent;
	import flash.geom.Rectangle;
	import flash.text.AntiAliasType;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	/**
	* Demonstrates WindowBlur Class
	* @author Devon O.
	*/
	public class Main extends Sprite {
		
		// GraphicWindow is MovieClip in .fla library
		private var _window:GraphicWindow;
		// Background is MovieClip in .fla library
		private var _bg:Background;
		private var _windowBlur:WindowBlur;
		private var _shadow:DropShadowFilter = new DropShadowFilter(2, 90, 0x000000, 1, 2, 2, 1, 3);
		private var _dragBounds:Rectangle;
		
		public function Main():void {
			// Background is MovieClip in .fla library
			_bg = new Background();
			addChild(_bg);
			init();
		}
		
		private function init():void {
			initWindow();
			initBlur();
			initControlPanel();
		}
		
		private function initWindow():void {
			// GraphicWindow is MovieClip in library
			_window = new GraphicWindow();
			_window.x = int(stage.stageWidth * .5 - _window.width * .5);
			_window.y = int(stage.stageHeight * .5 - _window.height * .5);
			_window.filters = [_shadow];
			
			_dragBounds = new Rectangle(0, 0, stage.stageWidth - _window.width, stage.stageHeight - _window.height);
			
			addChild(_window);
			_window.addEventListener(MouseEvent.MOUSE_DOWN, pressHandler);
		}
		
		private function initBlur():void {
			_windowBlur = new WindowBlur(_bg, _window);
		}
		
		private function initControlPanel():void {
			var cp:Sprite = new Sprite();
			cp.graphics.beginFill(0xEAEAEA);
			cp.graphics.drawRoundRect(0, 0, 150, 30, 10, 10);
			cp.graphics.endFill();
			cp.filters = [_shadow];
			cp.x = 10;
			cp.y = stage.stageHeight - cp.height - 10;
			
			var tf:TextField = new TextField();
			var fmt:TextFormat = new TextFormat("_sans", 11);
			tf.defaultTextFormat = fmt;
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.selectable = false;
			tf.mouseEnabled = false;
			tf.antiAliasType = AntiAliasType.ADVANCED;
			tf.text = "Blur amount:";
			tf.x = 5;
			tf.y = 5;
			cp.addChild(tf);
			
			var blurSlider:OBO_ValueSlider = new OBO_ValueSlider(tf.textWidth, 0, 64, _windowBlur.blurAmount);
			blurSlider.x = tf.x + tf.textWidth + 8;
			blurSlider.y = 13;
			blurSlider.addEventListener(ValueSliderEvent.DRAG, blurChangeHandler);
			cp.addChild(blurSlider);
			
			addChild(cp);
		}
		
		private function blurChangeHandler(event:ValueSliderEvent):void {
			_windowBlur.blurAmount = int(event.value);
		}
		
		private function pressHandler(event:MouseEvent):void {
			stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandler);
			_window.startDrag(false, _dragBounds);
		}
		
		private function releaseHandler(event:MouseEvent):void {
			stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler);
			_window.stopDrag();
		}
	}
	
}

100

101

102

103

104

105

package {

import flash.display.MovieClip;

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.filters.DropShadowFilter;

import com.onebyonedesign.extras.WindowBlur;

import com.onebyonedesign.ui.OBO_ValueSlider;

import com.onebyonedesign.ui.events.ValueSliderEvent;

import flash.geom.Rectangle;

import flash.text.AntiAliasType;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;

/**

* Demonstrates WindowBlur Class

* @author Devon O.

public class Main extends Sprite {

// GraphicWindow is MovieClip in .fla library

private var _window:GraphicWindow;

// Background is MovieClip in .fla library

private var _bg:Background;

private var _windowBlur:WindowBlur;

private var _shadow:DropShadowFilter = new DropShadowFilter(2, 90, 0x000000, 1, 2, 2, 1, 3);

private var _dragBounds:Rectangle;

public function Main():void {

// Background is MovieClip in .fla library

_bg = new Background();

addChild(_bg);

init();

}

private function init():void {

initWindow();

initBlur();

initControlPanel();

}

private function initWindow():void {

// GraphicWindow is MovieClip in library

_window = new GraphicWindow();

_window.x = int(stage.stageWidth * .5 - _window.width * .5);

_window.y = int(stage.stageHeight * .5 - _window.height * .5);

_window.filters = [_shadow];

_dragBounds = new Rectangle(0, 0, stage.stageWidth - _window.width, stage.stageHeight - _window.height);

addChild(_window);

_window.addEventListener(MouseEvent.MOUSE_DOWN, pressHandler);

}

private function initBlur():void {

_windowBlur = new WindowBlur(_bg, _window);

}

private function initControlPanel():void {

var cp:Sprite = new Sprite();

cp.graphics.beginFill(0xEAEAEA);

cp.graphics.drawRoundRect(0, 0, 150, 30, 10, 10);

cp.graphics.endFill();

cp.filters = [_shadow];

cp.x = 10;

cp.y = stage.stageHeight - cp.height - 10;

var tf:TextField = new TextField();

var fmt:TextFormat = new TextFormat("_sans", 11);

tf.defaultTextFormat = fmt;

tf.autoSize = TextFieldAutoSize.LEFT;

tf.selectable = false;

tf.mouseEnabled = false;

tf.antiAliasType = AntiAliasType.ADVANCED;

tf.text = "Blur amount:";

tf.x = 5;

tf.y = 5;

cp.addChild(tf);

var blurSlider:OBO_ValueSlider = new OBO_ValueSlider(tf.textWidth, 0, 64, _windowBlur.blurAmount);

blurSlider.x = tf.x + tf.textWidth + 8;

blurSlider.y = 13;

blurSlider.addEventListener(ValueSliderEvent.DRAG, blurChangeHandler);

cp.addChild(blurSlider);

addChild(cp);

}

private function blurChangeHandler(event:ValueSliderEvent):void {

_windowBlur.blurAmount = int(event.value);

}

private function pressHandler(event:MouseEvent):void {

stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandler);

_window.startDrag(false, _dragBounds);

}

private function releaseHandler(event:MouseEvent):void {

stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler);

_window.stopDrag();

}

52 Comments:

Nice work! I’ll have to do a cross post on this one ;)

Ben · July 13, 2008
Looks great ! I was looking for a way to do this just the other day, thanks

Marc Pelland · July 14, 2008
Thank you for the comments, Ben and Marc. You might also want to check out the post after the next post (“Active Window(S) Blur”).. I came up with a way that will allow multiple windows blurring the same background. Uses an enter frame event though which I’m not really happy about..

Devon O. · July 15, 2008
Hello,
Very good effect =)
In the last week, I have to make this effect in a
temporarily website.
Today, I see your blog and I wish to kill me….lol
My blur mask is very good too, but i did doubling my image with blur and applying a mask.
Congratulations, your blog is very nice.
Sorry my terrible English …lol

Yves · August 27, 2008
Hello Yves.. Doubling the image and using a mask is essentially the same thing I did here. The effect on your site looks quite nice..
Thank you for the comments. And I can guarantee you that your English is much better than my Portuguese..

Devon O. · August 29, 2008
NOTE:

If you copy and paste from the WindowBlur.as source above it will not compile.

This line has a space between the < and the = in the = 0 && blurAmount = 0 && blurAmount <= 255) ? blurAmount : 16;

Skye · September 08, 2008
Doh, it appears the comment submission didn’t escape the greaterthan and less than characters. Let’s try again:
NOTE:
If you copy and paste from the WindowBlur.as source above it will not compile.
This line has a space between the < and the = in the <= comparison operator:
_blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;

It should read:
_blurAmount = (blurAmount >= 0 && blurAmount <= 255) ? blurAmount : 16;

Skye · September 08, 2008
Hi. Great class, it;s saved me a ton of hassle. Any ideas though why only a small section of my stage gets blurred? Is there something I need to do to alter the size of the allowed blur area?

But yeah, sweet class. :)

Andrew · November 28, 2008
Nice class – how do I get it to work over a video? I’ve tried h264 (NetStream), FLV (FLVPlayback Component and embedded on stage) – and it shows up as a solid square when dragged over the video. Any advice?

Thanks

Jonathan · December 10, 2008
Is there an FLA download

t · December 29, 2008
Hey folks,
When I use an fla to call the Main.as I get two errors in the WindowBlur.as

**Error** WindowBlur.as, Line 45: 1084: Syntax error: expecting identifier before assign.
_blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;

**Error** WindowBlur.as, Line 46: 1084: Syntax error: expecting rightparen before _blur.
_blur = new BlurFilter(_blurAmount, _blurAmount, 3);

can anyone help

tim · December 29, 2008
there is a download here: http://www.onebyonedesign.com/downloads/window_blur.zip – it doesn’t include the ValueSlider however. You can either replace it with your own component or download the full UI library here: http://www.onebyonedesign.com/flash/ui/ . Hope it helps out..

Devon O. · December 30, 2008
Outstanding work. It apparently does not work over video however. Has this been fixed?

Villmer · January 09, 2009
I don’t know if it’s a case of considering it “fixed” or not as it was never intended to work with video. Check out the link to the Pixelfumes blog at the top of the post. His AS2 version works with video – you could just do a port to AS3 as I did..

Devon O. · January 11, 2009
this is a great port to as3 of the mighty pixelfumes code.
i was planning to do something similar in one of my as3 projects and google brought me to you.

i tried looking at the example zip file & it gives a ‘unexpected file format’ error.

any chnage a repost of the zip ? or is it just me.. :o)

MUX · January 14, 2009
ps. dont worry i got your second example to work..
great job..

MUX · January 14, 2009
Very nice code.

Could i have, please, a .fla version where the main.as class is not linked in the document property, where i can call directly from the actionscript code?.

Thank you very much

Davide · July 10, 2009
I m trying to implement this effect on one of my websites, I do not have access to the libraries

import com.onebyonedesign.ui.OBO_ValueSlider;
import com.onebyonedesign.ui.events.ValueSliderEvent;

Is there anyway to import them from somewhere..I think the effect is worth it

Carlos Ramirez · January 12, 2010
Hey Carlos, those are classes from a package of ui items I put together long ago. You can see examples of all the items and download them here: http://www.onebyonedesign.com/flash/ui/

Devon O. · January 13, 2010
I don’t think the OBO classes work…

I posted about them in Devon’s Kirupa Source/Experiments page, but no response.

BHJodoKast · February 18, 2010
which classes are you having problems with, BHJodoKast? All of them should work fine.

Devon O. · February 19, 2010
_blurAmount = (blurAmount >= 0 && blurAmount = 0 && blurAmount <= 255) ? blurAmount : 16;

also, unfortunaly this doesnt work with multiple windows masking the same bg yet..

92Garfield · July 31, 2010
hey 92garfield. I’m not sure what is meant by the first question but for multiple windows on the same bg, try this post: https://blog.onebyonedesign.com/actionscript/active-windows-blur/

Devon O. · July 31, 2010

1 2 Next »

Jiglibflash + Augmented Reality (Take Two)

Gone Bowling

Starling Filter Collection

52 Comments:

Leave a Comment! Cancel reply

Devon O. Wolfgang

Categories

Recent Comments

Archives