Wednesday, October 3, 2012

Creating Advanced Alert Window class: Part 31

In this tutorial we will add support for text, title and button text filters.

Currently we can add filters to the alert window and the buttons using skins. It is possible to set filters of each dynamic object added the the windows by referring directly to the objects. It is not, however, yet possible to set filters of the text fields in our interface elements.

There are 3 text fields we need to cover - the title text field, the body text field, and the text field of a button. All this functionality will be a part of the skinning system, so first of all go to the skin classes and add the new properties.

Go to AdvAlertSkin class and declare these two new variables:

public var textFilters:Array;
public var titleFilters:Array;

Set their values to empty arrays in the constructor:

textFilters = [];
titleFilters = [];

Full AdvAlertSkin class:

package com.kircode.AdvAlert 
{
import flash.display.DisplayObject;
import flash.filters.DropShadowFilter;
import flash.geom.Point;
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 var buttonbarHeight:Number;
public var buttonbarPadding:TextPadding;
public var buttonInterval:Number;
public var buttonbarAlign:String; // values: right, left, center
public var dynamicContent:Array;
public var textFilters:Array;
public var titleFilters:Array;

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;
buttonbarHeight = 30;
buttonbarPadding = new TextPadding(0, 5, 5, 5);
buttonInterval = 5;
buttonbarAlign = "right";
dynamicContent = [];
textFilters = [];
titleFilters = [];
}

/**
 * Add dynamic content to the alert window.
 * @paramobject The class of an object to add to the window.
 * @parampoint Position of the object inside the window.
 */

public function addContent(object:Class, position:Point):void {
dynamicContent.push({obj:object, pos:position});
}

}

}

Go to AdvAlertWindow class and declare these two variables:

private var textFilters:Array;
private var titleFilters:Array;

Set their values in the setSkin() function:

public function setSkin(skin:AdvAlertSkin):void {
textPadding = skin.textPadding;
headerPadding = skin.headerPadding;
titlePadding = skin.titlePadding;
headerHeight = skin.headerHeight;
titleFormat = skin.titleFormat;
textFormat = skin.textFormat;
selectable = skin.selectable;
bgRect = skin.bgRect;
headerRect = skin.headerRect;
bgStroke = skin.bgStroke;
headerStroke = skin.headerStroke;
skinFilters = skin.filters;
buttonbarHeight = skin.buttonbarHeight;
buttonbarPadding = skin.buttonbarPadding;
buttonInterval = skin.buttonInterval;
buttonbarAlign = skin.buttonbarAlign;
dynamicContent = skin.dynamicContent;
textFilters = skin.textFilters;
titleFilters = skin.titleFilters;
}

And apply their values to fitlers properties of titleField and textField in updateDraw():

titleField.filters = titleFilters;
textField.filters = textFilters;

Full AdvAlertWindow class code:

package com.kircode.AdvAlert 
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.display.GradientType;

/**
 * Advanced Alert window object.
 * @author Kirill Poletaev
 */
public class AdvAlertWindow extends MovieClip
{
private var t:String;
private var tt:String;
private var w:int;
private var h:int;
private var pos:Point;
private var parw:int;
private var parh:int;
public var buttons:Array;
public var content:Array;

private var textField:TextField;
private var titleField:TextField;

private var textPadding:TextPadding;
private var headerPadding:TextPadding;
private var titlePadding:TextPadding;
private var headerHeight:Number;
private var buttonbarPadding:TextPadding;
private var buttonbarHeight:Number;
private var titleFormat:TextFormat;
private var textFormat:TextFormat;
private var selectable:Boolean;
private var headerRect:*;
private var bgRect:*;
private var headerStroke:*;
private var bgStroke:*;
private var skinFilters:Array;
private var buttonInterval:Number;
private var defaultButtonSkin:AdvAlertButtonSkin;
private var buttonbarAlign:String;
private var dynamicContent:Array;
private var minHeight:int;
private var textFilters:Array;
private var titleFilters:Array;

public function AdvAlertWindow(pt:String, ptt:String, pw:int, ph:int, ppos:Point, sk:AdvAlertSkin, bt:Array, defaultButtonSkin:AdvAlertButtonSkin, parentw:int, parenth:int, mheight:int) 
{
minHeight = mheight;
t = pt;
tt = ptt;
w = pw;
h = ph;
pos = ppos;
buttons = bt;
parw = parentw;
parh = parenth;

setSkin(sk);

textField = new TextField();
addChild(textField);

titleField = new TextField();
addChild(titleField);
for (var i:int = 0; i < buttons.length; i++) {
if (buttons[i].currentSkin == null) {
buttons[i].setSkin(defaultButtonSkin);
buttons[i].updateDraw();
}
addChild(buttons[i]);
}

updateDraw();

if (ph == 0) autoSize();
// add dynamic content
addContent();
}

public function setSkin(skin:AdvAlertSkin):void {
textPadding = skin.textPadding;
headerPadding = skin.headerPadding;
titlePadding = skin.titlePadding;
headerHeight = skin.headerHeight;
titleFormat = skin.titleFormat;
textFormat = skin.textFormat;
selectable = skin.selectable;
bgRect = skin.bgRect;
headerRect = skin.headerRect;
bgStroke = skin.bgStroke;
headerStroke = skin.headerStroke;
skinFilters = skin.filters;
buttonbarHeight = skin.buttonbarHeight;
buttonbarPadding = skin.buttonbarPadding;
buttonInterval = skin.buttonInterval;
buttonbarAlign = skin.buttonbarAlign;
dynamicContent = skin.dynamicContent;
textFilters = skin.textFilters;
titleFilters = skin.titleFilters;
}

private function autoSize():void {
var textHeight:int = textField.textHeight;
h = headerHeight + headerPadding.top + headerPadding.bottom + buttonbarHeight + buttonbarPadding.top + buttonbarPadding.bottom + textPadding.top + textPadding.bottom + textHeight + 10;
pos.y = parh / 2 - h / 2;
updateDraw();
}

private function addContent():void {
content = [];
for (var i:int = 0; i < dynamicContent.length; i++) {
var object:DisplayObject = new dynamicContent[i].obj();
addChild(object);
object.x = dynamicContent[i].pos.x + pos.x;
object.y = dynamicContent[i].pos.y + pos.y;
content.push(object);
}
}

public function updateDraw():void {
if (h < minHeight) h = minHeight;

this.graphics.clear();
// filters
this.filters = skinFilters;

// bg stroke
if (bgStroke is SolidColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness, bgStroke._lineColor, bgStroke._lineAlpha);
}
if (bgStroke is GradientColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineGradientStyle(bgStroke._gradientType, bgStroke._colors, bgStroke._alphas, bgStroke._ratios, bgStroke._matrix, bgStroke._spreadMethod, bgStroke._interpolationMethod, bgStroke._focalPointRatio);
}
if (bgStroke is BitmapStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineBitmapStyle(bgStroke._bitmap, bgStroke._matrix, bgStroke._repeat, bgStroke._smooth);
}

// bg fill
if (bgRect is SolidColorRect) this.graphics.beginFill(bgRect._backgroundColor, bgRect._alpha);
if (bgRect is GradientColorRect) this.graphics.beginGradientFill(bgRect._gradientType, bgRect._colors, bgRect._alphas, bgRect._ratios, bgRect._matrix, bgRect._spreadMethod, bgRect._interpolationMethod, bgRect._focalPointRatio);
if (bgRect is BitmapRect) this.graphics.beginBitmapFill(bgRect._bitmap, bgRect._matrix, bgRect._repeat, bgRect._smooth);

this.graphics.drawRoundRectComplex(pos.x, pos.y, w, h,
bgRect._radius[0], bgRect._radius[1], bgRect._radius[2], bgRect._radius[3]);
this.graphics.endFill();

// header stroke
if (headerStroke is SolidColorStroke) {
this.graphics.lineStyle(headerStroke._lineThickness, headerStroke._lineColor, headerStroke._lineAlpha);
}
if (headerStroke is GradientColorStroke) {
this.graphics.lineStyle(headerStroke._lineThickness);
this.graphics.lineGradientStyle(headerStroke._gradientType, headerStroke._colors, headerStroke._alphas, headerStroke._ratios, headerStroke._matrix, headerStroke._spreadMethod, headerStroke._interpolationMethod, headerStroke._focalPointRatio);
}
if (headerStroke is BitmapStroke) {
this.graphics.lineStyle(headerStroke._lineThickness);
this.graphics.lineBitmapStyle(headerStroke._bitmap, headerStroke._matrix, headerStroke._repeat, headerStroke._smooth);
}

// header fill
if (headerRect is SolidColorRect) this.graphics.beginFill(headerRect._backgroundColor, headerRect._alpha);
if (headerRect is GradientColorRect) this.graphics.beginGradientFill(headerRect._gradientType, headerRect._colors, headerRect._alphas, headerRect._ratios, headerRect._matrix, headerRect._spreadMethod, headerRect._interpolationMethod, headerRect._focalPointRatio);
if (headerRect is BitmapRect) this.graphics.beginBitmapFill(headerRect._bitmap, headerRect._matrix, headerRect._repeat, headerRect._smooth);

this.graphics.drawRoundRectComplex(pos.x + headerPadding.left, pos.y + headerPadding.top, w - (headerPadding.left + headerPadding.right), headerHeight,
headerRect._radius[0], headerRect._radius[1], headerRect._radius[2], headerRect._radius[3]);
this.graphics.endFill();

// title
titleField.width = w - (headerPadding.left + headerPadding.right);
titleField.text = tt;
titleField.height = headerHeight;
titleField.x = pos.x + headerPadding.left + titlePadding.left;
titleField.y = pos.y + headerPadding.top + titlePadding.top;

// text
textField.width = w - (textPadding.right + textPadding.left);
textField.height = h - (textPadding.top + textPadding.bottom + headerPadding.top + headerPadding.bottom + headerHeight + buttonbarHeight + buttonbarPadding.top + buttonbarPadding.bottom);
textField.text = t;
textField.x = pos.x + textPadding.left;
textField.y = pos.y + textPadding.top + headerHeight + headerPadding.bottom + headerPadding.top;

// formats
textField.setTextFormat(textFormat);
titleField.setTextFormat(titleFormat);
textField.selectable = selectable;
titleField.selectable = selectable;
textField.multiline = true;
textField.wordWrap = true;
titleField.filters = titleFilters;
textField.filters = textFilters;

// buttons
var xCoord:Number;
var i:int

// right align
if(buttonbarAlign=="right"){
if (buttons.length > 0) xCoord = pos.x + w - buttons[buttons.length-1].w - buttonbarPadding.right;
for (i = buttons.length-1; i >= 0; i--) {
if (i != buttons.length-1) xCoord -= buttons[i].w + buttonInterval;
buttons[i].x = xCoord;
buttons[i].y = pos.y + h - buttons[i].h - buttonbarPadding.bottom;
}
}

// left align
if(buttonbarAlign=="left"){
if (buttons.length > 0) xCoord = pos.x + buttonbarPadding.left;
for (i = 0; i < buttons.length; i++) {
if (i > 0) xCoord += buttons[i].w + buttonInterval;
buttons[i].x = xCoord;
buttons[i].y = pos.y + h - buttons[i].h - buttonbarPadding.bottom;
}
}

// center align
if(buttonbarAlign=="center"){
if (buttons.length > 0) {
var buttonbarWidth:Number = 0;
for (i = 0; i < buttons.length; i++) {
buttonbarWidth += buttons[i].w + buttonInterval;
}
buttonbarWidth -= buttonInterval;
xCoord = pos.x + (w/2) - buttonbarWidth/2;
}
for (i = 0; i < buttons.length; i++) {
if (i > 0) xCoord += buttons[i].w + buttonInterval;
buttons[i].x = xCoord;
buttons[i].y = pos.y + h - buttons[i].h - buttonbarPadding.bottom;
}
}
}


}

}

The title and text filter is not supported and skinnable, all that's left is the button text filtering.

Go to AdvAlertButtonSkin class and declare 2 new variables:

public var textFilters:Array;
public var hover_textFilters:Array;

Set their values in the constructor:

textFilters = [];
hover_textFilters = [];

Full AdvAlertButtonSkin class code:

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

public var w:Number;
public var h:Number;
public var textFormat:TextFormat;
public var bgStroke:*;
public var bgRect:*;
public var pos:Point;
public var textPadding:TextPadding;
public var filters:Array;
public var textFilters:Array;
public var hover_w:Number;
public var hover_h:Number;
public var hover_textFormat:TextFormat;
public var hover_bgStroke:*;
public var hover_bgRect:*;
public var hover_pos:Point;
public var hover_textPadding:TextPadding;
public var hover_filters:Array;
public var hover_textFilters:Array;

public function AdvAlertButtonSkin() 
{
// default values
w = 80;
h = 30;
textFormat = new TextFormat("Arial", 16, 0xffffff);
textFormat.align = "center";
bgStroke = new SolidColorStroke(2, 0x333399, 1);
bgRect = new SolidColorRect(0x6666ff, [3, 3, 3, 3], 1);
pos = new Point(0, 0);
textPadding = new TextPadding(3, 0, 3, 0);
filters = [];
textFilters = [];
hover_w = 80;
hover_h = 30;
hover_textFormat = new TextFormat("Arial", 16, 0xffffff);
hover_textFormat.align = "center";
hover_bgStroke = new SolidColorStroke(2, 0xffffff, 1);
hover_bgRect = new SolidColorRect(0xaaaaff, [3, 3, 3, 3], 1);
hover_pos = new Point(0, 0);
hover_textPadding = new TextPadding(3, 0, 3, 0);
hover_filters = [];
hover_textFilters = [];
}

}

}

Go to AdvAlertButton class and declare the 2 variables here too:

private var textFilt:Array;
private var hover_textFilt:Array;

Set their values in setSkin():

public function setSkin(skin:AdvAlertButtonSkin):void {
currentSkin = skin;
w = skin.w;
h = skin.h;
textFormat = skin.textFormat;
bgStroke = skin.bgStroke;
bgRect = skin.bgRect;
pos = skin.pos;
textPadding = skin.textPadding;
filt = skin.filters;
textFilt = skin.textFilters;
hover_w = skin.hover_w;
hover_h = skin.hover_h;
hover_textFormat = skin.hover_textFormat;
hover_bgStroke = skin.hover_bgStroke;
hover_bgRect = skin.hover_bgRect;
hover_pos = skin.hover_pos;
hover_textPadding = skin.hover_textPadding;
hover_filt = skin.hover_filters;
hover_textFilt = skin.hover_textFilters;
}

Apply their values to filters property of the textField in updateDraw(). We have 2 if..statements in that function, which execute different code based on whether the button is rolled over or not. Apply the value of textFilters if the button is not rolled over, and apply the value of hover_textFilters if the button is rolled over.

public function updateDraw():void {
this.graphics.clear();

if(!over){
//filters
this.filters = filt;

// bg stroke
if (bgStroke is SolidColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness, bgStroke._lineColor, bgStroke._lineAlpha);
}
if (bgStroke is GradientColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineGradientStyle(bgStroke._gradientType, bgStroke._colors, bgStroke._alphas, bgStroke._ratios, bgStroke._matrix, bgStroke._spreadMethod, bgStroke._interpolationMethod, bgStroke._focalPointRatio);
}
if (bgStroke is BitmapStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineBitmapStyle(bgStroke._bitmap, bgStroke._matrix, bgStroke._repeat, bgStroke._smooth);
}

// bg fill
if (bgRect is SolidColorRect) this.graphics.beginFill(bgRect._backgroundColor, bgRect._alpha);
if (bgRect is GradientColorRect) this.graphics.beginGradientFill(bgRect._gradientType, bgRect._colors, bgRect._alphas, bgRect._ratios, bgRect._matrix, bgRect._spreadMethod, bgRect._interpolationMethod, bgRect._focalPointRatio);
if (bgRect is BitmapRect) this.graphics.beginBitmapFill(bgRect._bitmap, bgRect._matrix, bgRect._repeat, bgRect._smooth);

this.graphics.drawRoundRectComplex(pos.x, pos.y, w, h,
bgRect._radius[0], bgRect._radius[1], bgRect._radius[2], bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = w;
textField.height = h;
textField.text = txt;
textField.setTextFormat(textFormat);
textField.selectable = false;
textField.x = pos.x + textPadding.right;
textField.y = pos.y + textPadding.top;
textField.filters = textFilt;
}

if(over){
//filters
this.filters = hover_filt;

// bg stroke
if (hover_bgStroke is SolidColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness, hover_bgStroke._lineColor, hover_bgStroke._lineAlpha);
}
if (hover_bgStroke is GradientColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineGradientStyle(hover_bgStroke._gradientType, hover_bgStroke._colors, hover_bgStroke._alphas, hover_bgStroke._ratios, hover_bgStroke._matrix, hover_bgStroke._spreadMethod, hover_bgStroke._interpolationMethod, hover_bgStroke._focalPointRatio);
}
if (hover_bgStroke is BitmapStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineBitmapStyle(hover_bgStroke._bitmap, hover_bgStroke._matrix, hover_bgStroke._repeat, hover_bgStroke._smooth);
}

// bg fill
if (hover_bgRect is SolidColorRect) this.graphics.beginFill(hover_bgRect._backgroundColor, hover_bgRect._alpha);
if (hover_bgRect is GradientColorRect) this.graphics.beginGradientFill(hover_bgRect._gradientType, hover_bgRect._colors, hover_bgRect._alphas, hover_bgRect._ratios, hover_bgRect._matrix, hover_bgRect._spreadMethod, hover_bgRect._interpolationMethod, hover_bgRect._focalPointRatio);
if (hover_bgRect is BitmapRect) this.graphics.beginBitmapFill(hover_bgRect._bitmap, hover_bgRect._matrix, hover_bgRect._repeat, hover_bgRect._smooth);

this.graphics.drawRoundRectComplex(hover_pos.x, hover_pos.y, hover_w, hover_h,
hover_bgRect._radius[0], hover_bgRect._radius[1], hover_bgRect._radius[2], hover_bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = hover_w;
textField.height = hover_h;
textField.text = txt;
textField.setTextFormat(hover_textFormat);
textField.selectable = false;
textField.x = hover_pos.x + hover_textPadding.right;
textField.y = hover_pos.y + hover_textPadding.top;
textField.filters = hover_textFilt;
}
}

Full AdvAlertButton class:

package com.kircode.AdvAlert 
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.ui.Mouse;

/**
 * Advanced Alert window object.
 * @author Kirill Poletaev
 */
public class AdvAlertButton extends MovieClip
{

public var w:Number;
public var h:Number;
public var currentSkin:AdvAlertButtonSkin;
public var txt;

private var textFormat:TextFormat;
private var bgStroke:*;
private var bgRect:*;
private var pos:Point;
private var textPadding:TextPadding;
private var filt:Array;
private var textFilt:Array;

private var hover_w:Number;
private var hover_h:Number;
private var hover_textFormat:TextFormat;
private var hover_bgStroke:*;
private var hover_bgRect:*;
private var hover_pos:Point;
private var hover_textPadding:TextPadding;
private var hover_filt:Array;
private var hover_textFilt:Array;

private var textField:TextField;
public var over:Boolean = false;

/**
 * Button object placed in the alert window.
 * @paramlabel Text label of the button.
 */

public function AdvAlertButton(label:String, skin:AdvAlertButtonSkin = null) 
{
txt = label;
textField = new TextField();
addChild(textField);

if (skin == null) {
skin = new AdvAlertButtonSkin();
setSkin(skin);
currentSkin = null;
}else{
setSkin(skin);
}

updateDraw();

addEventListener(MouseEvent.ROLL_OVER, onOver);
addEventListener(MouseEvent.ROLL_OUT, onOut);
}

private function onOver(evt:MouseEvent):void {
over = true;
updateDraw();
Mouse.cursor = "button";
}

private function onOut(evt:MouseEvent):void {
over = false;
updateDraw();
Mouse.cursor = "auto";
}

public function setSkin(skin:AdvAlertButtonSkin):void {
currentSkin = skin;
w = skin.w;
h = skin.h;
textFormat = skin.textFormat;
bgStroke = skin.bgStroke;
bgRect = skin.bgRect;
pos = skin.pos;
textPadding = skin.textPadding;
filt = skin.filters;
textFilt = skin.textFilters;
hover_w = skin.hover_w;
hover_h = skin.hover_h;
hover_textFormat = skin.hover_textFormat;
hover_bgStroke = skin.hover_bgStroke;
hover_bgRect = skin.hover_bgRect;
hover_pos = skin.hover_pos;
hover_textPadding = skin.hover_textPadding;
hover_filt = skin.hover_filters;
hover_textFilt = skin.hover_textFilters;
}

public function updateDraw():void {
this.graphics.clear();

if(!over){
//filters
this.filters = filt;

// bg stroke
if (bgStroke is SolidColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness, bgStroke._lineColor, bgStroke._lineAlpha);
}
if (bgStroke is GradientColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineGradientStyle(bgStroke._gradientType, bgStroke._colors, bgStroke._alphas, bgStroke._ratios, bgStroke._matrix, bgStroke._spreadMethod, bgStroke._interpolationMethod, bgStroke._focalPointRatio);
}
if (bgStroke is BitmapStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineBitmapStyle(bgStroke._bitmap, bgStroke._matrix, bgStroke._repeat, bgStroke._smooth);
}

// bg fill
if (bgRect is SolidColorRect) this.graphics.beginFill(bgRect._backgroundColor, bgRect._alpha);
if (bgRect is GradientColorRect) this.graphics.beginGradientFill(bgRect._gradientType, bgRect._colors, bgRect._alphas, bgRect._ratios, bgRect._matrix, bgRect._spreadMethod, bgRect._interpolationMethod, bgRect._focalPointRatio);
if (bgRect is BitmapRect) this.graphics.beginBitmapFill(bgRect._bitmap, bgRect._matrix, bgRect._repeat, bgRect._smooth);

this.graphics.drawRoundRectComplex(pos.x, pos.y, w, h,
bgRect._radius[0], bgRect._radius[1], bgRect._radius[2], bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = w;
textField.height = h;
textField.text = txt;
textField.setTextFormat(textFormat);
textField.selectable = false;
textField.x = pos.x + textPadding.right;
textField.y = pos.y + textPadding.top;
textField.filters = textFilt;
}

if(over){
//filters
this.filters = hover_filt;

// bg stroke
if (hover_bgStroke is SolidColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness, hover_bgStroke._lineColor, hover_bgStroke._lineAlpha);
}
if (hover_bgStroke is GradientColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineGradientStyle(hover_bgStroke._gradientType, hover_bgStroke._colors, hover_bgStroke._alphas, hover_bgStroke._ratios, hover_bgStroke._matrix, hover_bgStroke._spreadMethod, hover_bgStroke._interpolationMethod, hover_bgStroke._focalPointRatio);
}
if (hover_bgStroke is BitmapStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineBitmapStyle(hover_bgStroke._bitmap, hover_bgStroke._matrix, hover_bgStroke._repeat, hover_bgStroke._smooth);
}

// bg fill
if (hover_bgRect is SolidColorRect) this.graphics.beginFill(hover_bgRect._backgroundColor, hover_bgRect._alpha);
if (hover_bgRect is GradientColorRect) this.graphics.beginGradientFill(hover_bgRect._gradientType, hover_bgRect._colors, hover_bgRect._alphas, hover_bgRect._ratios, hover_bgRect._matrix, hover_bgRect._spreadMethod, hover_bgRect._interpolationMethod, hover_bgRect._focalPointRatio);
if (hover_bgRect is BitmapRect) this.graphics.beginBitmapFill(hover_bgRect._bitmap, hover_bgRect._matrix, hover_bgRect._repeat, hover_bgRect._smooth);

this.graphics.drawRoundRectComplex(hover_pos.x, hover_pos.y, hover_w, hover_h,
hover_bgRect._radius[0], hover_bgRect._radius[1], hover_bgRect._radius[2], hover_bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = hover_w;
textField.height = hover_h;
textField.text = txt;
textField.setTextFormat(hover_textFormat);
textField.selectable = false;
textField.x = hover_pos.x + hover_textPadding.right;
textField.y = hover_pos.y + hover_textPadding.top;
textField.filters = hover_textFilt;
}
}


}

}

Here's an example of using these new features in custom skinning in main.as:

var mySkin:AdvAlertSkin = new AdvAlertSkin();
mySkin.addContent(warning_icon, new Point(5, 40));
mySkin.textPadding.left = 140;
mySkin.titleFilters = [new DropShadowFilter(0, 0, 0, 1, 3, 3, 2, 3)];
mySkin.textFilters = [new DropShadowFilter(1, 45, 0, 0.4, 0, 0, 5, 1)];

var myButtonSkin:AdvAlertButtonSkin = new AdvAlertButtonSkin();
myButtonSkin.textFilters = [new DropShadowFilter(1, 45, 0, 0.4, 0, 0, 5, 1)];
myButtonSkin.hover_textFilters = [new DropShadowFilter(1, 45, 0, 0.4, 0, 0, 5, 1), new DropShadowFilter(0, 0, 0, 1, 3, 3, 1, 3)];

AlertManager = new AdvAlertManager(this, stage, mySkin, myButtonSkin);
AlertManager.alert("This is an alert window with a custom skin and a dynamic content element.", "Example alert!", null, null, 500, 0, null, 160);

The results:



Thanks for reading!

No comments:

Post a Comment