Monday, September 19, 2011

Creating overlay in Flex

Sometimes we may need to create a modal window in a Flex Application. In such cases, we need to add an overlay to the application. The post below explains how to achieve the same.

/* The overlay component */
private var overlay:FlexSprite;

/* Create an overlay 
 * Create a new sprite with an alpha to make it translucent
 * Create a rectangle of the size of the system manager screen and fill the overlay with that
 * Add the overlay to the system manager.
 */
private function createOverlay():void
{
if(this.overlay == null)
{
this.overlay = new FlexSprite();
this.overlay.alpha = 0.5;
this.overlay.tabEnabled = false;
var s:Rectangle = this.systemManager.screen;
var g:Graphics = this.overlay.graphics;
g.clear();
g.beginFill(0xDDDDDD, 100);
g.drawRect(s.x, s.y, s.width, s.height);
g.endFill();
this.systemManager.addChild(this.overlay);
}
}

/* Remove the overlay */
private function removeOverlay():void
{
if(this.overlay != null)
{
this.systemManager.removeChild(this.overlay);
this.overlay = null;
}
}

As simple as that. Questions are welcome.

No comments :