At the root level of Scene 1 add two extra layers to make it a total of
three. Name the top layer "functions", the one below it "actions" and the
bottom one "movie clip" or whatever else fits your purposes. We'll add
the code later.
Create a dynamic text field in the bottom layer.
Use a font, color, and size of your choice and drag it
out to display a maximum of about 5 or 6 lines or however many you like.
For this example, we will use a maximum of 6 lines that can be displayed at
the same time. Make sure that "multiline" is selected and that "selectable"
is not selected in the text properties. Give the text field an instance
name of "w_field" (short for "window field" in my example). Don't worry about
assigning a variable name. Lastly, click on "Character..." and select
whichever character sets you would like to include.
For the main movie clip that contains everything else, select the text field
and press F8 to convert it to a symbol. Choose movie clip for the behavior,
name the symbol "main_mc" and give it an instance name "main".
Now go into main_mc and rename the layer with the text field "text" and add
a few more layers from top to bottom: "labels", "actions", "functions",
"scroll thumb", "scroll buttons", and "scroll track". Once we add these
graphics, well put them in their respective layers. If you want to
include any other graphics, such as a window, add layers for those elements
too.
Add two frames to each layer of this movie clip. Label the first frame
"no_scroll", the second one "scroll_loop", and the third frame doesn't
need a label. In the second frame of the "scroll thumb", "scroll buttons",
and "scroll track" layers, add a keyframe each.
For the scroll track, go to the second frame of the "scroll track" layer.
Draw a rectangle of the width you want your
scroll bar to be, and make sure that its height is about the same as
your dynamic text field. Line it up just to the right of your text field.
Convert it to a movie clip symbol and assign it
an instance name of "scroll_track".
We'll also add some code to this movie clip. In the actions layer of
the first frame, just put
stop();
In the second ("scroll_loop") frame, put
play();
We'll add a little more to this later. And in the last frame put
gotoAndPlay("scroll_loop");
Now go back to the root level one more time, and we'll add some code there.
In the functions layer, put the following:
function showText(message) {
main.w_field.text = message;
if (main.w_field.maxscroll > main.w_field.scroll) {
main.gotoAndPlay("scroll_loop");
}
}
And in the actions layer, put this code:
my_text = "Put lots of text here, or the scroll bar won't show up!";
showText(my_text);
stop();
We're setting this up in a way that the scroll bar is only visible
when the text field has more lines than can be diplayed at one time.
I have been flashing for almost two years, first at an online learning company and now at a university. My dream is to one day work for Macromedia as an ActionScript Engineer!
Tutorials Home
Tutorials » Interactivity/Useability
Make your own scroll bar in Flash MX
