First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Patrick Mineault

Part 3: Adding the scrollbar

The last addition to our script, and certainly the most noteworthy is the scrollbar. With it, we can properly emulate an everyday operating system scroller. Unsurprisingly, it is also the toughest part yet, so buckle your seatbelts, it's going to be one hell of a ride.

A scrollbar requires several elements in order to work. First, it must be draggable within certain limits. Its position will dictate the scroll of our text box.

It also must scale depending on the length of the text; this will give the viewer an idea of just how long the text is. For example, if the text is 2 times longer than the view area, then the scrollbar should be half its maximum height. People instinctively know that a tiny scrollbar means lots and lots of text.

Finally, it must move when the user clicks the up and down buttons. Let's see how each of these elements can be accomplished in Flash.

In order to drag something, we use the startDrag() action. This enables us to drag a clip around with the mouse within certain bounds that can be specified. We can then stop the dragging with stopDrag().

We'll need to know the position of the scrollbar in order to scroll the text; this means we'll have to play with clip properties. This may be your first time using clip properties, so I'll give you a quick crash course on reading and writing them.

Remember when we used daTextBox.scroll in order to retrieve and set the scroll of our textbox? Clip properties work in much the same way. In order to read a clip's property, you can use the following syntax:

value = clipName._property;

To set a property, use this:

clipName._property = value;

There are several properties you can use, and all start with an underscore (_). The most common are _x, _y, _xscale, _yscale, _width, _height, _rotation and _alpha. I'm sure you can guess what most of these do.

Every property you read or write is calculated depending on the position of the center cross of the clip in question. This may be a bit hard to fully understand, so I made a movie that allows you to play with the _xscale of three similar rectangles, where each of their center crosses are placed differently:

Now do you understand what I mean? The movieclips are scaled in relation to the location of their center cross, and once again, this is very important to understand.

The _x and _y properties go one step further. Say you have a setup where a child clip is inside of a parent clip. If you get the child's y position, you will actually get the y distance between the parent clip's center cross and the child clip's center cross.

Scaling the scrollbar and moving it with the arrow buttons also involves playing with properties.

Okay, enough with the blablabla-ing, let's get to work.

» 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: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.