Flash 8 Active Blur - Blur Behind a Transparent Object - Source Available
**UPDATE: New Version here.
With Windows Vista coming out there is a lot of attention on the new UI and "glass". In the picture above you can see through part of the window. It obviously is semi-transparent. Now that is easy enough to do in Flash - right? But what I noticed is that it also gives a slight blur to what is behind the window as well. That made me wonder - could the same be done easily in Flash?
What I have below here is a proof of concept of the technique. It uses the BitmapData class and the BlurFilter class. You can drag the little semi-transparent window around and even edit the text behind the window in real time. Adjust the amount of blur the window casts at the bottom. You can download the source here.
This currently isn't in a class structure and could definitely be made a bit more efficient - but then again - this is web 2.0 - consider this beta. I would love to see if anyone makes anything cool with this so let me know. Hope you like it:

Very good work , i've tried to do that myself without success :)
Posted by
Smith |
11:40 AM
awesome!
Posted by
fenin |
12:47 PM
I like how it even blurs when you highlight the text!
Awesome Job!
Posted by
fatjester |
5:43 PM
I modded your code a wee bit to save the cpu overhead each frame:
import flash.display.BitmapData;
import flash.filters.BlurFilter;
var dragging:Boolean=false;
window_mc.onPress = function(){
dragging=true;
startDrag(this);
}
window_mc.onRelease = function(){
dragging=false;
stopDrag();
}
//copy the bg
bgSnap = new BitmapData(bg_mc._width,bg_mc._height);;
//create a mask
duplicateMovieClip(window_mc.windowBg_mc,"bgMask",1);
//set mask
window_mc.snapHolder_mc.setMask(window_mc.windowBg_mc);
//apply blur
window_mc.snapHolder_mc.filters = [new BlurFilter(10,10,2)];
updateWindow=function(){
bgSnap.draw(bg_mc);
window_mc.snapHolder_mc.attachBitmap(bgSnap,1);
window_mc.snapHolder_mc._x =window_mc._x*-1;
window_mc.snapHolder_mc._y =window_mc._y*-1;
}
//setup loop
window_mc.onEnterFrame = function(){
if(dragging){
updateWindow();
}
}
updateWindow();
Posted by
Mike Duguid |
7:37 PM
better use onMouseMove insted of onEnterFrame.
just look when user take the window and then activate onMouseMove
dont forget about updateAfterEvent();
Posted by
Eugene |
4:22 AM
Yeah good job!
Posted by
Tink |
6:41 AM
Hey you "Mouse Movers" hehe. The original code used onMouseMove but what if there was an animation behind the window? Then the onMouseMove would only update the see-through bg onMouseMove - that wouldn't work to well. Granted that this example could use it - but I was thinking about portability. Thanks for the comments though!
-Sarg
Posted by
Sarge |
10:03 AM
Hi !
Your sample is very good BUT clone() is better than duplicateMovie :)
Here an other kind of code to do your effect :
import flash.filters.BlurFilter;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
var bd0:BitmapData = new BitmapData(tf._width, tf._height, true, 0);
bd0.draw(tf);
tf._visible = false;
this.attachBitmap(bd0, 10);
var bd1:BitmapData = bd0.clone();
var _blur:BlurFilter = new BlurFilter(10, 10, 2);
function _onEnterFrame() {
bd0.copyPixels(bd1, _destination, _destination.topLeft);
_source = new Rectangle(_xmouse, _ymouse, 30, 30);
_destination = bd0.generateFilterRect(_source, _blur);
bd0.applyFilter(bd1, _source, _source.topLeft, _blur);
}
setInterval(_onEnterFrame, 10);
Regards,
JP
http://jeanphiblog.media-box.net/
Posted by
Anonymous |
3:07 AM
Hi
this post is very useful for me :)
thank you very much
Posted by
Flashmate (Ahmad Azimi) |
11:28 PM
Is it possible that if you scale the window the blur doesn't scale?
Posted by
mitchel |
6:13 PM
Its great.... got something to learn also..
Posted by
Anish |
1:58 AM
great effect!
nobody knows how can apply this effect to a Canvas or any other component in a flex app?
it wold be nice to see this effect in as3
best regards!
Posted by
carlos garza |
5:11 AM
dude i have been trying that for so damn long that its not even funny.... congrats, this is amazing work. i think i'm gonna use this in my site, with your permission of course.
Posted by
Anonymous |
5:20 AM
Go for it! ;)
Posted by
Sarge |
8:20 AM
Does anyone know how to get more than one drag window including depth swap?
Nice job.
Cheers
Jen
Posted by
Anonymous |
9:55 AM
Amazing trick, but i have a simple question, how can i resize the glash window preserving the effect? what i want to do is to make a resize tween and get the background updated among the effect...
(sorry for my english if my explanation is not very clear...)
Best regards, and many thanks in advance,
Posted by
FiDo |
8:48 PM
C'mon, anyone has any idea about how to resize dinamically the window preserving the background?? I think that snapHolder_mc must be resized among window_mc but i don't know how...
I've tried this:
window_mc.onEnterFrame = function(){
this.snapHolder_mc._x = this._x*-1;
this.snapHolder_mc._y = this._y*-1;
this.snapHolder_mc._width = this._width;
this.snapHolder_mc._height = this._height;
this.snapHolder_mc.attachBitmap(bgSnap,1);
}
but it doesn't work :S
Posted by
Anonymous |
4:42 AM
Sweet Jesus thanks for this! I can't stop playing with the blur! PERFECT!
Posted by
Anonymous |
9:33 PM
Cool! Very nice work!
Posted by
Anonymous |
7:36 PM
Woa pretty cool.
A friend of mine just send me the link and it is pretty close to some little experiment I made some time ago.
View:
http://chrisbenjaminsen.com/stuff/windowblur.swf
Source:
http://chrisbenjaminsen.com/stuff/windowblur.fla
Mine supports several windows and such :)
Posted by
Chris |
2:44 PM
How would I get the windows to keep centered on resize?
Thanks in advanced.
Posted by
Anonymous |
2:04 PM
Everytime I try to publish this in CS3 my Flash crashes. Is there an update dversion of this?
Posted by
mfalzone |
6:27 PM
No updated version of this but there is no way it should make your Flash CS3 crash. My Flash CS3 crashes all of the time - seems like when it feels like it. It could be related to memory usage? Sorry to be of little help here. Also, please note this was experimental and not necessarily meant for production use.
Posted by
Ben |
8:03 PM