• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 7. Checking Input & Displaying Er... > Building the Error Message Dialog

Building the Error Message Dialog

Unlike JavaScript, which has a prebuilt message dialog (using the alert() method) built into the language, you have to build your own message dialog in Flash. The dialog you will build in this lesson has the box itself, a text string, an OK button, and a close button. All of these are easy to build from the graphical standpoint, especially since you already have a dialog-like symbol in your library—the Description dialog used throughout the last lesson. In this task, you will duplicate and modify that dialog as the basis for a new one.

Open sim_dsn.fla from the Lesson07/Start folder. This should be the same as the file you completed in the previous lesson, so you could use your own if you prefer. Press F11 to open the library, if it isn't already open.

Using the library, you can do more than drag symbols onto the stage. You can edit, delete, duplicate, and rename symbols, among other things.

Select the directionsMC symbol, and choose Duplicate from the library options menu, opened by clicking the icon in the upper-right corner of the Library panel.

One way to get familiar with any Macromedia program is to spend some time looking around each panel's options menu. As you can see from the figure, quite a few specialized commands are available in the library options menu.

In the Duplicate Symbol dialog, name the new symbol errorMC, set its behavior to Movie Clip, and press OK.

As you know, the key difference between graphic symbols and movie clip symbols is that movie clip symbols have their own timelines that run independently of the main timeline—making them perfect for complex animations. You may therefore think that a movie clip is an odd choice for a one-frame dialog. But there is another difference between graphic symbols and movie clips, one that is of incredible importance when working with ActionScript. Flash recognizes movie clips as scriptable objects in their own right.

Remember in Lesson 4, when you were working with Dreamweaver, how you added the Show-Hide Layer and Drag Layer behaviors? What makes those layer-based interactions work is that JavaScript can recognize the layers as objects with properties, and it can change those properties programmatically (that is, through a script).

The same thing is happening here with movie clips. ActionScript can recognize a movie clip and programmatically change most of its properties, and movie clips have a lot of properties. Movie clip properties include size, visibility, position, alpha (amount of transparency), rotation, and many more. If think about how much you can accomplish by simply attaching a property-changing script to a simple button, the realm of possibility with Flash properties starts opening up.

For this reason, almost all of the symbols in my Flash movies are either movie clips or buttons since they are the most scriptable.

Double-click the errorMC symbol in the library to open it in symbol-editing mode.

Symbol-editing mode displays the symbol only, so the stage and timeline you see belong just to that symbol, not the main movie. Use symbol-editing mode to modify symbols.

Be aware that any time you modify a symbol, all of its placed instances on stage will be updated. In this case, the point is moot because there are no instances of errorMC on stage.

Click in the white area of the dialog once, which selects the white fill. Click the Fill color box in the Property inspector and change the fill color to light gray (hexadecimal #CCCCCC).

Users of traditional vector-editing programs such as Macromedia Freehand, Fireworks, and Adobe Illustrator may find the independent selection of fills and strokes unusual. Flash vector-graphic editing is unique, so refer to the Using Flash guide to learn more about its features and quirks.

Click to select the navy blue title bar, and change its color to deep red (#990000).

This step is performed just like the previous step, only you are changing the title bar to red, which alone should communicate to most users that something has gone wrong.

Switch to the text tool, click in the word Description, and change it to Error.

By aligning the text to the center, the positioning is no problem, even after you change the length of the text string. When positioning text objects in the center of something, choose center alignment, even if the text exactly fits the size of the text block. Likewise, if the text block is flush-left (or right), align it to the left (or right).

Using the text tool, add a text block in the upper half of the blank space with the following text: Be sure to enter the information exactly as it appears in the directions. Format it with a sans-serif font such as Tahoma, size 13, no bold or italic, left-aligned.

By adding the text directly to the symbol, you are essentially hard-wiring this particular message to the dialog, which limits its applicability in other circumstances. For instance, if you wanted to display an error indicating that the user clicked in the wrong place, you would have to duplicate this dialog and change the text.

Later in the book, you'll learn how to make the text string dynamic. Using dynamic text, you can have a generic error dialog and can add the specific error message programmatically through ActionScript. That is unnecessary in this training application, though, since there is only one situation for which you need an error message, and that's only if a user enters the wrong text.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint