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

Lesson 9. Setting Text Dynamically > Adding the Quick Tip Pop-Ups

Adding the Quick Tip Pop-Ups

The second major piece of this interaction is the pop-up windows that provide additional information about each of the meteorological catastrophes and buildings. You won't learn anything revolutionary in this task, but it builds nicely on several things you have done in this and previous lessons, and it uses a new ActionScript method as well.

Select frame 1 of the quick tip layer, and drag an instance of quickTipMC anywhere onto the stage.

The positioning doesn't matter because this movie clip will be invisible when it's loaded, and when it is visible, the same script that makes it visible will also position it correctly.

This small beige rounded rectangle forms the outline of the quick tip pop-up window. Its substance will be provided by text loaded into a dynamic text field. But at the moment, the movie clip has no dynamic text field.

Double-click the quickTipMC instance (as yet unnamed) to open it in symbol-editing mode. Select frame 1 of the text layer, select the text tool, and change its settings in the Property inspector to Verdana, size 11, black. Hold down the Shift key, and drag out a dynamic text field that fits snugly inside the beige rounded rectangle, three lines high. Insert dummy text, if necessary, to help you position it correctly.

This step is similar to the earlier step where you drew the dynamic text area for the info box. I often use dummy text to make sure that I have enough room between the text and the margins, which can be hard to see without sample text. If you use dummy text, don't forget to remove it when you are finished.

You should still be in symbol-editing mode, with the new text box still selected.

In the Property inspector, give the text box a variable name (not instance name) of quickText. Enable HTML formatting. Toggle Selectable and Show Border Around Text off. Be sure that Multiline is selected as the line type.

In the previous sections, you set dynamic text using instance names and the following syntax: textfieldID.htmlText="String.";. That approach to creating dynamic text is new to Flash MX, and it is required when using the scrollbar component. In general, I recommend that you set dynamic text in that fashion, since it is the now the approach that Macromedia recommends.

However, the Flash 5 and earlier approach is to assign a variable name to the text field. The syntax to assign a string to a dynamic text field's variable is variable="String.";, where variable is the name of the variable associated with the dynamic text field, and "String" is the string of text that you want to appear in the text field. Whatever string is stored in the variable displays in the text field. This technique does not always work with scrollbars and generally is more limited from the ActionScript standpoint. However, in my experience, using variables, rather than instance names, is less finicky. That is, a dynamic text field with a variable, but not an instance name, is more likely to behave predictably than a dynamic text field that uses an instance name, but not a variable.

With the quick tip asset, either approach works fine. We are doing it this way so that you can practice both techniques.

Choose Edit > Edit Document to return to the main document, leaving symbol-editing mode.

When you leave, the new symbol is saved in the library, and all placed instances (in this case, just one) are also updated.

Select the quick tip instance, and give it an instance name of quickTip.

The quickText dynamic text field is located inside this movie clip instance. When you reference variables inside of movie clips from ActionScript that is outside the movie clip (such as a script on the main timeline), you need to specify which movie clip instance's variable you are setting. To do so, you reference it with its instance name.

In this step, you are creating the instance name that will enable you to change the variable inside the quickTip instance from buttons on the main timeline.

With the quickTip instance still selected, open the Actions panel and enter the following script:

							onClipEvent (load) {

By now you know exactly what this will do: It will cause the movie clip to be invisible when it first loads. It won't become visible until another script tells it to.

The onClipEvent (load) event handler is a native event handler of movie clip instances, equivalent to the button's native on (event) event handler.

Drag an instance of invisibleB onto the stage, resizing and positioning it over the tornado just to the right of the Lust circle's label.

This hotspot will trigger the visibility and text of the quickTip instance when the user rolls over the tornado graphic.

With the new invisible button instance selected, add the following script in the Actions panel:

							on (rollOver) {
							quickTip.quickText="<b>Tempest</b><br>Those who gave in to lust swirl
around in these.";
							on (rollOut) {


The rollOver and rollOut event handlers may be new to you. The release event handler that you have used up to this point in the book for buttons is triggered when the user clicks and releases the mouse over a button. The rollOver handler is triggered whenever the user's mouse is over the button area. This part of the script causes the quickTip instance to appear and fills its dynamic text field with content. The rollOut event is triggered when the user's mouse leaves the area of the button. The code block in this section makes the quickTip instance disappear when the user's mouse moves away from the tornado.

The third line of code, the one that begins quickTip.quickText= could use some further explanation. Normally, when you set a variable, you just name the variable, follow with the = sign, and then enter the value. In this line, the text variable is quickText, so you might wonder what the extra quickTip is doing there. The answer is that most Flash variables are stored only in their local timelines. For any object on the main timeline, its variable is stored in the main timeline. But the quickText variable is not in the main timeline. Instead, it is inside the timeline of the quickTip movie clip instance. The invisible buttons that set that variable are in the main timeline. Any time a script targets a variable in a different timeline, you have to explicitly specify the correct timeline. By prefixing the line with quickTip., you tell Flash to set the variable quickText to a given string, and that the variable can be found in the timeline of the quickTip instance.

Test the movie to see it in action.

The quickTip instance shows up, and it is dynamically filled with the HTML text, which it renders properly. That's the good news. But the quickTip appears in the middle of the screen, nowhere near the tempest. In addition to toggling its visibility and setting its text, you'll also need to position the movie clip instance.

Return to the authoring environment, select the invisible button instance over the tempest, and enter the following two lines just above the closing }:


The _x and _y properties specify the position in pixels relative to the top-left corner of the stage. X represents the distance to the right, while Y represents the distance toward the bottom.

So where did I get those numbers? I looked at the W, H, X, and Y settings in the Property inspector for the invisible button. The width of my invisible button is about 60 pixels. Its X position was 335. I wanted the quickTip to appear to its right, so I added 60 (its width) and 335 (its X position), ending up with 395 (the area just to its right). As for the Y position, I wanted it to be about the same as that of the invisible button, so I entered the same number.

Test the movie to make sure yours looks good. If not, use the same method specified in the previous paragraph along with some trial and error until you are satisfied.

Change the rollOver part of the script associated the tempest button, so that it reads as follows:

							on (rollOver) {
							with(quickTip) {
							quickText="<b>Tempest</b><br>Those who gave in to lust swirl around in


This change in the script does not affect functionality. If you test the movie, it will work just as it did before. The with() action is used to apply multiple actions to a single object. In this case, you are applying four actions to the quickTip object. In the original script, you had to prefix everything with quickTip. so Flash knew what to act on. In this version of the script, all of the actions associated with the quickTip are nested inside the with() action, making it easier to distinguish that block of code from others. When your scripts are eight lines long, the difference is rather academic. When they grow to 50 or 300 lines, you'll appreciate this organizational tactic.

Copy and paste the invisible button you have been working on so that an invisible button covers each of the remaining tempests on the map. Adjust the _x and _y settings as described before.

Since there are multiple tornadoes on the map, you should make all of them pop up the quick tip.

Copy and paste the invisible button to other objects, resetting the _x and _y positions as needed. Also, replace the text strings with the appropriate text strings found in script_html.txt.

Use the Castle of Reason string for the castle in Limbo. Use the Ice Storm string for the storm clouds in Gluttony. Use the War string for the groups of souls fighting over boulders in Avarice. Use the Swamp string for the reeds in Ill Temper. Finally, use the Dis string for the city walls at the bottom.

And so the work gets a bit monotonous again. Working in Flash alternates between (1) solving the problem, which involves designing and configuring all the pieces, writing and debugging the scripts, and generally getting things to work, and (2) implementing and replicating the solution, which can be tedious at times, but is where the movie really starts to come together.



Not a subscriber?

Start A Free Trial

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