Fade to Gray Modal Window Flex Effect

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.

Posted by amcleod at August 31, 2006 06:50 PM

Comments

I rikey rots :)

Posted by: Scott Barnes at September 1, 2006 12:40 AM

A true queenslander comment

Posted by: Bjorn Schultheiss at September 1, 2006 03:11 AM

Hope you don't mind but I copied your example in Flash 8 on my blog - gave you props for the idea. Nice work. Check it out:
http://pixelfumes.blogspot.com/2006/09/flash-8-version-of-modal-pop-up.html

-Sarge

Posted by: Sarge at September 1, 2006 03:48 PM

Can you give an example, where to put line
PopUpManager.mx_internal::modalWindowClass = SaturationFadePopUpBlocker;

Thanks in advance!

Posted by: Andrey at September 3, 2006 11:16 PM

Hi Andrey,

Putting that line in the creationComplete handler of your main application should suffice.

Ali

Posted by: Alistair McLeod at September 4, 2006 09:25 AM

Thanks! I was creating a non-modal window and that's was my fault:)

Posted by: Andrey at September 4, 2006 06:25 PM

Great technique. Thanks for creating this.

Posted by: Sho at September 8, 2006 12:48 AM

One thing i observed is that the window is not modal anymore, i can push the buttons behind it although they are black and white, using the swc. Is there any setting i can set to prevent this and make the popup act like a true modal window?
Thanks for this great example

Posted by: Alex at November 1, 2006 09:50 PM

Guillermo, I've found a way:
In SaturationFadePopUpBlocker.as change overriden method createChildren.
there's a code:

protected override function createChildren():void
{
super.createChildren();
modalWindow = new FlexSprite();
modalWindow.name = "modalWindow";
var sm : ISystemManager = (parent is SystemManager)
? (parent as SystemManager)
: null;
addChild((modalWindow as DisplayObject));
var g : Graphics = modalWindow.graphics;
var s : Rectangle = sm ? sm.screen : new Rectangle(0,0,100,100);
g.beginFill(0xFFFFFF, 0.0);
g.drawRect(0,0,1,1);
g.endFill();
modalWindow.width = s.width;
modalWindow.height = s.height;
modalWindow.x = s.x;
modalWindow.y = s.y;
originalFilters = parentApplication.filters;
effect = new SaturationFade( parentApplication );
effect.duration = FADE_DURATION;
effect.saturationFrom = SATURATION_FROM;
effect.saturationTo = SATURATION_TO;
effect.play();
}

and that's all.
But there's a problem I don't know how to fix: when I try to launch a popup it's ok, but then I try to run another popup from this current popup, after close first popup, effect doesn't work correctly :(

Posted by: chris at November 23, 2006 07:38 AM

The "PopUpManager.mx_internal::modalWindowClass" property doesn't seem to be available with the new 2.0.1 version of Flex Builder. Does this have anything to do with the mx_internal namespace?

Posted by: Mark Luffel at January 8, 2007 05:29 PM

For Flex 2.0.1 in the SaturationFade.as file, I had to change all references of "EffectInstance" to "IEffectInstance"--including the import statement and the initInstance method signature.

Posted by: clshrock at January 17, 2007 05:40 PM

For Flex 2.0.1 PopupManager is not a class within itself. It's a wrapper onto a Singleton of type IPopUpManager

You get it like this before your init function:
private static var ipum:IPopUpManager = Singleton.getInstance("mx.managers::IPopUpManager") as IPopUpManager;

and then in creationComplete you use:
ipum.mx_internal::modalWindowClass = SaturationFadePopUpBlocker;

Posted by: Greg K. at February 16, 2007 11:53 PM

also in the function above, modalFunction needs to be declared as FlexSprite before use.

Posted by: Greg K. at February 16, 2007 11:54 PM

Alistair,
Any word on the flex calendar release ? I'm in desperate need for a project.

Posted by: cpozen at March 13, 2007 08:57 PM

Hi Andrey,

Putting that line in the creationComplete handler of your main application should suffice.

Posted by: Community at March 15, 2007 01:35 AM

One thing i observed is that the window is not modal anymore, i can push the buttons behind it although they are black and white, using the swc. Is there any setting i can set to prevent this and make the popup act like a true modal window?
Thanks for this great example

Posted by: yesil perde at March 21, 2007 08:30 PM

The "PopUpManager.mx_internal::modalWindowClass" property doesn't seem to be available with the new 2.0.1 version of Flex Builder. Does this have anything to do with the mx_internal namespace?

Posted by: canli yayin at March 21, 2007 08:31 PM

Is it possible to post a new version of this nice effect? With all the fixes mentioned here I still have runtime problems.

Posted by: Jochen at March 23, 2007 01:03 PM

is Fade to Gray Modal Window Flex Effect an adobe photoshop plug-in ?

Posted by: mirc at June 1, 2007 07:28 PM

modalFunction needs to be declared as FlexSprite before use.

Posted by: hosting at June 12, 2007 07:45 AM

"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)." but how :(

Posted by: aşk at June 12, 2007 07:46 AM

Any word on the flex calendar release ? I'm in desperate need for a project. thanks for all!!

Posted by: sohbet odaları at June 21, 2007 11:24 AM

Hi,

very nice, but i didn't succeed in make it run with Flex3/Apollo. Anyone has a full working example ?

Thanks,
Cyril

Posted by: Cyril at June 27, 2007 12:20 AM

For Flex 2.0.1 in the SaturationFade.as file, I had to change all references of "EffectInstance" to "IEffectInstance"--including the import statement and the initInstance method signature.

Posted by: çeviri at July 1, 2007 06:36 PM

One thing i observed is that the window is not modal anymore, i can push the buttons behind it although they are black and white, using the swc.

Posted by: Oyun - Erkek Oyunu at July 2, 2007 12:37 PM

I've put together a quick example on: http://www.rachaelandtom.info/node/1461

Posted by: Tom Chiverton at July 4, 2007 07:06 PM

I am also interested in the calendar feature and thank you a lot for this effect.

Posted by: Sohbet odalarý at July 8, 2007 04:54 PM

Nice work! What code do you use to close the smaller form when you hit the "x" on the form?

Thanks in advance

Posted by: LarryA at August 2, 2007 04:34 AM

is there a zip file of the whole modal app? As a new Flex student, I still get pretty lost. Or if someone can put the entire code for the App that makes the pop up window appear and the background go gray, that would be awesome, please.

Cordially,
Abel K.
Miami Beach, FL

Posted by: Abel at September 20, 2007 05:42 PM

What code do you use to close the smaller can put the entire code for the App that makes the pop

Posted by: chat at September 21, 2007 07:05 PM

Nice work..

saturationTo="1" or saturationTo="2" good working..

Posted by: seks at October 20, 2007 02:47 PM

you should enable "view source" code on example projects...

Posted by: nate at October 23, 2007 05:15 PM

For Flex 2.0.1 PopupManager is not a class within itself. It's a wrapper onto a Singleton of type IPopUpManager

You get it like this before your init function:
private static var ipum:IPopUpManager = Singleton.getInstance("mx.managers::IPopUpManager") as

Posted by: Free Download at November 6, 2007 09:33 AM

you should enable "view source" code on example projects

Posted by: islami sohbet at November 6, 2007 11:27 AM

You get it like this before your init function:
private static var ipum:IPopUpManager = Singleton.getInstance("mx.managers::IPopUpManager") as

Posted by: ev at November 6, 2007 07:23 PM

Alistair,
Any word on the flex calendar release ? I'm in desperate need for a project.

Posted by: blah at November 14, 2007 11:13 PM

The "PopUpManager.mx_internal::modalWindowClass" property doesn't seem to be available with the new 2.0.1 version of Flex Builder. Does this have anything to do with the mx_internal namespace?

Posted by: seksi kizlar at November 14, 2007 11:15 PM

could u send modal page(form) sample which is working correctlly

Posted by: abhishek at November 30, 2007 11:57 AM

The "PopUpManager.mx_internal::modalWindowClass" property doesn't seem to be available with the new 2.0.1 version of Flex Builder. Does this have anything to do with the mx_internal namespace?

Posted by: chat at December 2, 2007 04:50 AM

flex 2.0.1 solution:
uncheck the project's compiler 'enable strict type checking'
then
var ipm:IPopUpManager =Singleton.getInstance("mx.managers::IPopUpManager") as IPopUpManager;
ipm.mx_internal::modalWindowClass=SaturationFadePopUpBlocker;

Posted by: zhsu at December 7, 2007 06:20 AM

I found a small issue if you load a popup right after closing a popup - seems the new popup takes the de-saturated filter as the "originalfilter", so when you close the new popup - it reverts to, you guessed it: the desaturated filter.

The crappy fix I made is to change "parentApplication.filters = originalfilters" to "parentApplication.filters = new Array()" which just erases the filters.

The better fix would be to check for the instance of a SaturationFade filter and remove it from the array of originalfilters..

anyway, nice little class - for those of you having trouble getting it to work in flex builder 3, be sure to follow clshrock's post about using the Singleton wrapper with the IPopUpManger object.

Posted by: dimpled at January 4, 2008 05:41 AM

Putting that line in the creationComplete handler of your main application should suffice.
+1

Posted by: komik at January 6, 2008 11:12 AM

Hi,

Putting that line in the creationComplete handler of your main application should suffice.

TgrL

Posted by: Hayvanlar at January 15, 2008 09:26 AM

What code do you use to close the smaller form when you hit the "x" on the form

Posted by: uzamax at January 17, 2008 11:44 PM

One thing i observed is that the window is not modal anymore, i can push the buttons behind it although they are black and white, using the swc.

Posted by: satılık konut at January 18, 2008 08:13 AM

you should enable "view source" code on example projects

Posted by: oyun at January 21, 2008 11:50 PM

you should enable "view source" code on example projects...

Posted by: varmısın yokmusun at January 29, 2008 07:24 PM

you should enable view source code on example projects

Posted by: kadin at February 11, 2008 11:00 PM

thanks
Thanks! I was creating a non-modal window and that's was my fault:)

Posted by: güzel oyunlar at February 17, 2008 06:41 PM

What code do you use to close the smaller can put the entire code for the App that makes the pop

Posted by: oyun at February 22, 2008 05:22 PM

Any word on the flex calendar release ?

Posted by: Oyunlar at March 6, 2008 02:01 AM

The "PopUpManager.mx_internal::modalWindowClass" property doesn't seem to be available with the new 2.0.1 version of Flex Builder. Does this have anything to do with the mx_internal namespace?

Posted by: sohbet at April 5, 2008 07:42 PM

Any word on the flex calendar release ? I'm in desperate need for a project.

Posted by: çet at July 21, 2008 05:10 PM

For Flex Builder 3 you can write also

import mx.core.Singleton;
import mx.managers.*
.....
var ipm:IPopUpManager = Singleton.getInstance("mx.managers::IPopUpManager") as IPopUpManager;

var o:Object = ipm;
var p:QName = new QName(mx_internal, "modalWindowClass");

o[p] = SaturationFadePopUpBlocker;

 

文章引用：http://weblogs.macromedia.com/amcleod/archives/2006/08/fade_to_gray_ef.html