Sunday, October 14, 2012

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

Today I'll show you how to add skins to alert windows.

Declaring and applying a skin:

There are two types of skins - window skin and button skin. Both are similar in usage, but have different properties, so 2 different classes are used - AdvAlertSkin and AdvAlertButtonSkin.

To apply a custom skin, set the respective properties of AdvAlertManager constructor to AdvAlertSkin and/or AdvAlertButtonSkin objects:

var mySkin:AdvAlertSkin = new AdvAlertSkin();
var myButtonSkin:AdvAlertButtonSkin = new AdvAlertButtonSkin();
AlertManager = new AdvAlertManager(this, stage, mySkin, myButtonSkin);

When skins are defined like that, they all have default property values (won't be any different if you don't apply a custom skin at all).

To set a skin again, either use the reset() method of AdvAlertManager object or use setSkin() and setButtonSkin() methods:

AlertManager.setSkin(mySkin);
AlertManager.setButtonSkin(myButtonSkin);

Customizing skins:

Once a skin is declared, you can set its properties to customize your skin. If you're using FlashDevelop, or a similar IDE that automatically displays all public properties of an object when you're trying to set a property value.

AdvAlertSkin properties:

textPadding:TextPadding - Padding of the body text field.
headerPadding:TextPadding - Padding of the header box.
titlePadding:TextPadding - Padding of the title text field.
headerHeight:int - Height of the header box.
titleFormat:TextFormat - Format of the title text.
textFormat:TextFormat - Format of the body text.
selectable:Boolean - Should the text be selectable or not?
headerRect:* - Header box (graphics).
bgRect:* - Body box (graphics).
headerStroke:* - Header stroke (graphics).
bgStroke:* - Body stroke (graphics).
filters:Array - Array of filters to apply to the window.
blurColor:uint - Color of the blur screen that's behind the window.
blurAlpha:Number - Transparency of the blur screen.
buttonbarHeight:Number - Height of the button bar (invisible container of the buttons).
buttonbarPadding:TextPadding - Padding of the button bar.
buttonInterval:Number - Interval between buttons.
buttonbarAlign:String - Aligning of the buttons, possible values: "left", "center", "right".
dynamicContent:Array - Array of dynamic content elements.
textFilters:Array - Filters for the text field.
titleFilters:Array - Filters for the title field.

AdvAlertButtonSkin properties:

w:Number - Width of the button.
h:Number - Height of the button.
textFormat:TextFormat - Format of the button label.
bgStroke:* - Stroke of the background box (graphics).
bgRect:* - Background box (graphics).
pos:Point - Position of the button (if you ever need to tweak it).
textPadding:TextPadding - Padding for the text.
filters:Array - Filters for the button.
textFilters:Array - Filters for the text

PLUS all the same variable names with hover_ prefix in front of them. The hover_ properties are used for when the user rolls over the button with their mouse (or focuses with tab).

You can see that there's an unusual class used in some of these properties - TextPadding. This is a class I've written for easy padding management. You can set left, right, top and bottom properties of an object of that class by accessing the public properties, using the constructor, or calling the object's setPadding() method.

You've also probably noticed that I marked some properties as (graphics). There is no class defined for these properties, because there can be more than one suitable classes used, and those are: SolidColorRect, SolidColorStroke, GradientColorRect, GradientColorStroke, BitmapRect and BitmapStroke.

These are all part of the skinning system I made, and I will explain them all in detail in the next tutorial.

Thanks for reading!

No comments:

Post a Comment