First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Patrick Mineault

In order to decipher this, we need to look at how the script is executed chronologically. The load clip event is the first one that's fired. We've added a few variable definitions. The numLines variable is the only one you'll need to change; it defines the visible number of lines in the textbox. We also store the original height and x position of the scrollbar, which we'll need later on.

We also added two custom functions. The load clip event is an ideal place for custom functions, since it only gets fired once. We'll talk about what these two functions do later on.

Once the text file is loaded AND parsed, we can figure out the height of the scrollbar according to the text length. Hence, we fire the custom initScrollBar() function once everything's ready.

Let's take a look at the initScrollBar function line by line:

1. function initScrollbar(){
2. var totalLines = numLines + daTextBox.maxscroll - 1;
3. scrollbar._yscale = 100*(numLines)/totalLines;
4. deltaHeight = origHeight - scrollbar._height;
5. lineHeight = deltaHeight/(daTextBox.maxScroll);
6. }

Well, the second line is easy, we simply store the total number of text lines in our scroller in the totalLines variable.

The third line does the real job here. It sets the y scale of the scrollbar in proportion to the number of lines of text. Let's see how this works with an example.

Say we have 20 lines of text and a viewable area of 10 lines; hence, the scrollbar should be half of its maximum height. In that case, numLines is 10, and maxscroll is 11, so totalLines = 10 + 11 - 1 = 20. Our _yscale calculation would give us 100*10/20 = 50, and this would set the scrollbar's y scale to 50%. This is exactly what we wanted.

Moving on, on line 4, we define the deltaHeight variable, which is the available space for the drag. That available height is the difference the original height of the scrollbar, and the new, adjusted size.

Now, in order to know where the scrolled text should be in relation to the scrollbar, we need to define a lineHeight variable, which we will reuse later. This lineHeight variable is the amount of pixels by which we should move the scrollbar in order to scroll the text by 1.

Well, that was the hard part. The rest is pretty simple, and essentially builds on what we have just seen. In the mouseDown clip event, we have added an action to account for clicks on the scrollbar:

1. if(scrollbar.hitTest(_root._xmouse,_root._ymouse)){
2. scrollbar.startDrag(0,origX,deltaHeight,origX);
3. scrolling = "scrollbar";
4. }

The first line is simply a hitTest to ensure that it was indeed the scrollbar that was clicked, much the same way we tested this with the up and down buttons.

If we clicked the scrollbar, then we should start dragging it; hence we use the startDrag() action. The arguments for startDrag() are, in order, top, left, bottom and right; they are the coordinates of the bounds of the imaginary rectangle in which the caller clip can be dragged. Don't worry, that order confuses me too!

Vertically, we should drag from 0 to deltaHeight, which, as mentioned earlier, is the available space between the scrollbar and the up and down arrows. Horizontally, the scrollbar should stay in the same spot, so we drag it from its original X to its original X, essentially locking it in place horizontally. We finish this up by setting the scrolling variable to "scrollbar", so that other parts of the script know we're dragging.

The updating of the text box's scrolling is handled by the mouseMove clip event:

1. onClipEvent (mouseMove){
2. if(scrolling == "scrollbar"){
3. daTextBox.scroll = Math.round((scrollbar._y)/lineHeight + 1);
4. }
5. updateAfterEvent();
6. }

Yep, that's yet another clip event. The mouse move clip event is fired every single time the mouse is moved. This is very useful if we want to adjust the properties of a clip depending on the mouse position, for example.

On the second line, we check that we are indeed dragging the scrollbar. Otherwise, there's no need to update the text box.

The third line is the real engine of the scrollbar. It sets the scroll of the text box according to the y position of the scrollbar. For example, say our lineHeight is 10, and the y position of the scrollbar is 30. That means that we should scroll by 3 lines of text. Since the scroll property is one-based, we add 1 to to these three lines of text, giving us a scroll property of 4. We surround everything with a Math.round function, which rounds our number to the closest integer, because, you guessed it, the scroll property only allows integer values.

We end this clip event with an updateAfterEvent(). Using updateAfterEvent() is particularly useful with mouseMove, as the screen will get updated every time the mouse is moved. This is great if you have drag actions, which are normally jerky, but will be silky smooth if you add an updateAfterEvent() in a mouseMove clip event.

In our mouseUp clip event, we added a stopDrag() action so that the scrollbar stops dragging when the user releases the mouse.

All that we need now is a way to move the scrollbar when we click the up or down buttons. You'll notice that in our enterFrame clip event, we added a call to the updateScrollBarPos() custom function if we are scrolling up or down. Let's dig inside this function:

function updateScrollBarPos(){
scrollbar._y = lineHeight*(daTextBox.scroll - 1);

The reasoning on this one is the exact inverse of what we had with the mouseMove clip event earlier. Instead of figuring out the scroll of the text box from the y position of the scrollbar, we do the inverse, figuring out the y position of the scrollbar from the scroll of the textbox. Both equations are mathematically equivalent.

» Level Intermediate

Added: 2001-07-17
Rating: 8 Votes: 176
(10 being the highest)
» Author
No details available.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.