Technology Lesson: AdvAlert AS3 class Download and How To Use Part 7

Friday, January 30, 2015

AdvAlert AS3 class Download and How To Use Part 7

Today Ill show you how to create a simple skin set.

By skin set I mean a few skins of the same design, but different functionality and goal.

For example, today well create 3 skins of one design for warning messages, information messages, and confirmation windows.

You can see the final results in the end of this tutorial.

The source code for todays tutorial can be found here.

You can unpack the package now and look at the contents. Youll see that the AdvAlert class is stored in the com folder, and there are 3 pictures and 2 sounds in the rsrc folder. The code of the example is in main.as file of the root folder.

The pictures and sounds from the rsrc folder are embedded into the final swf file. You can see that embedding resources and using them as dynamic content does not require you to use Flash IDE.

I will now explain what each part of main.as code does.

You can see that the first thing we do is declare the essential variables. Theres only one in this case - AlertManager:

// Essential variables
private var AlertManager:AdvAlertManager;

Then we embed each resource:

// Embedded resources
[Embed(source = "rsrc/warning.png")]
private var warning_icon:Class;
[Embed(source = "rsrc/info.png")]
private var info_icon:Class;
[Embed(source = "rsrc/confirm.png")]
private var confirm_icon:Class;
[Embed(source = "rsrc/critical.mp3")]
private var warning_sound:Class;
[Embed(source = "rsrc/info.mp3")]
private var info_sound:Class;

And then we declare 6 variables for 3 skins:

// Skins
private var skin_warning:AdvAlertSkin = new AdvAlertSkin();
private var buttonskin_warning:AdvAlertButtonSkin = new AdvAlertButtonSkin();
private var skin_info:AdvAlertSkin = new AdvAlertSkin();
private var buttonskin_info:AdvAlertButtonSkin = new AdvAlertButtonSkin();
private var skin_confirm:AdvAlertSkin = new AdvAlertSkin();
private var buttonskin_confirm:AdvAlertButtonSkin = new AdvAlertButtonSkin();

In the init() function we first set AlertManager to a new AdvAlertManager:

// Declare AlertManager
AlertManager = new AdvAlertManager(this, stage, null, null, null, true, 300, 0, 160);

And then proceed to stylize the 3 skins:

// Warning skin
skin_warning.bgRect = new SolidColorRect(0xe2e2e2, [5, 5, 5, 5], 1);
skin_warning.bgStroke = new SolidColorStroke(1, 0x000000, 0);
skin_warning.headerHeight = 34;
skin_warning.headerRect = new SolidColorRect(0x99ccff, [5, 5, 0, 0], 1);
skin_warning.headerPadding = new TextPadding(0, 0, 0, 0);
skin_warning.titleFormat = new TextFormat("Verdana", 22, 0xffffff);
skin_warning.titleFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];
skin_warning.textFormat = new TextFormat("Verdana", 15, 0x111111);
skin_warning.blurColor = 0x000000;
skin_warning.buttonbarPadding.bottom = 0;
skin_warning.addContent(warning_icon, new Point(5, 40));
skin_warning.textPadding = new TextPadding(5, 5, 5, 125);
buttonskin_warning.bgRect = new SolidColorRect(0x99ccff, [5, 5, 0, 0], 1);
buttonskin_warning.bgStroke = new SolidColorStroke(1, 0x000000, 0);
buttonskin_warning.textFormat = new TextFormat("Verdana", 17, 0xffffff, null, null, null, null, null, "center" );
buttonskin_warning.textFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];
buttonskin_warning.hover_bgRect = new SolidColorRect(0x7799bb, [5, 5, 0, 0], 1);
buttonskin_warning.hover_bgStroke = new SolidColorStroke(1, 0x000000, 0);
buttonskin_warning.hover_textFormat = new TextFormat("Verdana", 17, 0xffffff, null, null, null, null, null, "center" );
buttonskin_warning.hover_textFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];

// Information skin
skin_info.bgRect = new SolidColorRect(0xe2e2e2, [5, 5, 5, 5], 1);
skin_info.bgStroke = new SolidColorStroke(1, 0x000000, 0);
skin_info.headerHeight = 34;
skin_info.headerRect = new SolidColorRect(0x99ccff, [5, 5, 0, 0], 1);
skin_info.headerPadding = new TextPadding(0, 0, 0, 0);
skin_info.titleFormat = new TextFormat("Verdana", 22, 0xffffff);
skin_info.titleFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];
skin_info.textFormat = new TextFormat("Verdana", 15, 0x111111);
skin_info.blurColor = 0x000000;
skin_info.buttonbarPadding.bottom = 0;
skin_info.addContent(info_icon, new Point(5, 40));
skin_info.textPadding = new TextPadding(5, 5, 5, 125);
buttonskin_info.bgRect = new SolidColorRect(0x99ccff, [5, 5, 0, 0], 1);
buttonskin_info.bgStroke = new SolidColorStroke(1, 0x000000, 0);
buttonskin_info.textFormat = new TextFormat("Verdana", 17, 0xffffff, null, null, null, null, null, "center" );
buttonskin_info.textFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];
buttonskin_info.hover_bgRect = new SolidColorRect(0x7799bb, [5, 5, 0, 0], 1);
buttonskin_info.hover_bgStroke = new SolidColorStroke(1, 0x000000, 0);
buttonskin_info.hover_textFormat = new TextFormat("Verdana", 17, 0xffffff, null, null, null, null, null, "center" );
buttonskin_info.hover_textFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];

// Confirmation skin
skin_confirm.bgRect = new SolidColorRect(0xe2e2e2, [5, 5, 5, 5], 1);
skin_confirm.bgStroke = new SolidColorStroke(1, 0x000000, 0);
skin_confirm.headerHeight = 34;
skin_confirm.headerRect = new SolidColorRect(0x99ccff, [5, 5, 0, 0], 1);
skin_confirm.headerPadding = new TextPadding(0, 0, 0, 0);
skin_confirm.titleFormat = new TextFormat("Verdana", 22, 0xffffff);
skin_confirm.titleFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];
skin_confirm.textFormat = new TextFormat("Verdana", 15, 0x111111);
skin_confirm.blurColor = 0x000000;
skin_confirm.buttonbarPadding.bottom = 0;
skin_confirm.addContent(confirm_icon, new Point(5, 40));
skin_confirm.textPadding = new TextPadding(5, 5, 5, 125);
buttonskin_confirm.bgRect = new SolidColorRect(0x99ccff, [5, 5, 0, 0], 1);
buttonskin_confirm.bgStroke = new SolidColorStroke(1, 0x000000, 0);
buttonskin_confirm.textFormat = new TextFormat("Verdana", 17, 0xffffff, null, null, null, null, null, "center" );
buttonskin_confirm.textFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];
buttonskin_confirm.hover_bgRect = new SolidColorRect(0x7799bb, [5, 5, 0, 0], 1);
buttonskin_confirm.hover_bgStroke = new SolidColorStroke(1, 0x000000, 0);
buttonskin_confirm.hover_textFormat = new TextFormat("Verdana", 17, 0xffffff, null, null, null, null, null, "center" );
buttonskin_confirm.hover_textFilters = [new DropShadowFilter(1, 45, 0x000000, 0.7, 0, 0)];

I also have this bit of code that just displays the alert windows as an example, one after another (with some interaction involved). This code functions called confirm, warn, and info, which we will create shortly.

// Test different window types
var timer:Timer = new Timer(1000, 1);
timer.addEventListener(TimerEvent.TIMER, onTimer);
timer.start();
function onTimer(evt:TimerEvent):void {
warn("The specified E-mail address is not valid!", "Warning!", closeWarn);
}
function closeWarn(response:String):void {
confirm("Are you sure you want to exit?", "Confirmation", onYes, onNo);
}
function onYes():void {
info("You answered Yes!", "Notice!");
}
function onNo():void {
info("You answered No!", "Notice!");
}

Then we create 3 functions - warn, info and confirm, which use the 3 different skins:

public function warn(message:String, title:String, handler:Function = null):void {
var warnSound:Sound = new warning_sound();
AlertManager.reset(this, stage, skin_warning, buttonskin_warning, warnSound, true, 300, 0, 160);
AlertManager.alert(message, title, null, 0, handler);
}

public function info(message:String, title:String):void {
var infoSound:Sound = new info_sound();
AlertManager.reset(this, stage, skin_info, buttonskin_info, infoSound, true, 300, 0, 160);
AlertManager.alert(message, title);
}

public function confirm(message:String, title:String, handlerYes:Function = null, handlerNo:Function = null):void {
var infoSound:Sound = new info_sound();
AlertManager.reset(this, stage, skin_confirm, buttonskin_confirm, infoSound, true, 300, 0, 160);
AlertManager.alert(message, title, [new AdvAlertButton("Yes"), new AdvAlertButton("No")], 0, handler);
function handler(response:String):void {
if (response == "Yes") handlerYes.call();
if (response == "No") handlerNo.call();
}
}

And thats it! Now we can use these handy alert windows of different types in games and applications with minimum number of lines.

Using this principle, you can create your own skin sets and introduce new window types.

Thanks for reading!

Technology Lesson

Friday, January 30, 2015

AdvAlert AS3 class Download and How To Use Part 7

No comments:

Post a Comment