Tutorials Home What's New Top Rated Submit myTutes Random!

Make your own scroll bar in Flash MX
Author: Vera Fleischer | Website: http://www.mediasparkles.com |

Page 2
«prev 1 2 3 4 5 6 next»

The text field and scroll track

Open a new file in MX.

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.

«prev 1 2 3 4 5 6 next»

» Level Advanced

Added: : 2002-03-23 Rating: 7.21 Votes: 116 Hits: 3778

» Author

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!

» Download

Download the files used in this tutorial.

Download (68 kb)

Get conversion and unzipping tools for PC and Mac here!

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1