I actually built an Alert class a long time ago and have used it very frequently for my own personal use. I recently received some impetus to update it after finding out that one person actually copied my class and then passed it off as their own on the flashgods forum (It’s now been taken down).
And so I’ve now updated my Flash Alert Dialog class, a class which enables you to display a modal dialog message box with AS3 very much like the built in Alert for Flex. Here is an example showing how the Alert can be used:
Using the Alert class is very easy. After importing the class you simply need to ‘initialise’ the class with a call to the function Alert.init() passing as a parameter a reference to the stage like so:
import com.dVyper.utils.Alert; Alert.init(stage); |
Once this function has been called you can call Alert.show() to display a modal prompt at any time and from any class file.
What this means, is that you can use the Alert class extensively throughout your project, and instead of having to comment out all of the lines which have a call to Alert.show() (which is what you have to do if you use for example the trace() command), you simply have to comment out the call to Alert.init(). All calls to Alert.show() are ignored if Alert.init() is not called.
Here is more information on how you can use the Alert class:
Alert.show(Text:String, options:Object);
Parameters
Text:String - [optional] The text that appears in the Alert control.
options:Object - [optional] An object containing values of the properties of the Alert
The parameters that can be included in the ‘options’ Object are:
background:String - The type of background.
There are four background types to choose from:
- “none” - invisible background
- “nonenotmodal” - no background and make the area behind the Alert prompt focusable
- “simple” - simple colour background
- “blur” - blurred background
The “simple” style is used if a background type is not specified
Alert.show("Made by dVyper", {background:"blur"}); |
buttons:Array - An array (maximum of 3) containing the Strings of the buttons to be shown in the Alert prompt
Alert.show("Loading image.", {buttons:["OK"]}); Alert.show("Cannot load image!", {buttons:["Abort", "Retry", "Fail"]}); |
callback:Function - The function to be called when a button on the Alert prompt has been clicked. When the function is called the name of the button that was clicked will be passed to that function as a String.
Alert.show("Do you want to save your changes?", {buttons:["Yes", "No"], callback:handleReponse}); function handleResponse(response:String):void { if (response == "Yes") { saveChanges(); } else { exitWithoutSaving(); } } |
colour:int - Main colour for the Alert
Alert.show("Here is a nice golden alert!", {colour:0xff9900}); |
promptAlpha:Number - Alpha of the Alert prompt. Only the prompt’s background is affected - the Alert background and the prompt’s text and buttons will be unaffected
Alert.show("Can you see through me?", {promptAlpha:0.4}); |
textColour:int - Colour of the text shown in the Alert prompt
Alert.show("I love white text", {colour:0x000099, textColour:0xFFFFFF}); |
position:Point - Position of the Alert prompt
Alert.show("Made by dVyper", {position:new Point(123, 456)}); |
If anyone would like me to include more functionality or has done so themselves, please let me know at info {at] fatal-exception [dot} co {dot] uk
Alert.as
Alert example source files
This information can also be viewed in the articles section.
Enjoy!
June 14th, 2009 at 02:19
Hi, interest post. I’ll write you later about few questions!
June 15th, 2009 at 11:34
The article is ver good. Write please more
June 16th, 2009 at 14:42
Hi there,
Nice Alert class you’ve made here. Just a few questions though:
1) Could this code be hypothetically modified to display another movie clip or external source (e.g. another SWF file) inside of the box instead of text with buttons?
2) Can the dimensions of this also be dynamically adjusted (i.e. if some auto-scaling has been applied to the main SWF based on the browser/flash player dimensions)?
3) Are the source files free for commercial use, as well as personal; or do we need some sort of permission from the author for this kind of intent (i.e. you, I guess)?
Regards,
Jon.
June 16th, 2009 at 21:13
How soon will you update your blog? I’m interested in reading some more information on this issue.
June 17th, 2009 at 21:10
Not a big deal, but your examples there have “callBack” as the property when it should be “callback” (all lowercase). The camel case version won’t work. Other than that it is suiting my purposes nicely, thanks for saving me some time and effort!
June 18th, 2009 at 09:19
Hi,
@Jon
1) It could be modified in theory. It would mean modifying the ‘createPrompt’ method in the source file quite heavily. I think it can definitely be done but I would have to try it out to make sure.
2) No the dimensions of the Alert aren’t adjustable after the Alert has been shown (because the Alert is statically created so you have no reference to it).
3) Yes the source file are indeed free for whatever use you wish. If anyone does modify it for their needs and makes good use of the class it would be nice of them to inform me to help me improve it myself
@Lee
Thanks for that - I’ve fixed the error
I’ve updated the example as the ‘position’ property was strangely missing from the class. It should work fine now. Thanks for the feedback
June 18th, 2009 at 18:22
Hey there,
I like your class. I made a small modification to it.
I added stroke hinting for all of the strokes, added a borderColour option, and rounded prompt position values (to promote better strokes)
http://pastie.org/516620
July 19th, 2009 at 02:11
Hi!
I think this is a very useful tool. But I cannot get this to work. Where should I put the class file? In the same place of the flash file?
Yes, I’m pretty beginner.
July 19th, 2009 at 21:17
When I click the Tab-button I can highlight and click (Space-button) on items that are behind.
I wrote simple function of more than a year ago (it’s not elegant solution, but works):
private function disableEnableTab(parent:DisplayObjectContainer, prop:Boolean):void {
for (var i:uint = 0; i<parent.numChildren; i+=1) {
var elem:DisplayObjectContainer = parent.getChildAt(i) as DisplayObjectContainer;
if (elem is DisplayObject) {
elem.tabEnabled = prop;
}
}
}
so, when U show Alert - disableEnableTab(parent, false);
and when hide - disableEnableTab(parent, true);
I not looked into your code and do not know if my code can help you, but this bug is very serious and must be corrected.
Tnx and sorry for my English
July 19th, 2009 at 21:24
good flash alert component (with sources) I found here:
http://developer.yahoo.com/flash/astra-flash/alertmanager/examples.html
July 19th, 2009 at 22:00
another thing…
if you use a modal window (all “background” options except “nonenotmodal”) and when resize the movie - the background (”myBackground”) does not change size with it.
in some cases it is also important
Tnx!
July 20th, 2009 at 13:19
@Ares:
This page should help: http://www.gotoandlearn.com/play?id=30
You setup a folder which houses all of the custom classes you will collect on your travels and then tell Flash where the classes live so you can access them in any project built with Flash. Although the tutorial uses AS2 the steps should still work for AS3. I hope this helps.
@i1:
You make some good points about being able to tab on elements behind the Alert and the fact that the Alert background does not resize. I’m aware of these, but as the Alert was built primarily for debug purposes I didn’t handle these cases. However I will take your points and think about improving the Alert class in future
July 23rd, 2009 at 18:46
Pretty cool post. I just stumbled upon your blog and wanted to say
that I have really liked reading your blog posts. Anyway
I’ll be subscribing to your blog and I hope you post again soon!
August 20th, 2009 at 15:39
Beautiful work. dVyper, you are a lantern that shows people the way. I will be looking forward to more of your work.
August 25th, 2009 at 06:24
Thank you very much for sharing this, and especially for providing a deployment package that works right out of the box.
September 6th, 2009 at 07:21
Thanks a lot. This is awesome.
October 16th, 2009 at 13:01
Hi:
Great class, thank you.
I have a multi-language site so the names/text of the buttons are dynamic. Therefore, the response (in the form of a string, text of the button) was no good in order to see what button had been clicked.
The way I got around this is:
- modified Alert.as
added “public static var botsNames:Array=new Array(); ”
added “botsNames=allButtons;” in assignListeners function
Then in your main movie you can do:
var buttons:Array = new Array();
buttons.push(”yes”); (and “oui, or whatever in the language”)
buttons.push(”no”);
Alert.show(Text.text, {buttons:buttons, callback:showAlertResponse});
Alert.botsNames[0].name=”1″;
Alert.botsNames[0].name=”2″;
And then you´d check for 1 or 2 independently of the text in the button.
Dirty, but woks.
November 9th, 2009 at 03:56
coooooool!
November 23rd, 2009 at 19:42
I need to add a text input box to the Alert, but can’t get it to display correctly. Not sure what the default layout is, and how this is being set. Can anyone see how to do this? I tried in Alert.as:
var addWordsText:TextField = new TextField;
addWordsText.type = TextFieldType.INPUT;
addWordsText.x = 200; //tried experimenting with x and y
addWordsText.y = 100;
addWordsText.width = 20;
addWordsText.height = 10;
addWordsText.text = “hi!”;
myAlert.addChild(addWordsText);
December 17th, 2009 at 23:33
This is really great! How would I go about changing the font of the text? I’ve added a format variable to the AlertOptions object and I’m currently able to pass in a TextFormat object. The font family itself doesn’t change but if I vary the size of the parameter it does. Any thoughts?
December 22nd, 2009 at 16:53
Thank you!
January 11th, 2010 at 10:21
[...] donde se le notifica al usuario de la acción y se le pide que confirme. Aprovecho para dejarle la referencia de esta clase Alert que es muy buena y útil para muchos casos, ya sea para proyectos en AS3, Flex o AIR. Clic para ver [...]
January 19th, 2010 at 15:11
Really nice :-).. I found a problem with the buttons, as the width/ height is fixed, if I put in long name like say “try again and again”, the text on the button is cropped..
February 20th, 2010 at 19:53
That’s a great job!
Thx man.
March 4th, 2010 at 19:49
Great class! Thanks for making available.
Just found something that might be of value to others.
My first use for this is with Google Maps, to show an alert when a problem getting directions. Worked fine in Flash Development atmosphere. BUT, when used on a web page, got an error (when alert called). Error message at bottom.
Since was an access problem with Google, guessed that had to do with functions working with the background, which was the google map. Was using only the simple alert. I changed the background to “none”, and all worked fine.
Thought this might help someone else in future.
Keith
—- Flash error:
SecurityError: Error #2123: Security sandbox violation: BitmapData.draw: http://localhost/aamachineco/mapResources/aaMap_directions.swf cannot access http://mt1.google.com/vt/lyrs=m@118&hl=en&src=api&x=597&y=774&z=11&s=Galil. No policy files granted access.
at flash.display::BitmapData/draw()
at com.dVyper.utils::Alert$/createBackground()
at com.dVyper.utils::Alert$/show()
at aaMap_directions_fla::MainTimeline/onDirClick()
March 9th, 2010 at 17:20
Hello, I’m currently using your Alert class in my facebook game
http://apps.facebook.com/bluemoon/
I noticed that the alert dialog takes over all the mouse functions when its present, and thus disabling my sound toggle button until the initial dialog box is cleared. Do you have anyway allowing my sound toggle button to be used without having to close the alert dialog first?
Thanks and thanks for sharing this class.
March 11th, 2010 at 00:50
@Jerome S
There is an option I provide in the class which should help.
Alert.show(”Test alert”, {background:”nonenotmodal”});
With the background option correctly set, you should be able to interact with elements behind the Alert.
March 24th, 2010 at 21:29
I’ve modified your class in order to close the alert by pressing the Enter key.
If you can contact me by mail: neton_12@hotmail.com
PD:
March 24th, 2010 at 21:30
Thank you very much for creating and uploading this class
April 6th, 2010 at 11:18
Thank you very much for this class! You have solved many issues with that.
July 4th, 2010 at 22:27
That class you published here is exactly what I need. Thank you very much!
July 6th, 2010 at 10:14
Nice class. thank you