For Beginner: Creating Advanced Alert Window class Part 19

Tuesday, January 27, 2015

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!

For Beginner

Tuesday, January 27, 2015

Creating Advanced Alert Window class Part 19

No comments:

Post a Comment