Monday, October 15, 2012

AdvAlert AS3 class - Download and How To Use: Part 4

In this part I'll explain alert window skinning in detail.

There are 3 classes for rectangle fills included with AdvAlert, and 3 classes for stroke fills. They are: SolidColorRect, SolidColorStroke, GradientColorRect, GradientColorStroke, BitmapRect and BitmapStroke.

You can use them with "Rect" properties of AdvAlertSkin and AdvAlertButtonSkin objects.

You can use any kind of fill in combination with any kind of stroke. In the examples below, I'll use the same-type fills for both rectangles and strokes, but as I said, you are free to experiment with different combinations.

First of all, SolidColorRects and SolidColorStrokes. These two classes are the most basic color fill classes in AdvAlert.

The SolidColorRect class has only 3 properties - backgroundColor, cornerRadius and alpha. The cornerRadius property contains an array of 4 values - numbers that indicate radius of top left, top right, bottom left and bottom right corners of the rectangle.

The SolidColorStroke class also has 3 properties - lineThickness, lineColor and lineAlpha.

Here's an example set of skins (window skin and button skin) using these two classes:

var mySkin:AdvAlertSkin = new AdvAlertSkin();
mySkin.bgRect = new SolidColorRect(0x222222, [13, 0, 0, 13], 1);
mySkin.bgStroke = new SolidColorStroke(2, 0xffffff, 1);
mySkin.headerRect = new SolidColorRect(0xffffff, [10, 0, 0, 10], 1);
mySkin.titleFormat = new TextFormat("Verdana", 18, 0x000000);

var myButtonSkin:AdvAlertButtonSkin = new AdvAlertButtonSkin();
myButtonSkin.bgRect = new SolidColorRect(0x444444, [10, 0, 0, 10], 1);
myButtonSkin.bgStroke = new SolidColorStroke(2, 0xffffff, 1);
myButtonSkin.textFormat = new TextFormat("Verdana", 14, 0xffffff, null, null, null, null, null, "center");
myButtonSkin.hover_bgRect = new SolidColorRect(0xffffff, [10, 0, 0, 10], 1);
myButtonSkin.hover_bgStroke = new SolidColorStroke(2, 0xffffff, 1);
myButtonSkin.hover_textFormat = new TextFormat("Verdana", 14, 0x000000, null, null, null, null, null, "center");

AlertManager = new AdvAlertManager(this, stage, mySkin, myButtonSkin);
AlertManager.alert("Simple message!", "Title", [new AdvAlertButton("OK"), new AdvAlertButton("Cancel")]);



The next classes are GradientColorRect and GradientColorStroke.

The properties of these classes are similar to SolidColorStroke, however, there are way more of them. If you ever used AS3 drawing API to draw gradient boxes, you won't have any difficulty working with these classes - all of their gradient-related properties are basically taken from beginGradientFill().

The properties of GradientColorRect are: gradientType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRation and cornerRadius.

The properties of GradientColorStroke are: lineThickness, gradientType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRation.

I'll remind that if you're using FlashDevelop or a similar IDE, the description of each property and method is displayed when you're about to write it.

Here is an example of using gradient fills to create an alert window:

var mySkin:AdvAlertSkin = new AdvAlertSkin();
var myMatrix1:Matrix = new Matrix();
myMatrix1.createGradientBox(300, 200, 1.57, 100, 150);
mySkin.bgRect = new GradientColorRect(GradientType.LINEAR, [0x000000, 0x555555], [1, 0.9], [0, 255], myMatrix1, "pad", "rgb", 0, [10, 10, 0, 0]);
var myMatrix2:Matrix = new Matrix();
myMatrix2.createGradientBox(300, 100, 1.57, 100, 150);
mySkin.bgStroke = new GradientColorStroke(2, GradientType.LINEAR, [0xffffff, 0x000000], [0.8, 0.8], [0, 255], myMatrix2, "pad", "rgb", 0);
var myMatrix3:Matrix = new Matrix();
myMatrix3.createGradientBox(400, 100);
mySkin.headerRect = new GradientColorRect(GradientType.LINEAR, [0xffffff, 0xffffff], [1, 0], [0, 255], myMatrix3, "pad", "rgb", 0, [10, 10, 0, 0]);
mySkin.titleFormat = new TextFormat("Verdana", 18, 0xffffff);

var myButtonSkin:AdvAlertButtonSkin = new AdvAlertButtonSkin();
var myMatrix4:Matrix = new Matrix();
myMatrix4.createGradientBox(100, 40, 1.57, 100, 0);
myButtonSkin.bgRect = new GradientColorRect(GradientType.LINEAR, [0x000000, 0x000000], [0, 1], [0, 255], myMatrix4, "pad", "rgb", 0, [0, 0, 10, 10]);
myButtonSkin.bgStroke = new GradientColorStroke(2, GradientType.LINEAR, [0xffffff, 0x000000], [0.8, 0.8], [0, 255], myMatrix4, "pad", "rgb", 0);
myButtonSkin.textFormat = new TextFormat("Verdana", 14, 0xffffff, null, null, null, null, null, "center");
myButtonSkin.hover_bgRect = new GradientColorRect(GradientType.LINEAR, [0x000000, 0xffffff], [0, 1], [0, 255], myMatrix4, "pad", "rgb", 0, [0, 0, 10, 10]);
myButtonSkin.hover_bgStroke = new GradientColorStroke(2, GradientType.LINEAR, [0xffffff, 0x000000], [1, 1], [0, 255], myMatrix4, "pad", "rgb", 0);
myButtonSkin.hover_textFormat = new TextFormat("Verdana", 14, 0xffffff, true, null, null, null, null, "center");

AlertManager = new AdvAlertManager(this, stage, mySkin, myButtonSkin);
AlertManager.alert("Simple message!", "Title", [new AdvAlertButton("OK"), new AdvAlertButton("Cancel")]);



It is also possible to use Bitmap data when skinning alert windows, using BitmapRect and BitmapStroke classes. You can draw your own skin in a graphical editor and then just import it as bitmap and use it in your windows.

The BitmapRect constructor has 5 properties: bitmap, matrix, repeat, smooth and cornerRadius.

The BitmapStroke also has 5 properties: lineThickness, bitmap, matrix, repeat and smooth.

Below is an example of using a real-time generated perlin noise bitmap data as background and strokes for alert window. I also use solid colors for buttons and header.

var mySkin:AdvAlertSkin = new AdvAlertSkin();
var bgData:BitmapData = new BitmapData(400, 200, false, 0xffffffff);
bgData.perlinNoise(100, 100, 17, 218, true, true, 1, false);
mySkin.bgRect = new BitmapRect(bgData, null, true, false, [10, 10, 10, 10]);
var strokeData:BitmapData = new BitmapData(400, 200, false, 0xffffffff);
strokeData.perlinNoise(50, 50, 10, 218, true, true, 1, false);
mySkin.bgStroke = new BitmapStroke(3, strokeData, null, true, true);
mySkin.headerRect = new SolidColorRect(0x000000, [10, 10, 10, 10], 0.5);

var myButtonSkin:AdvAlertButtonSkin = new AdvAlertButtonSkin();
myButtonSkin.bgRect = new SolidColorRect(0x000000, [10, 10, 10, 10], 0.5);
myButtonSkin.bgStroke = new SolidColorStroke (1, 0x000000, 0);
myButtonSkin.hover_bgRect = new SolidColorRect(0xff0000, [10, 10, 10, 10], 0.5);
myButtonSkin.hover_bgStroke = new SolidColorStroke (1, 0x000000, 0);

AlertManager = new AdvAlertManager(this, stage, mySkin, myButtonSkin);
AlertManager.alert("Simple message!", "Title", [new AdvAlertButton("OK"), new AdvAlertButton("Cancel")]);



Next time I'll show you how to use dynamic content in alert window skins.

Thanks for reading!

No comments:

Post a Comment