| Below is
an excerpt from Chapter 9, "Setting Text Dynamically."
This chapter is actually the first of a three-chapter series
that demonstrates how to use Macromedia Flash MX to create
an interactive study of Dante's Inferno, the exciting
results of which appear in this illustration
window. This particular excerpt shows you how to create
dynamic text fields and change their content with ActionScript.
You can also download the entire chapter
(and the accompanying code files) below to learn more about
adding and modifying dynamic text in Macromedia Flash MX.
In this chapter sample you also learn to create scrollable
dynamic text fields, format dynamic text with HTML tags,
use the rollOver and rollOut event handlers,
and employ the with() action.
These instructions generally assume that you have a
basic knowledge of Macromedia Flash MX and ActionScript.
If you need some getting-started kind of information, one
of the best places to look is in the tutorials included
with Macromedia Flash MX (in the program, choose Help >
Tutorials). For good background information about ActionScript,
see Macromedia Flash MX Help > Using Flash > Writing
Scripts with ActionScript, or go through the ActionScript
tutorial in the Help > Tutorials section.
Preparing Dynamic Text Fields
"Working with dynamic text is rewarding because it
is both powerful and easy. The main thing to keep in mind
is that a single text field is a container that can hold
many different actual text strings. When you build dynamic
text fields, you should have in mind the nature of the different
strings. Are they body text? Headlines? Short, long, or
mixed?
"The reason that you need to ask these questions
is that you have to format the text field as soon as you
create it. All of the strings put in it will inherit that
formatting. While there is some flexibility, as you will
see, there isn't much of it. If the text field uses Arial
size 10, all of the text dynamically added to the text field
will also be displayed in Arial size 10. Beyond that limitation,
actually creating dynamic text is pretty easy.
- Open upper.fla from Lesson09's Start folder and take
a look at the timeline, library, and stage.
The art is all supplied, and I have set up the basic file
for you. Your task is to create all of the interactivity.
Notice that the interaction needs only one keyframe. This
is also true of lower.fla. The timeline implies a linear
sequence, but this entire project is a nonlinear experience:
The user determines what happens when. The result is a
much more modular file than the animated simulation you
created in Lesson 5.
- Select frame 1 of the dynamic text layer. Select
the text tool and use the Property inspector to set the
font to Verdana (or any sans serif font), size 12, black.
In the Text Type drop-down menu, select Dynamic Text.
Then, holding down the Shift key, drag out a rectangular
text field that fills the area used for the dynamic text,
leaving a little room at right for the scrollbar.
To create a dynamic text field, you must define its area
and appearance. In this step, you combine the two tasks
into one. Holding down the Shift key forces Flash to snap
to the actual height of each line, so the text field isn't
a little bit taller or shorter than it needs to be. Flash
determines how much room is needed for each line based
on the font size, which is why it needs to be set before
you start dragging.
- In the Property inspector, give the still-selected
dynamic text box an instance name of info, and choose
Multiline from the Line Type drop-down menu.
The instance name is the ID that ActionScript will use
to identify the correct object, just as the instance name
did for movie clips in previous lessons.
- Select frame 1 of the actions layer, and open the
Actions panel. Beneath the stop() action already there,
type the following line of code:
info.text="Directions: Click any label to learn about that region of Hell.
Roll over any interesting object on the map to learn more about it.";
This line (it should be a single line in the Actions panel,
although it wraps here on the page) loads the text inside
the quote in the dynamic text box as soon as the movie
loads. The dynamic text box instance name, info, is referenced
at the beginning of the line. The .text extension is a
text field property (like the movie clip's _visible property),
which tells Flash that the string is plain text.
NOTE: The text strings in this chapter can be a bit
long; they have to be to make use of the scrollbar. You
are welcome to type them on your own, but they are also
all available in the script_plain.txt file included in
this chapter's Start folder. Each one is listed under
a descriptive heading-do not include the heading, only
the full text string on the next line. The string in this
step is listed under the Directions heading near the top
of the file.
- Choose Control > Test Movie to see it in action.
Admittedly, the text isn't terribly pretty, but it works.
What you see on the screen is loaded dynamically when
the page loads.
- Select frame 1 of the buttons layer. Drag an instance
of invisibleB over the Upper Hell label, resizing to fit.
Add the following script to the button in the Actions
panel:
on (release) {
info.text="Upper Hell: This map represents the upper reaches of Hell, where
Dante begins his travels. The region is bounded by the gates of Hell at the
top and the walls of Dis at the bottom, the city that contains those damned
for the gravest of sins. Dante begins in Limbo, the first circle, where the
Virtuous Pagans reside with neither punishment nor hope of ever seeing God.";
}
If you want to copy and paste this text string, it is
listed under the heading Upper Hell in script_plain.txt.
This piece of code changes the dynamic text field to show
this string of text when the user clicks the Upper Hell
label. The original contents of the dynamic text field
disappear, setting text dynamically
- Choose Control > Test Movie, and click Upper Hell.
The text string dutifully changes, which is pretty cool.
What is not so cool is that it is truncated. It doesn't
fit in the text field, so the second half of the string
is not visible to the user. A scrollbar is starting to
look like a very good idea."
|
