Macromedia Studio 8 [Electronic resources] : Training from the Source

Scripting the Quicktip Interaction

Each element is in place: the button, the movie clip, and the dynamic text field inside the movie clip. You're now ready to write the script that makes the interaction work. Before you start, you should plan ahead and spell out what you're trying to do, as well as the role each object will play.

The three objects you'll use have the following instance names: tempest_1_btn, quickTip_mc, and quickTip_txt. Remember that quickTip_txt is inside quickTip_mc.

You'll need the script to make quickTip_mc invisible by default.

You'll need the script to do the following when the user rolls over tempest_1_btn: make quickTip visible, position it near the user's mouse, and populate the Dynamic Text field with the correct text.

You'll need the script to make quickTip_mc invisible when the user rolls away from it.

It's usually easier to write a script when you know exactly what you're trying to do.

The Actions panel opens, and, as you can see, already contains a small script that stops the movie in the first frame, as well as the script you entered earlier to program the Down button.

You'll add the rest of the scripts for the upper half of the Inferno to this frame.

[View full size image]

// Initializes quickTip_mc so that it is not visible
// Causes the quick tip to appear when the mouse rolls over tempest_1_btn
// Causes the quick tip to disappear when the mouse rolls away from tempest_1_btn

Outlining the code with comments helps you write the code now and also documents the code, which makes it easier to maintain later.

[View full size image]

quickTip_mc._visible = false;

Note

The spacing around the equals sign is optional.

_visible is a property of all movie clips. It has two settings, TRue and false. As you have probably guessed, TRue is the default. By setting it to false, you make the movie clip instance invisible, because this code is executed before the movie clip instance has a chance to display.

The dot (.) between the instance name and its property, called an access operator, implies a relationship: the item on the right belongs to the item on the left. You'll use access operators a lot in ActionScript, because they work almost like an addressing system, enabling you to tell ActionScript where to look for something in the document hierarchy.

The equals sign (=) that separates the two halves of the line is called an assignment operator. Use the equals sign when you want to assign a particular value (in this case, false) to a given object asset (in this case, the quickTip_mc instance's _visible property).

[View full size image]

If the movie clip is not visible on the stage, you know your script is working properly. If it is visible on the stage, make sure the instance name in the Property inspector with the instance selected is spelled exactly the same as the instance name written into the ActionScript.

Any time you add new functionality to a script, you should test the movie to verify that everything went as expected. If you wait and test later, it can be hard to debug if something does go wrong.

tempest_1_btn.onRollOver = function() {
quickTip_mc._visible = true;
quickTip_mc._x = _xmouse;
quickTip_mc._y = _ymouse;
quickTip_mc.quickTip_tx233Text = "<b>Tempest</b><br>Those who gave in to
lust swirl around in these.";
};

Lesson 10 (the button_btn.onEvent = function() {...}; syntax). Now you're causing a series of actions to occur when the user rolls over the tempest_1_btn instance.

This group of commands is generally easy to read. The first command makes the movie clip instance visible again, since its default state is invisible.

The next two commands, which set the instance's _x and _y properties to _xmouse and _ymouse, have to do with positioning. As you'll recall from the Fireworks lessons at the beginning of the book, every graphic object is positioned relative to the top-left corner of the canvas/stage. This value is stored in its _x (horizontal position) and _y (vertical position) properties. Likewise, Flash stores the current position of the mouse in the built-in _xmouse and _ymouse properties. Thus, in these two lines of code, you're telling Flash to position the top-left corner of the movie clip instance in the same place as the mouse, which ensures that the user easily associates the text in the quicktip with the screen element (in this case, the tornado) that she or he has just rolled over.

In the last statement inside the block, you set the value of the <> property of the quickTip_txt Dynamic Text field, which is itself located inside the quickTip_mc instance. Because quickTip_txt is inside quickTip_mc, and because the button (tempest_1_btn) is on the main timeline, outside of quickTip_mc, you must provide directions to Flash to find the text field whose property you want to set. In a way, specifying quickTip_mc is like prefacing a file name with a folder name in a URL; for example, the URL images/mypicture.jpg instructs the browser to first look for an images folder, and then look in that folder for mypicture.jpg. In the same way, quickTip_mc.quickTip_txt tells Flash that it can find the latter inside the former.

As for the <> property itself, it holds an238-formatted text you want the Dynamic Text field to display. Earlier in the lesson, you clicked the Render Text a232 button in the Property inspector for the quickTip_txt Dynamic Text field. You did that to enable the possibility of populating the Dynamic Text field wit221-formatted text. Following the assignment operator is th218-formatted string itself, enclosed in quotes.

So far, so good. The movie clip and text shows up. The only problem is that it never goes away.

[View full size image]

tempest_1_btn.onRollOut = function() {
quickTip_mc._visible = false;
};

property contains, because the whole movie clip is invisible, and the next time it appears it will have new positioning and <> properties specified.

This time, the quicktip disappears when you move away from the button.

Because there are multiple tempests on the map, you should make all the buttons pop up the quicktip.

[View full size image]

Sometimes multimedia development becomes monotonous. After you make one quicktip functional, it's easy to copy and paste to replicate it. As you do, your main task is the clerical job of copying and pasting instances and ActionScript, changing only instance names as you work.

Tip

Rather than copy and paste all the comments as well, you might want to simplify the comments so that there's only one comment per group of related hotspots (for example, all the tempest buttons).

[View full size image]

As you place hotspot instances, remember that you can resize them so that they fit better over their intended targets. To resize the hotspots, use the Free Transform tool in the Tools panel to drag the edges.

At the end of this step, the script is nearly 200 lines long, although most of it is repetitive. An experienced programmer can remove some of this redundancy using loops and other programming techniques, but that level of code optimization is beyond the scope of this book.

[View full size image]

The quicktips should pop up for each of the items on the screen.