 |
 |
   |
 |
 |
| Flash
5 Scroll Bar: (Press-and-Hold Scrolling
For an External Rich-Text File Using
Buttons and Keys in Flash 5) |
|
|
Introduction
Download
the sample .fla
This tutorial is a practical hands-on experience
with Flash 5's new syntax in a useful context.
It's geared to the new Flash 5 users, and
the designer who may find Flash 5 daunting.
More experienced users can look at the
technique but might want to skim over the
bright and cheery explanations.
Although scrolling is a common and relatively
simple effect, it's still one of the most
asked about on the many Flash listservs.
Also, the change of syntax from Flash 4
to Flash 5 can be scary to the designer.
Press-and-hold scrolling in the Flash 5
context is a small but useful skill, because
it's an easy way to see how the new "dot
syntax" works on a practical level.
Further, when combined with the new ability
of Flash 5 to load an external rich text
file, it gives our users (remember them?)
the kinds of features they're used to.
The first thing you need to understand
is how Flash handles the two important
properties SCROLL and MAXSCROLL. If you
don't know offhand, don't worry — we'll
talk about them a little here. But you
might want to skim over them in the Flash
5 manual (Actionscripting Guide, pp. 309
and 356); it will save you some time. Also,
review the manual section on Flash 5's
new rich-text text box features (Using
Flash, p. 219). Again, we'll be talking
about them here, but it will be helpful
if you remember what HTML tags Flash supports
in text boxes and which ones it doesn't.
Basically, you get <A>, <B>, <I>, <U>, <P>,
and <FONT>, with COLOR and SIZE.
You don't get tables, lists, <DIV> or <SPAN>.
Finally, we'll also talk about the Key
object, the isDown method, and key constants
(Actionscripting Guide, pp. 279-288).
Finally, the instructions use the Windows
right-click feature; of course on the Mac
that becomes a Control+click.
Contents
|
|
| Drawing
and Naming the Text Box |
|
- In Flash 5, open a new movie. Set
whatever stage size and movie background
color you like. Click the Window menu,
point to Panel Sets, and choose Default
Layout. That way all the panels
you need will be available.
- Click the Create New Layer icon
on the timeline twice to create two
new layers. Highlight the layer names
and rename them Background, Text,
and Scroll Buttons.
- Click the Text layer on the Timeline to
make it active. Flash 5 adds the keyframe
for you when we draw the text box,
so you don't need to add one for yourself.
It should look like this:
- On the Tools panel, click
the Text Tool icon and draw
a text box on the stage. Make it whatever
size you like, but think about the
amount the of text you will be putting
in the external rich-text file later.
Obviously, draw a larger box for more
text, a smaller one for less text.
It should look something like this:
- Since we will be loading our text
from an external file, and don't want
people to change it, we will set properties
for the text box to reflect these priorities.
With the text box still active, go
to the Character panel and click
the Text Options tab. From the
drop-down list, choose Dynamic Text.
Notice that new options appear on the Text
Options tab, and that, if the text
box is still active, the square box
on the corner of the text field itself
changes.
- From the new dropdown list that appears,
choose Multiline so that the
box can hold many lines of text. Also,
select the HTML and Word
Wrap check boxes. If you want to
see a border and colored background
for your text box, select Border/Bg.
Since we don't want users to be able
to select our loaded text, clear the Selectable check
box. It should look like this:
- In the Variable field, type
in whatever you would like your text
box to be named. Let's keep it simple
and just type Text.
- If you'd like the Flash movie to
set the font and size of the text in
the box, click the Characters tab,
and set the font, size, and color that
the text will appear. However, one
of the great things about loading a
rich-text external file is that we
can override these settings in the
rich-text itself. We'll discuss that
on Page 3.
|
|
| Top |
|
| Creating
the Rich-Text File |
|
- Take the text you need to present
in your movie and paste it into your
favorite plain text editor: Notepad,
SimpleText, etc. The downloadable .fla
has a sample file, but you may use
whatever text pleases you. Don't make
it too long; Flash can't handle books.
The amount of text affects the movie
load time, so stick to page or so at
most.
- At the beginning of your file, before
your text begins, we need to tell Flash
what text box this text belongs to.
We do this by adding the name of the
text box, which is what we typed into
the Variable field on the Text
Options tab of the Character panel.
As you remember from Step 2, our box
variable is Text. So type Text
= at the very start of your file.
This tells Flash that this information
should be loaded into the text box
named Text.
- Now let's markup our text using HTML.
Remember that we have limited tags: <p>, <b>, <i>, <u>, <a>, <font>,
color and size. See the sample file
for markup syntax; it's just HTML.
Use single quotes around the attributes.
NB: If you need to create line
breaks beyond what <p> does for
you try using the hex characters %0d.
You can get some space resembling a
tab using %09. You can also insert
bullet characters in the text file
by using the numerical reference appropriate
for the font. Check out your favorite
character mapping utility for the codes.
However, even if you use Courier as
the font, it is difficult to approximate
tables or hanging lists this way. So
experiment, but don't depend on it.
- Save the file into the same directory
as the Flash movie. Let's name it text.txtor
text for those on the Mac.
- Now we have to tell our Flash movie
to load this file when it loads. Return
to Flash and our working movie.
- On the Timeline, click the Create
New Layer icon to create a new
layer. Highlight the Layer 4 name
and rename the layer Actions.
- Highlighting the Actions layer,
double-click the first frame to open
the Frame Actions dialog box.
Here's where we insert the little bit
of script that attaches our text file
to our Flash movie. In the Frame
Actions box, click the Actions book
icon in the left-hand frame. The Actions list
opens; scroll down and click the loadVariables
action.
- The Frame Actions dialog expands
to offer new fields. In the URL field,
type the name of our text file, text.txt.
Since our text box is on the main timeline,
or root, of the movie, we can leave
the Location set to Level and
0. Since our communication with the
text file is only one-way — we
are loading the text file and not trying
to talk back to it or send anything
back to it from the movie — we
can leave Variables at Don't
Send. Here's what the Frame Action
dialog should look like:
- Close the Frame Actions dialog
and notice the a that has appeared
in the keyframe on the Actions layer.
That's all we need!
|
| Table
of Content |
|
| Adding
Buttons |
|
Since we're building on Bill Tagliaferro's
press-and-hold scrolling technique, we're
going to have the buttons set variables
to do our scrolling for us. Let's call
the variable down. For our purposes, the
user can only move up or down in our movie,
and can only do one at a time. We'll make
buttons, put them in a movie clip, and
then add variables and actions to make
the buttons work. And for designers newer
to scripting, these techniques teach us
to think of everything we want to happen
in our movie as states of true or false,
existence or non-existence.
- Highlight the Scroll Buttons layer
on the Timeline. Click the Windows menu,
point to Common Libraries, and
select Buttons. This opens the
default Flash buttons library.
- In this example, let's use the gel
buttons Fast Forward (with a double
arrow) and Left (with a single arrow)
from the VCR Buttons folder. Drag one
of each onto the stage.
- Our text is long enough, so let's
have a button for scrolling Up and
Down, and jumping directly Home and
End . In Step 5, we'll enable keys
to correspond: up arrow key, down arrow
key, and the Page Up and Page Down
keys. Thus we need four buttons, two
of each. Let's use the single arrow
buttons for Up and Down and the double
arrow buttons for Home and End.
- Duplicate the buttons by clicking
the Edit menu and choosing Duplicate.
Then select each button, click the Rotate icon
on the Options tool bar and
move them by the round handles so one
of each points up and down, respectively.
- Let's pop these four buttons into
their own movie clip. That way we can
learn the Flash 5 way to control objects
from other timelines. Select the buttons,
cut them from the stage (Edit, Cut),
and create a new movie clip (Insert, New
Symbol). In the Symbol Properties
dialog, leave the movie clip radio
button selected and type in a name
for the movie clip. Let's use scrollbuttons.
- Paste (Edit, Paste)
the four buttons into the scrollbuttons
movie clip. Position them attractively.
You can use the Align panel
(Window, Panels, Align)
to help.
- Once your buttons are positioned,
we're going to make them into their
own movie clips. Select each one in
turn and convert them to movie clips
(Insert, Convert to to Symbol or
press F8). Name the clips Up,
Down, Home, and End.
- Now we have to add the actions that
make them work. Let's start with the
Down button clip. Right-click on it,
select Edit in Place, right-click
on the button itself, and choose Actions from
the menu. The Object Actions dialog
box opens; it looks exactly like the Frame
Actions did.
- CClick Basic Actions to open
the list and select
onMouseEvent.
Again the dialog expands to offer more
options. Select the Press check
box. Notice the code Flash writes in
the window.
- Without closing the dialog box, click Actions to
open the list and select
set
variable. Again the dialog expands
to offer more options. In Variable,
type down; in Value,
type true. This sets the value
of down to
be true "on" and
means that whenever a user is pressing
the Up button, the movie scrolls up.
Choose onMouseEvent again,
check Release, ReleaseOutside and set
variable one more time. In Variable,
type down; in Value,
type false. This ends scrolling
when the user releases the mouse.
- Now let's add the actions to the
movie clip that check the state of
down and
tell the movie what to do. Click the
Down movie clip underlined above the
timeline to return to the Up clip.
Right-click on the Up clip and choose Actions.
The Object Actions dialog box
opens;click the arrow in the upper
right-hand corner to choose Expert
Mode. This lets us type directly
in the window, which for this section
of code is easier than choosing from
the list. Type:
onClipEvent (enterFrame) {
if (down) {
if (_root.text.scroll<_root.text.maxscroll){{
_root.text.scroll = _root.text.scroll+1;
}
}
}
In Flash 5, single frame movie clips
loop. The OnClipEvent (enter
Frame) tells the clip to check
whether down is true every
time it plays. That is, it checks to
see if the user is clicking the Down
button. If so, Flash goes off to find
the Text variable. Notice
how we tell Flash where that variable
is. Remember, Text inhabits
the main timeline, or root,
of the movie, while our buttons dwell
in nested movie clips on their own
timelines.
Once Flash has found Text,
it then checks to see if it's at the
beginning of the last set of lines
that fits into the text box (the maxscroll).
Flash sets the maxscroll based
on the length of the text file and
the size of the text box. We can't
change it. We could have flash tells
us the number of the maxscroll,
but for our purposes here we don't
care about the exact figure. As long
as we haven't reached it, we want to
keep going down. So Flash checks to
make sure the current line number is
less than the maxscroll,
and if so, it scrolls down one more
line using Text's scroll property.
- Let's do the Up button. So repeat
Steps 8 through 11. However, because
we're going up not down the
OnClipEvent code
is a little different:
onClipEvent (enterFrame) {
if (down) {
if (_root.text.scroll<=_root.text.maxscroll){
_root.text.scroll = _root.text.scroll-1;
}
}
}
You probably got the idea by now.
- Let's move on to the Home button.
Like the other buttons, Home uses the
scroll property;
that is, we want Flash to scroll to
the first line of the text box when
it's pressed. However, we won't use
the same tactic with the down variable
here.
Why not? Because testing shows you
can easily work yourself into a situation
with this method where both Page Up
and Page Down can be true since
we are setting the scroll to a certain
number. Also, there are circumstances
where even after a user releases the
Up or Down, the movie can still think
they are true, which makes it hard
to go Home! We'll work around this
now.
So experience shows we should clear down when
going Home. (An interesting experiment
if you have 30 minutes is to apply
the previous techniques to Home and
End to see how the problems arise.
Look at the variables in the Output window
when you test the movie. But you may
not have the time.) Instead, we'll
just put some code on the Home button
itself inside the Home movie clip:
on (press) {
down = false;
_root.text.scroll = "1";
}
- Let's finish up with End. Similar
to Home, but:
on (press) {
down = false;
_root.text.scroll = _root.text.maxscroll;
}
We don't know precisely what line number
is the maxscroll, and again, it doesn't
matter. Flash figures it out for us.
|
| Top |
|
| Adding
the Key Script |
|
Amazing how we're almost done! All we
have to do is add the script that enables
users to use the up arrow, down arrow,
Page Up and Page Down Keys.
- Right-click on scrollbuttons and
choose Actions from the menu.
The familiar Object Actions dialog
appears.
- Click on the arrow in the upper-right
hand corner of the frame to open the
menu. Select Expert Mode. This
lets us type directly into the right-hand
frame. Type, or copy and paste from
here:
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP) == true) {
if (_root.text.scroll<=_root.text.maxscroll) {
_root.text.scroll = _root.text.scroll-1;
}
} else if (Key.isDown(Key.DOWN) == true) {
if (_root.text.scroll<_root.text.maxscroll) {
_root.text.scroll = _root.text.scroll+1;
}
} else if (Key.isDown(Key.PGUP) == true) {
_root.text.scroll = 1;
} else if (Key.isDown(Key.PGDN) == true) {
_root.text.scroll = _root.text.maxscroll;
}
endif;
}
Not only do we deal with the familiar scroll and maxscroll,
we also introduce the Key object
and its isDown method.
The isDown looks to see
if it's true that the
user is pressing a certain key. What
certain key? The Key.UP and Key.DOWN are
the Flash 5 ways of referencing the
keys. Key tells Flash
what object — a key — to
look for; the .Down tells
it which particular key. From your
review of the Flash manual, you remember
that Key.UP and Key.DOWN are
constants; that is, they are always
going to mean the up and down arrow
keys; we can't make them mean anything
else. So as long as the user holds
the up arrow key, Key.isDown(Key.Up) will
be true, and so the movie
scrolls.
Great! Now it works! Of course, one of
the interesting things about scripting
is that there are many ways to approach
and solve problems. Some are shorter, more
elegant, and more efficient than others.
Almost all scripts can be improved and
tightened. So you may find your own way
to perform this task, or a better way.
If so, write it up, and help out the Flash
community! Don't forget to have fun doing
it, too. |
|
| Top |
|
|
| This tutorial was written by FR
Elkins. |
|
|
 |
   |
| |
| ©2007
Wildform, Inc | Policies | Contact
Us | Newsletter
Options |
| |
|
| ©2010
Wildform, Inc | Policies | Contact
Us | Newsletter
Options |
| |
| Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
|
|
|
 |
 |
|
