Pop up components in Flex can be made translucent, but there's no obvious way to blur what's underneath the overlay in an iOS style.
Here's a Flex skin for the CallOut component that does exactly that. My BackgroundBlurGroup uses the draw() method of BitmapData to create a bitmap of the application underneath the callout, blur it and use it as its background. The hard work is contained in a single function - doBackgroundBlur().
The Flex skin, BlurryCallOutSkin, implements that component as its background, listens for move events on its host component and invalidates the blur when required.
The demonstration application shows how a callout can be bound to the mouse position and display the RGB value for any pixel in an image. It shows how the blur works not only on the background image, but on display objects (the three labels in the corners are Spark Labels) and that the blurring is quick enough to use in a moving widget.
The photograph was taken by me and is of the interior of The Cathedral of Berlin.
The source code is available here.
Very well implemented and surprisingly responsive; excellent Flex example.
ReplyDeleteThank you for sharing!
Cool!
ReplyDeletevery nice example, I would try pixel bender for that as a filter of the popup background
ReplyDeleteSadly, PixelBender is no more :(
DeleteFIOS
ReplyDelete