After browsing through the blogosphere, i came across this rather interesting OpenLaszlo-related post on the Doinet blog. It seems that they’ve managed to get a nice blur to appear behind their dialog boxes, which replicates what happens in Flex when a dialog appears.

Sadly i couldn’t post any comment on their blog, as i got a “403 – Not Japanese” error back. Annoyances aside, i quickly managed to figure out how they were achieving this rather simple effect.

It basically boils down to this:

<method name="doBlur">
// Get the filter list for this view
var myTempFilters = [];

// Create the blur filter and put it on the list of filters
var myBlur = new flash.filters.BlurFilter();
myTempFilters.push(myBlur); ;

// Set the filter for this view
this.sprite.__LZmovieClipRef.filters = myTempFilters;
</method>

To achieve the whole dialog effect, you basically need to insert a view on top of all the other elements in your UI, then call the “doBlur” method on it. You can then place your dialog on top of that view and you shall have your Flex-style dialog blur effect!

There are many effects you can play around with. For instance there is a “DropShadowFilter” which can be used to create a drop shadow effect for the dialog box.

Of course, there are a few snags. The most notable one is that you need to make sure you select the “swf8” (i.e. Flash 8) target instead of the default “swf7” (i.e. Flash 7). In addition there is no direct equivalent for flash filters in any of the other runtimes, so in the case of the blur filter you’ll have to resort to falling back to a boring old transparent overlay.

Still, it’s a neat effect.