Friday, September 21, 2012

Creating Advanced Alert Window class: Part 19

Today we will work on the ability to create custom skins for buttons with ease.

Start by creating a new class meant specifically for skinning buttons. Call it AdvAlertButtonSkin.as.

Inside, declare and set values to all the skinning variables from AdvAlertButton, plus a new variable called filters (which is an array and which is enmpty by default):

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 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 = [];
}

}

}

Go to AdvAlertButton.as, declare a new variable called filt (which will hold the filters values):

private var filt:Array;

Update the constructor so that it can receive an optional skin parameter, set it to a new AdvAlertButtonSkin object by default. Pass the skin value to setSkin():

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

setSkin(skin);

updateDraw();
}

In setSkin() we receive all the values from the skin and apply them to local variables:

public function setSkin(skin:AdvAlertButtonSkin):void {
w = skin.w;
h = skin.h;
textFormat = skin.textFormat;
bgStroke = skin.bgStroke;
bgRect = skin.bgRect;
pos = skin.pos;
textPadding = skin.textPadding;
filt = skin.filters;
}

Add a line to updateDraw() which updates filters:

//filters
this.filters = filt;

Full AdvAlertButton.as code so far:

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

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

public var w:Number;
public var h:Number;
private var textFormat:TextFormat;
private var bgStroke:*;
private var bgRect:*;
private var pos:Point;
private var textPadding:TextPadding;
private var filt:Array;

private var textField:TextField;
private var txt;

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

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

setSkin(skin);

updateDraw();
}

public function setSkin(skin:AdvAlertButtonSkin):void {
w = skin.w;
h = skin.h;
textFormat = skin.textFormat;
bgStroke = skin.bgStroke;
bgRect = skin.bgRect;
pos = skin.pos;
textPadding = skin.textPadding;
filt = skin.filters;
}

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

//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;
}


}

}

You can now go to main.as and create custom skins for buttons. Example:

var cancelSkin = new AdvAlertButtonSkin();
cancelSkin.bgRect = new SolidColorRect(0xff4444, [3, 3, 3, 3]);
cancelSkin.bgStroke = new SolidColorStroke(2, 0x993333);
cancelSkin.filters = [new GlowFilter(0xff0000,1,6,6,2,3)];

AlertManager = new AdvAlertManager(this, stage.stageWidth, stage.stageHeight);
AlertManager.alert("This is an alert window with the default skin.", "Example alert!", [new AdvAlertButton("OK"), new AdvAlertButton("Cancel", cancelSkin), new AdvAlertButton("Back")]);

The results:



Thank for reading!

No comments:

Post a Comment