Sunday, September 16, 2012

Creating Advanced Alert Window class: Part 14

In this tutorial we'll add a blur screen behind the Alert window that grays out everything behind the window, making it unclickable.

First of all, we'll go to AdvAlertSkin and add 2 more variables - blurColor and blurAlpha.

public var blurColor:uint;
public var blurAlpha:Number;

Set their default values in the constructor:

blurAlpha = 0.5;
blurColor = 0x888888;

Full AdvAlertSkin.as code:

package com.kircode.AdvAlert 
{
import flash.filters.DropShadowFilter;
import flash.text.TextFormat;
/**
 * Object containing skinning data for AdvAlertWindow.
 * @author Kirill Poletaev
 */
public class AdvAlertSkin 
{

public var textPadding:TextPadding;
public var headerPadding:TextPadding;
public var titlePadding:TextPadding;
public var headerHeight:int;
public var titleFormat:TextFormat;
public var textFormat:TextFormat;
public var selectable:Boolean;
public var headerRect:*;
public var bgRect:*;
public var bgStroke:*;
public var headerStroke:*;
public var filters:Array;
public var blurColor:uint;
public var blurAlpha:Number;

public function AdvAlertSkin() 
{
// default values
textPadding = new TextPadding(5, 5, 5, 5);
headerPadding = new TextPadding(5, 5, 5, 5);
titlePadding = new TextPadding(2, 2, 2, 2);
headerHeight = 30;
titleFormat = new TextFormat();
titleFormat.size = 20;
titleFormat.font = "Arial";
titleFormat.bold = true;
titleFormat.color = 0xffffff;
textFormat = new TextFormat();
textFormat.size = 16;
textFormat.font = "Arial";
textFormat.color = 0xffffff;
selectable = false;
bgRect = new SolidColorRect(0x7777cc, [10, 10, 10, 10], 1);
headerRect = new SolidColorRect(0x9999ff, [10, 10, 0, 0], 1);
bgStroke = new SolidColorStroke(2, 0x4444aa, 1);
headerStroke = new SolidColorStroke(0, 0x000000, 0);
filters = [new DropShadowFilter(0, 0, 0, 1, 20, 20, 1, 3)];
blurAlpha = 0.5;
blurColor = 0x888888;
}

}

}

Now go to AdvAlertManager.as.

After declaring a AdvAlertWindow object in the alert() function, create a new AdvAlertBlur object. Pass 3 values as parameters - pWidth, pHeight and skin.

In the line that adds an element to windows array, push an Object with 2 properties - window and blur, which contain references to the window and blur objects. Add the blur object to the parent before adding window.

public function alert(text:String, title:String = "", width:int = 300, height:int = 200, position:Point = null):void {
if (position == null) position = new Point((pWidth / 2) - (width / 2), (pHeight / 2) - (height / 2));
var w:AdvAlertWindow = new AdvAlertWindow(text, title, width, height, position, skin);
var b:AdvAlertBlur = new AdvAlertBlur(pWidth, pHeight, skin);
windows.push( { window:w, blur:b } );
defaultContainer.addChild(b);
defaultContainer.addChild(w);

trace("Message: " + text);
}

Full AdvAlertManager.as:

package com.kircode.AdvAlert 
{
import flash.display.DisplayObjectContainer;
import flash.display.MovieClip;
import flash.geom.Point;
/**
 * Advanced Alert window manager.
 * @author Kirill Poletaev
 */
public class AdvAlertManager 
{
private var windows:Array;
private var defaultContainer:DisplayObjectContainer;
private var pWidth:int;
private var pHeight:int;
private var skin:AdvAlertSkin;

/**
 * AdvAlertManager constructor.
 * @paramdefaultWindowContainer Parent container of alert windows.
 * @paramparentWidth Container's width.
 * @paramparentHeight Container's height.
 */

public function AdvAlertManager(defaultWindowContainer:DisplayObjectContainer, parentWidth:int, parentHeight:int, windowSkin:AdvAlertSkin = null) 
{
trace(": AdvAlertManager instance created.");
skin = windowSkin;
if (skin == null) skin = new AdvAlertSkin();
defaultContainer = defaultWindowContainer;
pWidth = parentWidth;
pHeight = parentHeight;
windows = [];
}

/**
 * Set skin of all future created alert windows.
 * @paramwindowSkin Reference to a skin object.
 */

public function setSkin(windowSkin:AdvAlertSkin):void {
skin = windowSkin;
}

/**
 * Create an alert window.
 * @paramtext Text value of the alert window.
 * @paramtitle Title value of the alert window.
 * @paramwidth (Optional) Width of the alert window. 300 by default.
 * @paramheight (Optional) Height of the alert window. 200 by default.
 * @paramposition (Optional) Coordinates of top-left corner of the alert window. If not specified - the window is centered.
 */

public function alert(text:String, title:String = "", width:int = 300, height:int = 200, position:Point = null):void {
if (position == null) position = new Point((pWidth / 2) - (width / 2), (pHeight / 2) - (height / 2));
var w:AdvAlertWindow = new AdvAlertWindow(text, title, width, height, position, skin);
var b:AdvAlertBlur = new AdvAlertBlur(pWidth, pHeight, skin);
windows.push( { window:w, blur:b } );
defaultContainer.addChild(b);
defaultContainer.addChild(w);

trace("Message: " + text);
}

}

}

Now create a new class AdvAlertBlur.as.

Declare 4 variables - _color, _alpha, _w and _h.

Set the values of _w and _h in the constructor using the passed parameter values. Call setSkin() and updateDraw() from the constructor, pass the received skin reference to setSkin().

In setSkin(), apply the blurColor and blurAlpha values from the skin object to _color and _alpha varaibles.

In updateDraw(), just draw the rectangle with the provided values.

package com.kircode.AdvAlert 
{
import flash.display.MovieClip;

/**
 * Advanced Alert window object.
 * @author Kirill Poletaev
 */
public class AdvAlertBlur extends MovieClip
{
private var _color:uint;
private var _alpha:Number;
private var _w:Number;
private var _h:Number;

public function AdvAlertBlur(w:Number, h:Number, sk:AdvAlertSkin) 
{
_w = w;
_h = h;

setSkin(sk);

updateDraw();
}

public function setSkin(skin:AdvAlertSkin):void {
_color = skin.blurColor;
_alpha = skin.blurAlpha;
}

public function updateDraw():void {
this.graphics.clear();
// draw
this.graphics.beginFill(_color, _alpha);
this.graphics.drawRect(0, 0, _w, _h);
}


}

}

And that's all!

Create an alert window in main.as to see the gray blur screen behind the alert windows you create.

Thanks for reading!

No comments:

Post a Comment