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

Lesson 7. Checking Input & Displaying Er... > Adding Functioning OK and Close Butt...

Adding Functioning OK and Close Buttons to the Error Dialog

So far the dialog is little more than the original description dialog, upon which it is based. But this one needs some close buttons so users can make it go away and get back to work. In this task, you will add both the button graphics as well as the scripts that make them work.

Select the rectangle tool, set its roundness to 9, and draw out a rectangle that will represent the OK button. The rectangle's size and position should display the following values in the Property inspector: W = 62, H = 27, X = –31, Y =27.

Rounded rectangles are great for buttons, because they create such nice pill shapes.

One of the advantages of vector graphics is that you can specify position and size settings numerically, enabling you to get pixel-perfect precision. If you followed this step, your button should be identical to the one I drew in every respect except the color.

Select the rectangle's fill and change the fill color to #EEEEEE, which is a light gray. If the stroke is not black, double-click to select it, and choose black (#000000) from the Stroke color box in the Property inspector. Using the text tool, enter OK in the middle of the new rectangle, using Tahoma, black, size 13, no bold or italic.

You won't find #EEEEEE among the colors in the color pop-up. However, you can enter the value in the hexadecimal value box in the pop-up. You can enter upper- or lowercase characters.


The colors shown by default in the Flash color box pop-ups are limited to those in the Web-safe palette, the lowest common denominator list of 216 colors that all Macintosh and Windows systems had in the mid-1990s, when many computer systems could display only 256 colors. On today's systems, the vast majority of which can display millions and millions of colors, the Web-safe palette is practically obsolete. The fact that gray #EEEEEE is not in the list signifies that it is not in the Web-safe palette, but this should not be a major concern.

Draw a close box in the upper-right corner, as shown in the figure. Set the color of the rectangle's and lines' strokes to a medium gray, #CCCCCC.

I started by zooming in on the area. To zoom in, select the zoom tool and click in the desired area. Then I drew a square. To draw a perfect square, hold down the Shift key while you drag with the rectangle tool (be sure to set rounded corners back to 0, if necessary). Finally, still zoomed in, I drew the X by dragging from one corner to the opposite corner with the line tool. Then I selected the pointer tool and reselected the line tool (so that the new line is not continuous with the one drawn a moment ago), and I drew from one of the empty corners to its opposite.

When you are done, return to 100 percent view by double-clicking on the zoom tool in the Tools panel.

Select frame 1 of the invisible button layer, and drag two instances of invisibleB onto the stage. Use the free transform tool to resize them so each covers one of the two new buttons as closely as possible.

Although they look like buttons, the OK and close buttons aren't really buttons; they are just graphics. To give them button functionality, you need to lay the invisible buttons over them, and then you can add the scripts necessary to make the error dialog box disappear.

Select the Invisible button over the OK button graphic, and in the Actions panel (in expert mode), enter the following script.

							on (release) {

As you know, this simple script makes the error dialog disappear. Here's how it works. In a few minutes, you will drag an instance of the errorMC movie clip symbol onto the stage. Remember, at this point you are still in the symbol editor. Once you drag it on stage, you can give it an ID, or instance name. It is through this instance name that Flash ActionScript can find this movie clip. You will give the movie clip instance an instance name of error. Once it can see the movie clip instance, Flash will also be able to see its properties, including the visibility property.

The catch is that this script is attached to an invisible button inside the movie clip. The movie clip instance, and therefore its name, are stored on the main timeline, while the button is inside the movie clip's timeline. The script on the button can't see the movie clip instance name from the inside. The way to circumvent this problem is to add the _root prefix. The _root prefix refers to the main timeline. Now Flash looks for an instance called error on the main timeline. Since that is where the instance is, Flash will be able to see it and access its properties.

As mentioned earlier, movie clip symbols have a number of properties that are available to ActionScript, and one of them is visibility. The visible property is where the visibility information is stored. By default, its value is set to true, and of course if the user can see it, it must be true. When this script changes that property to false, the whole movie clip instance becomes invisible. It is still there—in fact, it always was—but it is invisible. Note the similarity between this operation and the Show-Hide Layers behavior you applied in Dreamweaver in Lesson 4. In both cases, a script changes the visibility attribute of a named object—in Dreamweaver, the object was a layer, while in Flash the object is a movie clip.

The syntax here of listing the timeline (_root) followed by a period (.), the instance name followed by a period (.), and then the property is known as dot syntax. Dot syntax is like Flash's addressing system: Using dot syntax, you provide Flash directions to the object and property that you wish to affect. In layman's terms, what this script says is: “Find the visibility property of the instance called error which is on the main timeline and set it to false.”

Using the same script, you could do all sorts of things to this movie clip instance. For example, you could change the property from visible to alpha, and change the value from false to 0, and you would get the same effect: The movie clip would disappear, since an alpha value of 0 means that the object is 100 percent transparent. Or you could change the property to rotation and change the value to 90 and turn the dialog sideways!

Select the invisible button over the close [x] button graphic, and in the Actions panel (in expert mode), enter the following script.

							on (release) {
							this._visible = !this._visible;

From the user's point of view, there is no difference between this and the first script: Both set the visibility of the movie clip instance to false. But this script obviously uses a different approach.

The code you used in the previous step relied on the absolute addressing system, using the following syntax: _root.instanceName._property. Remember, _root refers to the main timeline, and instanceName refers to the name of the individual instance you want to affect. In the previous example, the specific syntax was _root.error._visible=false, which means: Find an instance called error on the main timeline and set its visibility to false. That works just fine for this particular task, but it has a significant limitation: Since a symbol can have multiple instances, what happens if you create a second instance of the same symbol that has a different instance name, say, error_odbcscreen? The script on the close button, which looks for an instance called error, not error_odbcscreen, wouldn't work.

You can sidestep this problem with the keyword this. Rather than relying on an absolute reference, which is what _root.instanceName is, the keyword this enables you to use a relative reference. The keyword this always refers to the parent timeline, or the timeline that the current object is in, no matter where it appears. So to continue the previous example, if you enter this._visible=false, Flash will set the visibility of the parent timeline (in this case, the error movie clip) to false. The result is the same as using the absolute reference. The difference, though, is that if the movie clip does not have an instance name of error, and has instead, say, error_odbcscreen, the script would still work, because the script looks only for the parent timeline, rather than a named instance. By using this, instead of _root.instanceName, you can drag out as many different instances of the errorMC symbol as you like, and the script will never be broken.

If you have used relative URLs, the keyword this works something like ../ in a URL. It points to the parent, regardless of that parent's name. By using relative addressing, you don't have to worry about getting instance names right, and you can ensure that your script works in every situation. If you like, you can return to the invisible button over OK, and change _root.error._visible=false; to this._visible=false;.

In this particular simulation, the distinction doesn't matter much because you really will only need one instance of errorMC and it will be named error. But as you do more complex projects, always try to make your code as generic and widely applicable as possible because it could save you some time down the road.

Back to the script in this step. The ! is the logical not operator, useful for creating toggles, among other things. In effect, you are saying that whatever the current value of this._visible is, invert it and make it the opposite. Since the value must be true, or there would be no button to click, this script automatically toggles the value to false.

As a final note of interest, yet a third way you could have coded this script would be to use the gotoAndStop() action you have already used many times. To do so, you would just add a second keyframe on frame 10 and give it a frame label of content. Move all of the content to that frame, and delete all the content from frame 1 (in all layers) so it is empty. Give frame 1 a frame label of empty and add a stop() action in the first frame. Then you would add the following code to the button.

							on (release) {

Since empty has no content, the movie clip will seem to disappear. Notice how the frame label is referenced a bit like a movie clip's instance name: Both give Flash a way of finding something specific. I don't recommend this third approach, simply because you are adding more keyframes, which is more work for you and more for your user to download. These three methods underscore how there are many ways of accomplishing the same thing, and some are better than others in certain situations. Of the three, setting the visibility to 0 and the logical not (!) toggle in conjunction with this, is the best because it's a short and foolproof script.

Choose Edit > Document to return to the main stage and timeline. Select the page elements layer name, and choose New Layer. Double-click to name the new layer error dialog.

I always put pop-up dialogs on their own layers. The reason is that, as I mentioned, they are always there, and they block everything beneath them, which makes it hard to work on layers beneath them. To get around that, I turn off layer visibility for that layer by clicking the visibility (eyeball) icon beside the layer name.

With frame 1 of the error dialog layer selected, drag an instance of errorMC to the stage, and use the Align panel to center it. With the instance selected, enter the name error in the instance name field of the Property inspector.

Finally, you get to deploy this symbol you have worked so hard to create. As you know by now, adding the instance name makes it possible for Flash ActionScript to manipulate properties of this instance. It's a good habit to name all your movie clip instances, even when you are using this inside. You never know when some other script coming from somewhere else might need to target this movie clip instance.

Select the errorMC instance you just placed, open the Actions panel, and enter the following script:

							onClipEvent (load) {

So far in this book, you have added ActionScript to buttons and frames. But you can also add actions to movie clip instances. Movie clips are different objects than the other two, and so it follows that they have their own set of event handlers. As you remember from the Dreamweaver lessons earlier in the book, events are predefined actions, such as the user clicking, rolling over, or dragging an object.

Now Flash frame actions (such as the stop() action you placed in frame 1) don't even have explicit event handlers, because there is one implied: When the playhead enters the frame, the action is triggered. For buttons, you can use, among others, on (release) or on (rollOver), which reflect what the user is doing. Movie clips events include when the movie clip loads or unloads, or when the user presses certain keys. In this script, you are using load, which means that the action is triggered as soon as the movie loads.

You are already acquainted with the action in the middle. The effect of this script is to hide the error as soon as the movie loads. Obviously, you don't want the user to see the error until she or he has done something to trigger it—in this case, failure to enter the correct information in the two text fields.

It may seem odd to place this movie clip in the first frame—shouldn't you put it in frame 50 where the text fields are? It doesn't matter. The error dialog is present but hidden in all of the frames. By the time you are done building the simulation at the end of this lesson, the only way to activate the error message will be in frame 50, and it won't be possible to reactivate it after the playhead moves to frame 60, so as long as it is available in frame 50, it does no harm if it is present in all of the other frames.

What you have done up to this point is: (a) hide the error dialog initially, and (b) give the user a means of hiding it again, once it appears. At this stage, however, there is no way to make it appear. You'll do that in the next task.

Now would be an excellent time to save your work.



Not a subscriber?

Start A Free Trial

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