Fade to Gray Modal Window Flex Effect

I’ve always liked the effect Windows XP gives you when you select Shut Down… and it then gives you the Shut Down, Restart, Log Off etc options in a modal window. If you leave that window in place for a second or so, your desktop slowly fades to gray while your modal window stays full color. I’ve been wondering for a while whether that effect was possible in Flex.

So, the simple answer is yes. Wait for this example to load, hit the Launch Popup button and watch the background image (you’ll need Flash Player 9).

So, how does it work? Flex 2′s PopUpManager class has an undocumented internal property called modalWindowClass. By setting that property to a class definition of your choosing, an instance of your class is created when you create a modal popup window. This instance sits “behind” your modal popup, affecting the appearance of the application. These windows are often called popup blockers.

I’ve created a popup blocker class (SaturationFadePopUpBlocker) that uses a new SaturationFade effect I’ve also written. The SaturationFade effect changes the color saturation level of component that is the target of the effect using an instance of the Flash Player’s ColorMatrixFilter.

To add the popup blocker to a Flex 2 application is very simple. The following is the single line of code that is required add the above popup blocker effect (alongside the need to import the necessary classes).

PopUpManager.mx_internal::modalWindowClass = SaturationFadePopUpBlocker;

The SaturationFadePopUpBlocker and SaturationFade effect classes can be downloaded as a Compiled SWC (inside this zip) or as a Flex Builder Library Project. The Library Project includes the compiled SWC and all the source code.

Although this example fades the background to gray, the SatuationFade effect I have written lets you change the color saturation of a component to any level, including making it brighter. The start and end saturation levels, along with the duration of the saturation fade, are all customisable in the Saturation effect and SaturationFadePopUpBlocker classes.

The SaturationFade effect class can also be used as a standalone effect, in place of any of the existing Flex framework effect classes. In this example, the SaturationFade effect plays when you hold your mouse down over the image, with the color saturation level fading from 1 to 0. The saturation level animates back to 1 when you let the mouse go:

The code for the above example is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:eff="com.adobe.effects.*" >
<mx:Script>
<![CDATA[
import com.adobe.effects.SaturationFade;
]]>
</mx:Script>
<eff:SaturationFade id="fadeToGray" duration="500"
saturationFrom="1" saturationTo="0"  />
<eff:SaturationFade id="fadeBack" duration="500"
saturationFrom="0" saturationTo="1" />
<mx:Image mouseDownEffect="fadeToGray" mouseUpEffect="fadeBack"
source="sunset.jpg"  />
</mx:Application>

I won’t go into detail about the implementation of the classes for now. The SaturationFadePopUpBlocker class is very small and should be fairly self-explanatory to most people. If there’s a demand, I’ll do a future post about creating effects using the Flex effects framework and, in particular, how the SaturationFade effect works.