Thursday, October 18, 2012

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

Today I'll 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 we'll 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 today's tutorial can be found here.

You can unpack the package now and look at the contents. You'll 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. There's 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 that's 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!


6 comments:

Aimo said...

Finally, now I may simply insert your library in my project. This is very nice of you, very nice and useful. Thank you very much!

Jury said...

It would be desirable to have a class that is easy to build tooltips in the text and the buttons.

Kirill Poletaev said...

That's a very good idea - I'll definitely think about it.

pilaxx said...

Thanks Kirill. I also like the idea of tooltips manager class.

Timo said...

Very clear and easy to read. It is really very helpful for students.
Thank you very much, Dude!

Math2sma8bks said...

The source code for today's tutorial can be found here.
But ...
Sorry, the page you were looking for in this blog does not exist.
Could You send the source code to my email (mat4saja@gmail.com)?
Thanks before, I'm waiting.

Post a Comment