[RESOLVED] Blur Background effect

[FlashDevSD]

Yahoo has a set of components that are ... nice.
Examples Here

One thing I really like about the Alert component is that it blurs everything that is behind the alert. I want to use this effect but not with an alert, and I'm not sure the best way of approaching this, any ideas?

[florianvanthuyn]

I think the Alertbox component automaticaly blurs out the background and everything on it, so it's not possible to see how that exact code works.

You could take a look here, at the Adobe Livedocs (you can find them via google).

Scroll down to see an example (after all the explanation), it's class based, but I'm sure you can get it to work on a normal timeline

Hope this helps you!

[FlashDevSD]

yeah i can use the blur filter dynamicly , programmaticly and all that jazz. But I am specifically looking for how they blur EVERYTHING below the alert box.... I dont think (or aleast hope) that they dont have to apply a blur effect to every item on the stage and then remove it.

[florianvanthuyn]

No, but what you can do is dynamicaly make a MC:

var myBlurMC:MovieClip = new MovieClip();
myBlurMC.width = stage.stageWidth;
myBlurMC.height = stage.stageHeight;

addChild(myBlurMC);

And then add the blurfilter to that MC.
You can set it's visible property to false or true, when you need it or not [I hope ].

Cheers

[FlashDevSD]

I got that, but i need to be able to in theory:
1) take screen grab of the flash stage, with all objects on it
2) add the screen grab in a movie clip
3) apply blur filter
4) addChild to the stage

I just not sure how to do step 1 and 2

[FlashDevSD]

so I got the blur filter to apply to everything the stage, by
var myHome:* = stage.getChildAt(0);
myHome.filters = [blurFilter];

How would you recommend applying the blur filter to all children below a specific mc?

[neznein9]

Blurring everything is as easy as targetting the stage:

filters = [new BlurFilter(8, 8, 1)]; 

but obviously that's going to fuzz your 'alert' or whatever on the top as well...the good news is that filters are inherited down the display tree so you only need to hit the children of the stage and skip the first one:

var BLUR:Array = [new BlurFilter(16, 16, 1)];

var i:int = this.numChildren - 1;
while(i > 0){
    i--;
    
    this.getChildAt(i).filters = BLUR;
} 

That will fuzz everything except the topmost z-index...you can use that and just replace 'this' with the level you want to work at and it will cascade automatically. One caveat: you're overwriting the filters property so any other effects will be destroyed when you run this.

[Cortana]

My CS3 Alert does a similar thing in that it takes a snapshot of the stage and applies a blur filter to that. Tha drawback with that is that if there is moving images you won't see it.

I had no idea someone else had already done a customizable Alert class. I'll have to accelerate production of the second version of my class!

[FlashDevSD]

So...how did you take a snapshop of the stage? I don't need an alert, I want to use it on a menu, like when its open blur everything behind it.

Nice work by the way!!!

[FlashDevSD]

Hey just dug through the code... got it what i wanted, thanks, YOU ROCK MAN!!!

What parameter would you adjust to make the color less intense?

[neznein9]

Do a search for desaturating via the colorMatrixFilter...or you could just throw up a flood-fill with a low alpha...

[FlashDevSD]

just change the multiplier value to 256 in the .merge.