Blog

Jason Graham from Flexcoders had the same desire I had; how to get the cool Alert blur effect that Flex 2 has in Flex 1.5?

If you haven’t seen the effect, it’s pretty slick. Basically, if you trigger an Alert window in Flex 2, it actually blurs out the background application. While the AJAX’rz learn about focus rects, something Flash has always had built into the player, and built into our component framework for over 3 years, the Flash & Flex developers are paving the way in using visual effects to handle user attention focus. That way, when Windows Vista comes out, Windows Developers will already know what works and doesn’t, and AJAX’rz will be using hardware accelerated Firefox effects. Thanks for the fish, bitch!

In film and animation, an over blurring of both foreground and background parts of an image is used to bring the subject of the photo “more” into focus. By removing detail from both the background, and foreground objects, the eyes focus more so on the clear part of the picture. The subject is brought out more, giving the image more depth as the distance is exaggerated.

Freely licensed under Creative Commons – BY-SA-1.0
Source: http://thoughtattic.com/

This is basically accomplished by using a camera with a large aperture, which makes the depth of field very shallow.

This is also effectively used to convey distance by exaggerating the blur used on foreground and background objects in 2D animation. You show the foreground blurred out, and the background crisp and clear. You then quickly blur out the background, and unblur the existing foreground. While the distances are not truly accurate since they are 2 dimensional images, the effect causes you to perceive them as far from eachother.

Thus, having an alert dialogue clear and crisp with a blurred out background is the perfect way to convey depth of field on a 2 dimensional computer monitor, and have the user’s eyes “focus” on the alert dialogue prominently in the center of the page, and “closest” to them.

Animating with it is pretty pimp too. A lot of designers used to utilize After Effects for it’s awesome motion blur effect. They’d they take in a series of images into Flash, and animate via a Graphic or MovieClip. Now, you just need 1 image with nothing pre-rendered since Flash 8 has blurring built in via the BlurFilter.

As things move, they blur. This makes them appear more “real”, thus when used correctly (meaning, not my example), they are an effective way to convey motion when used in tandem with the Move and/or Resize effects.

So how do you do it? Well, there are a few ways. The one I chose works pretty well, and is a temporary necessity since Flex 2 will have all of this built into the 8.5 Flash Player and the Flex 2 Component Framework.

Flex 1.5 utilizes and exports for version 7 of the Flash Player. While Flash is backwards compatible, Flex’ compiler is pretty strict, and there is no easy way to fool it that doesn’t feel weird when developing. It also cannot recognize the internal (intrinsic) classes that Flash 8 comes with. I’m sure there are other ways, but I’ve found loading a SWF works great. We used the technique Dirk & Lucian talked about in 2 projects so far to enable our Flex applications to have integrated File Upload.

By loading a Flash 8 SWF, you can expose method calls that a Flex app can make on a loaded SWF. Since Flash 8 can compile just fine using the Flash 8 features, you expose useful methods. Since the calling of methods on a loaded SWF is not strict, and there are no runtime exceptions for failed method calls in the Flash 8 player, this works great.

Here’s the breakdown:

1. create a Flash 8 FLA
2. expose 2 methods, blur and clearBlur (or unBlur or whatever). The blur method will allow Flex to blur something it passes in, and clearBlur will remove it (since Flex doesn’t know what a “filters” is on a MovieClip)
3. compile the SWF as a Flash Player 8 SWF file
4. load the SWF file into a Loader component in Flex
5. when it’s loaded, save a reference to the Loader.content
6. have your Flex app call that reference.blur and reference.clearBlur to have certain components blur and unblur

Here’s an example of how your Flash 8 code should look on the _root timeline:

function blur(p_target:MovieClip, p_x:Number, p_y:Number, p_quality:Number):Void
{
        var bf:BlurFilter = new BlurFilter();
        bf.blurX = (p_x != null) ? p_x : 4;
        bf.blurY = (p_y != null) ? p_y : 4;
        bf.quality = (p_quality != null) ? p_quality : 1;
        p_target.filters = [bf];
}

function clearBlur(p_target:MovieClip):Void
{
        p_target.filters = [];
}

Here’s an example of the callback function your Loader component in Flex should call and store the reference to the loaded SWF:

private var blurSWF:MovieClip;

private function onSWFLoaded(event:Object):Void
{
        blurSWF = swf_ldr.content;
}

I like to proxy my methods to the SWF via an enforced interface, but you don’t have to. You could simply blur anything by calling the blur method directly, and passing in the target, x blur, y blur, and blur quality:

blurSWF.blur(login_form, 6, 6, 3);

I tried and failed to utilize an interface. Dirk I think blogged about how you can utilize an interface in Flex 1.5 to load Flash 8 SWF’s, but I gave up looking, and when casing to the interface in Flex resulted in a null return value, so I gave up, and just made the Application implement the interface instead. Flash Developers are used to faith based programming anyway, and a SWF proxy is no exception.

I took it a step further, and built an Effect class. Flex 2 already has this built-in, but Flex 1.5 does not. Since the joy of Flex is using MXML, which seperates your code from your GUI, thus preventing your code from breaking when you change your GUI, I created a Blur class that can be used as MXML. More specifically, it works just like all of the other effect classes do. You can use it as showEffects, in Parallels, Sequences, or even through pure ActionScript if you wanted. It extends the TweenEffect class, the same class all of the other Flex effect classes extend. Not sure if I did it right, but it works.

<jxl:Blur blurYFrom="60" blurYTo="0" duration="600" />

A couple things I did differently, though. First off, the blur does something weird to the Panel. It like blanks out the header (it loves you Stacy, why you hate?), and the ControlBar… I reckon this is because these are dynamically drawn gradients or something. Anyway, I provied a “clearBlur” property for the Effect. It’s false by default, but if you set it to true, it’ll remove the effect from the object when it’s done, thus hopefully removing all visual anamolies. Worked with Panel, anyway. This can’t be done in Flex 2 mind you; once you use an effect, you are commited to that mofo having it’s filters array always stuffed so don’t get used to my way.

<jxl:Blur 
  blurYFrom="60" 
  blurYTo="0" 
  duration="600" 
  clearBlur="true" />

Finally, there is a hide property. Sometimes you want to blur things out, so I have a hide property that will hide the target when it’s done playing the effect; useful for hideEffect.

<jxl:Blur 
   name="blurOut"
   blurXFrom="0" blurXTo="60"
   blurYFrom="0" blurYTo="4"
   quality="6"
   clearBlur="true"
   hide="true"
   suspendBackgroundProcessing="false"
   duration="200" 
   easing="easeIn" />

I’m pretty sure this degrades nicely, meaning if the user has Flash 7 installed, while no blur will occur, effects will still finish since they are based on Tween, and Tween just has an interval crunching through numbers, spitting out events with no care whether their values actually do anything.

On the same token, if you don’t have Flash 8, you won’t see anything. It works for me in the alpha build of 8.5 as well.

Here’s an example of the form blurring when an alert dialogue is triggered.

Here’s an example of using the Blur tag as an effect for a couple of Panels.

BlurFilter for Flex 1.5 Source – ZIP

Have fun… and don’t forget the yellow fade!

*** Update: Simon Barber has a beautiful usage of the BlurFilter in his MXNA reader.