You know those annoying boxes that pop up on your screen when you do
something wrong? They're called Alert boxes (or dialogs) and Flash MX
2004 ships with a component for creating these annoying, but sometimes
necessary, little pests. Remember that although you have rope, you don't
necessarily have to hang yourself. Make sure you try your best to make
it hard for your users to make mistakes instead of relying on Alert boxes
to inform them of their mistakes after they've made them. A great example
is a textfield in a form. If the field is for numeric input, make sure
you restrict the field so it only accepts numeric characters instead of
allowing all characters and then popping up an error message to tell the
user that they've entered illegal characters in your text field. This
is, like much of usability design, perhaps a simple thing that you would
think should be common sense but you would be surprised how many applications
get it wrong. That said, let's learn how to use the Alert component.
Continue using the same FLA that you started with in the first Button
example, above. If you have closed that file (or were not following
along), open up button.fla from your downloaded source files.
Drag an instance of the Alert component on the Stage from your Components
panel. It doesn't matter which layer you drag it on to because next
I'm going to ask you to delete the component from the stage. (No, I'm
not playing with you! We just need the component to be in the movie's
library, not on Stage, to work.)
Delete the Alert instance you just dragged on Stage.
So, if the Alert component is not placed on the Stage, how do you
use it? Easy! The Alert component is controlled completely by code.
To see how this is done, modify the script in Frame 1 of the Actions
layer to display an Alert when the button is clicked, as shown below.
// load the Alert class import mx.controls.Alert; // create the button listener myButtonListener = new Object();
// create the click method on the listener
// to listen for button clicks
myButtonListener.click = function ()
{
// Display an alert
// where the message is "Oh no, you did..."
// and the title of the dialog is "Very Bad Error".
// Show a NO and CANCEL button and make the
// NO button the default button.
Alert.show
(
"Oh no, you did something terrible. The sky is going to fall on your head!",
"Very Bad Error",
Alert.NO | Alert.CANCEL,
_root, alertHandler,
Alert.NO
);
}
// make the myButtonListener listener listen
// for click events on myButton
myButton.addEventListener("click", myButtonListener );
// create the alert handler callback
alertHandler = function ( theEvent )
{
// check which button the user pressed
if (theEvent.detail == Alert.NO)
{
// no button
trace ("No? What do you mean, \"no?\"");
}
else if (theEvent.detail == Alert.CANCEL)
{
// cancel button
trace ("Hey! Who said you could cancel?");
}
}
Test the movie. If you write alerts like this, you better make sure
that you have a large support department!
Here are a couple of things to note about the code in this example.
First off, notice how you need to import the Alert class. This is necessary
since you're calling a method on Alert through ActionScript. Next, in
the click handler of the myButtonListener listener, you call Alert.show().
Notice the unusual indentation of the method call. I've used this here
for the sake of legibility because we have quite a few, lengthy arguments.
Let's go through each of the arguments that the show() method takes:
The first argument is a String that holds the message to show inside
the component. The second argument is the title of the alert box. The
third argument is rather interesting: you use it to tell the component
which buttons to display. All you need to know to use the component
is that the possible buttons are Alert.YES, Alert.NO, Alert.OK and Alert.CANCEL
and if you want more than one of them to display, you need to place
a pipe character between them, as shown in the code.
Pipe me some Bitwise OR
The pipe character you see is known as a bitwise OR operator. Don't
confuse this with a double-pipe in ActionScript, which is two pipe
characters side-by-side and used as a logical OR. You mostly encounter
logical ORs in conditional statements such IF:
if (someValue == someOtherValue || someValue == yetAnotherValue)
{
// do something serious
}
A bitwise OR, on the other hand, is used to alter the bits within
an integer. As you have no doubt heard, everything in a computer
is comprised of long strings of zeros and ones. Thus, to a computer,
an integer is nothing more than its binary representation. Here's
an example to show how bitwise OR works:
2 | 8 == 10.
In binary, 2 is 0010 (1x0 + 2x1 + 4x0 + 8x0) and 8 is 1000 (1x0
+ 2x0 + 4x0 + 8x1). In a bitwise OR operation if both bits are zero,
the result is zero, otherwise it means that at least one of the
bits is a one and the result is one. Check it out:
0010 == 2
|1000 == 8
----
1010 == 10
All right, so you're getting cloudy-eyed and wondering what the
heck all this has to do with showing a simple Alert. Well, the Alert
component expects you to give it an integer code that is the bitwise
OR of the integer values that represent all of the various buttons
that you want to display on the dialog. Instead of having you remember
these values, the friendly Macromedia engineers created easy to
remember constants in the Alert class to help you. Thus, when you
specify Alert.NO | Alert.CANCEL, you are actually passing the method
a numeric value based on the bitwise OR of the values contained
in the constants NO and CANCEL in the Alert class. (ActionScript
doesn't really have true constants, we just name the variables with
uppercase letters and make believe. A true constant would give a
compiler error if you tried to change its value.) In fact, the Alert
component really does use the values of 2 for NO and 8 for CANCEL.
What's really great about bitwise OR, especially when used with
multiples of 2 is that it's really easy to check whether a number
contains another with a simple bitwise AND. (In a bitwise AND, if
both bits are one, result is one, otherwise the result is zero.)
Thus, the Alert component checks to see if it should display the
NO button in the following way:
How cool, so all the Alert component has to do is check the value
you passed with a bitwise AND to see if you want a certain button
displayed. Now do you see why we have to do it this way? What? You've
stopped reading and are watching South Park, instead? Shame on you!
Although it's way more detail than you need to use the component,
isn't it nice to know How Things Work?
Finally, to finish off the method call, we pass in the parent timeline
(this is where the component looks for the callback handler, which we
define next), the callback handler (which gets called when the user clicks
on a button to dismiss the alert) and the default button (in this case,
the default button is the No button).
You are in no way constricted to using the default four buttons provided
by Flash. If you'd rather have a "Maybe" button on your alert,
for example, all you need to do is set the label of one of the four buttons
to "Maybe". (For obvious reasons, I don't recommend that you
try this at home.) You can extend the previous example to customize the
displayed Alert component by adding the following code to the top of the
myButtonListener.click() method, as shown below:
myButtonListener.click = function ()
{
// set the label of the No button
Alert.noLabel = "Have a cow.";
// set the label of the Cancel button
Alert.cancelLabel = "Freak Out!";
// set the default button dimensions
Alert.buttonWidth = 200;
Alert.buttonHeight = 150;
// Display an alert
// where the message is "Oh no, you did..."
// etc.
}
That code will result in an alert box that only a rather jumpy elephant
could love. You can see the resulting Flash application below (click on
the button to see the Alert).
In addition to the noLabel and cancelLabel, you can also change the yesLabel
and okLabel. This gives you four completely customizable buttons for your
alerts.
Download Source Files (5MB!) 
go to previous page 