On a project I’m working on, I need to have semi-transparent containers to hold controls over top of screen-filling bright and colorful background. While I’m not 100% satisfied with it, I think it will suffice for the time being.

I was originally going for an effect similar to the window borders in Windows 7 where the background image is blurred when viewed through the glass. I couldn’t find an easy way to do that effect in Flex 4. If you know of a way, please comment below.

Live Demo – Right-Click to View Source

Post to Twitter

Posted by Andrew, filed under as3, Flex. Date: July 31, 2010, 11:03 pm | 2 Comments »

2 Responses

  1. Rob Sheely Says:

    How about:

    1) Add a bitmap layer below the background layer of the SmokedGlassSkin.

    2) Do a bitmapData.draw() from the application to the bitmap layer.

    3) Blur the bitmap layer.

    4) Add a rect the same size and position of the background layer. Set it as the mask of the bitmap layer.

  2. dave Says:


    I really liked your interactive map. Really nice to see such inspiring examples, I did get stuck in the driving directions section as you cannot navigate back to the app when you fail to get directions or decide not to continue, but thats a minor aside.

    About your blurring background image on the smoked glass effect , can you use the bitMapData class to getPixels under the overlaid panel , then say use applyFilter() to apply a blur to the selected area’s pixels ? Just an idea .

    Thanks for showing you’re great work, if you get a chance please see http://www.musicfortheworkers.com and any comments would be great to recieve, its far from perfect and any advice would be really welcome.

Leave a Comment

Your comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.