Dynamic Frosted Glass Effect

[riveroaks]

I would like to create a text panel that displays over a background image, and I would like to give this text panel a frosted glass look. That is, the text panel would appear translucent while blurring the image behind it. However, this text panel needs to be able to move around and still maintain the effect - so I can't just create a static effect in Photoshop and import the image into Flash.

I think this effect is used a lot in Vista but I'm not sure because I'm still running XP. But does anyone know how to acheive this in Flash at runtime? All I can think of right now is to maybe extract the BitmapData which lays directly behind the text panel, create a Bitmap from the BitmapData, blur that Bitmap, then pass this into the text panel....but I have a feeling that will be processor intensive at runtime....and honestly I don't even know if that would work.

[snickelfritz]

Create a copy of your image and blur it in Photoshop.
Place it on top of the sharp image in Flash.
Use a mask for your text panel.
Moving the mask will create the illusion that the panel is blurring the background image.
In reality it is simply revealing a blurred copy of the background image.

Here's an example of a similar effect, in reverse: (the rectangle reveals a sharp image)
http://www.byrographics.com/AS3/blurDragger/example12.html

[riveroaks]

Unfortunately this Flash site is going to use a fluid layout, so certain elements in the background will also be moving based on the browser dimensions. Therefore, I have no knowledge of what the "final" background will look like at any given time. I was kind of hoping that Flash offered some obscure functionality for manipulating pixels that display through a translucent image.

[glosrfc]

I was kind of hoping that Flash offered some obscure functionality for manipulating pixels that display through a translucent image.

It does...it's called masking and the blurfilter:
http://blog.pixelfumes.com/?p=132
http://blog.pixelfumes.com/?p=153
http://blog.onebyonedesign.com/?p=81
http://blog.onebyonedesign.com/?p=83