Friday, October 10th, 2008 | Author: admin

When I wanted to take control over the shield that makes a window appear modal, I found out, that it seams to be not really implemented. I’ve found the functionality in the mx.managers.PopUpManagerImpl class in the Flex framework.

There is a property called modalWindowClass that if you set, it will be used as a shield.(Actually the graphics object of this class will be cleared even that time, there is a little mess in the code in the PopUpManagerImpl class.)

I did a little repair, with this it works beter for me. I avoid to draw to the graphics object when the class is set. I added a condition:

466
467
468
469
470
471
if(!modalWindowClass){    
	        g.clear();
	        g.beginFill(c, 100);
	        g.drawRect(s.x, s.y, s.width, s.height);
	        g.endFill();
        }

The application code:

466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" applicationComplete="init();">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
 
			import mx.managers.PopUpManagerImpl;
 
			import mx.core.mx_internal;
 
			use namespace mx_internal;
 
			private function init():void{
				var impl:PopUpManagerImpl=PopUpManagerImpl.getInstance() as PopUpManagerImpl;
				impl.modalWindowClass=CustomPopUpShield;
			}
 
			private function openPopUp():void{
 
 
				Alert.show("hehe","Try pop up");
			}
 
		]]>
	</mx:Script>
 
	<mx:Style>
		/*With these settings I practically turned off the default behavior. The transparency have to be 1, 
		because it will be the transparency for the whole shield.(with 0 we would not see anything)*/
		Application{
			horizontalGap:"0";
    		modalTransparency:"1";
    		modalTransparencyBlur:"0";
    		modalTransparencyColor:"#ffffff";
    		modalTransparencyDuration:"0";
		}
 
	</mx:Style>
 
	<mx:HBox horizontalGap="0" height="100%">
		<mx:VBox width="60" height="100%">
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
		</mx:VBox>
		<mx:Canvas width="240" height="100%" backgroundColor="#0000ff">
			<mx:Button x="102" y="47" label="click" click="openPopUp()"/>
 
		</mx:Canvas>
	</mx:HBox>
</mx:Application>

The custom pop up shield class (The target is to make the buttons unclickable of course, but over the left side I don’t want to see visible shield. Not the whole screen will be filled with color. I made the shield animated too):

466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
package
{
	import flash.display.Sprite;
	import flash.filters.BlurFilter;
	import flash.filters.GlowFilter;
	import flash.geom.Rectangle;
 
	import gs.TweenMax;
	import gs.easing.Back;
 
	import mx.core.Application;
 
	public class CustomPopUpShield extends Sprite
	{
 
		private var _base:Sprite;//this will be an invisible shape over the whole screen to prevent clicking on the buttons
		private var _animatingContent:Sprite;//this will animate
 
		override public function CustomPopUpShield(){
			super();
 
			var sc:Rectangle=Application.application.screen;
 
			_base=new Sprite();
			_base.graphics.beginFill(0x000000,0);
			_base.graphics.drawRect(0,0,sc.width,sc.height);
			_base.graphics.endFill();
			this.addChild(_base);
 
			_animatingContent=new Sprite();
			_animatingContent.graphics.beginFill(0x00ff00,0.4);
			_animatingContent.graphics.drawRect(60,0,sc.width,sc.height);
			_animatingContent.graphics.endFill();
			this.addChild(_animatingContent);
 
			var filter:GlowFilter=new GlowFilter(4,4);
			_animatingContent.filters=new Array(filter);
 
			activate();
		}
 
		private function activate():void{
			TweenMax.to(_animatingContent, 1, {tint:0x000000,yoyo:true,ease:Back.easeIn});
		} 
 
 
 
 
 
 
	}
}

The result:
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Everything is hardcoded in this example. You may need to manage resizing etc. But you can make this way your very own pop up shield, whatever you want.

Source for this project: CustomModalWindowBackground.zip

Category: AIR, Flex
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
Leave a Reply