You are viewing the archives of the original Pixelfumes blog. This blog is no longer maintained. All of the content available on this site is available on the new Pixelfumes blog in addition to all of our new posts! Visit: http://blog.pixelfumes.com.

« Home | 10th Anniversary of Flash Animation by Nectarine » | Fullscreen Webcam with Live Reflection Using New F... » | Flash onSoundLoad Event Bug - Not Firing » | Fullscreen Flash 9 - Look Ma, No Chrome! » | Modified Version of My Seamless Background Class » | SnapShot With Class Source » | iTunes 7 and the Death of My iTunes Album Art Appl... » | DHTML Version of Modal Desaturation » | Flash 8 Version of the Modal Pop-up Desaturation T... » | PittMFUG Podcast with Special Call from Denmark » 

Thursday, October 12, 2006 

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 :)

awesome!

I like how it even blurs when you highlight the text!
Awesome Job!

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();

better use onMouseMove insted of onEnterFrame.
just look when user take the window and then activate onMouseMove
dont forget about updateAfterEvent();

Yeah good job!

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

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/

Hi
this post is very useful for me :)
thank you very much

Is it possible that if you scale the window the blur doesn't scale?

Its great.... got something to learn also..

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!

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.

Go for it! ;)

Does anyone know how to get more than one drag window including depth swap?
Nice job.
Cheers
Jen

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,

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

Sweet Jesus thanks for this! I can't stop playing with the blur! PERFECT!

Cool! Very nice work!

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 :)

How would I get the windows to keep centered on resize?

Thanks in advanced.

Everytime I try to publish this in CS3 my Flash crashes. Is there an update dversion of this?

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.

Post a Comment