Selteco.com > FlashDesignerZONE.com > Tutorials > T1033

Do-It-Yourself Scrollbar: Vs. 1.1


by Alan Burkhart

This is a pretty good scrollbar for scrolling text or other objects within your Flash movie. It doesn't require too much coding and it uses simple ActionScript commands that most people learn soon after getting Flash Designer. It resizes itself automatically for the number of lines in your HTML text field. Once it's complete, you can insert it into any SWF with an HTML text field or edit field, add two lines of code to your project, and have a working scrollbar. You can click an arrow to move the text up or down one line, click and drag the bar, or click in the track to make the text "jump" several lines.


How to insert a scrollbar
  • Download scrollbar element (scrollbar_01.swf)

    scrollbar_01.zip

  • Create a new .SFD file and set the size to 300x400. Leave the background color black for now. Set the frame delay to Stop.
  • Create an HTML text object and size it 230x380. Place it so that the top/left corner is just inside the top/left of the frame. Choose a text color that shows up well in the rectangle. Don't rename the text object.
  • Fill the HTML text object with whatever text you wish for the purposes of this tutorial. Be sure that there is 3 or 4 times as much text as can be displayed in the sized HTML object (so we can scroll it).
  • Select HTML text object and press F2. Check "Action Script Target" under "Action Script Options". Click OK.
  • Choose "Insert" > "SWF Clip" and insert scrollbar_01.swf clip

Click Frame > ActionScript and paste the following code into the dialog:

var name= new Object(HTMLText1);
var lines=new Object(name.maxscroll);

If the name of your HTMLText field is not "HTMLText1" then change the first line of this code accordingly. The name of your text field should appear inside the "()". Note that you should not put the name in quotes.

Press F9 to preview Flash

Create your own scrollbar

Now let's build the scrollbar...
  • Create another new file and size it 28x320. Leave the background black. Set the frame delay to Stop.
  • Create a rectangle and size it 28x270. Set the fill color to "777777" and line color to "C4C400".
    Click Edit > Convert to Sprite. Click Item > Placement Properties and change the name to "track" and check the "ActionScript Target" checkbox. This is the track for your scrollbar.
  • Create a small rectangle and size it 28x25. Set the fill color to "494949" and the line color to "dirty yellow" ("C4C400").
  • Click Edit > Duplicate and leave the "Count" property at 1. Click "OK". This creates a second rectangle. These will be the buttons at the top and bottom of the scrollbar.
  • Create a triangular shape and set the fill color to "C4C400". Set the line color to black. Size it to 15x12. Click Edit > Duplicate and click "OK". Keep the duplicate selected and click Item > Rotate > Flip Vertical.
  • Center the first arrow (the "up" arrow) on top of the first rectangle and leave it selected. Hold down the Shift key and click the rectangle so that both are selected. Click Edit > Convert to Sprite. Click Item > Placement Properties. Name the sprite "btn_up". Check the "ActionScript Target" checkbox.
  • Repeat the above step for the other rectangle and the "down" arrow. Name this one "btn_down."
  • Create one more rectangle and size it 26x60. Set the fill color to "494949" and the line color to "000000".
  • Keep it selected, and click Edit > Convert to Sprite.
  • Click Item > Placement Properties... set the rectangle's name to "bar" and check the "ActionScript Target" checkbox. This will be the vertical bar that rests in the track of your scrollbar. It isn't necessary for the purposes of the tutorial to add the 3 shapes in the bar. They're just for looks.
Putting everything in its place (precision counts here!)...
The coordinates below can be seen in the Flash Designer status bar at the bottom of the window. Use the Arrow keys on your keyboard for precise placement.
  • Select "btn_up" and place it at 0 (x) and 0 (y).
  • Place "track" at 0 (x) and 27 (y).
  • Place "bar" at 1 (x) and 28 (y).
  • Place "btn_down" at 0 (x) 294 (y)... Don't worry about it being away from the rest of the objects. It'll place itself later.
how it should look
Making it work...
Click Frame > ActionScript and paste the following code into the ActionScript dialog:

//Set vert coords for track and bar
trky=track._y; //Y coord for track
bary=trky+3; //Y coord for bar (with next line)
bar._y=bary;
 
//This object gets text field size from parent SWF
var parts=new Object();
parts.txtmax=_parent.lines;
parts.text1=_parent.name;
 
//LL is the "Lower Limit" variable. This defines the bottom 
//vertical coord for the bar using the # of lines in the
//parent text field (1 pxl per line) added to the top Y coord
 
LL=bary+parts.txtmax;
 
//Defines the height of the track by adding the bar height
//and the LL value, then subtracting the track's Y coord
track._height=(LL+3)+bar._height-trky;
 
//Sets the Y coord for the down arrow at the 
//bottom of the scrollbar
 
btn_down._y=track._y+track._height+1;
 
//when the track is clicked, this moves the bar to
//the mouse Y coord, or to the LL coord if the 
//mouse Y coord is below it
 
track.onpress=function()
{parts.text1.scroll=_ymouse-bary;
ybar=_ymouse;
if (ybar>LL) {ybar=LL;}
bar._y=ybar;};
 
//scrolls text up one line to make the next lower 
//line visible
 
btn_down.onpress=function()
{parts.text1.scroll=parts.text1.scroll+1;
if (bar._ybary) {bar._y=bar._y-1;}};
 
//enables user to drag the bar up and down
//If "z" equals 1, text will scroll - if z==0 it won't
//this is to work around a problem with ondragOut()
 
bar.onPress=function()
{bar.startDrag(false,1,bary,1,LL);z=1;};
 
//if z equals 1, text will scroll and any other scripting is enabled
//when mouse is moved
 
bar.onmousemove=function()
{if (z==1) {parts.text1.scroll=bar._y-bary;}};
 
//disable drag when mouse button is released over the bar
 
bar.onRelease=function()
{bar.stopDrag();z=0;};
 
//disable drag when mouse is released outside the bar
 
bar.onreleaseOutside=function()
{bar.stopDrag();z=0;};

Time to test the scrollbar...

First: Save the file! You've done a lot of work here. It'd be a bad time for a computer crash. Name the file "scrollbar_01". Go ahead and save the scrollbar in .sfd and .swf formats.

In scrollbar_demo, click "Insert" > "SWF Clip". Select "scrollbar_01" and click "Open". This places the scrollbar in your larger file. Place the scrollbar at the extreme top/right.

Hit Flash Designer's Preview button and see how it looks. If everything is in place, drag "bar" up and down to be sure the text scrolls as you do so. If that works okay, try clicking the track to make the text jump up and down. The bar should jump to the spot you clicked on the track. Lastly, click the up and down arrows. These move the text one line with each click. At present the arrows don't scroll continuously. I'm working on that and will (hopefully) release an updated version sometime soon. I'm open to suggestions on this issue.

Stuff To Remember:

  • When building scrollbars for your projects, define the size and color of your shapes before converting them to sprites. Once you have the look you desire, then go back and convert them.
  • Remember that you should ALWAYS use the names defined in this tutorial for the various parts of the scrollbar. The ActionScript won't work if you change them, unless you edit each reference to the renamed shape.
  • The only code you need to change will be in the two-line code that you placed in scrollbar_demo. The text field name defined in the first line of code must be the name of the text field you wish to scroll. The rest of it takes care of itself. Your projects don't have to be named "scrollbar_demo". That's just the name used here.
  • At present, it is up to you to be sure that the host .swf and the text field are of a size that won't cause the scrollbar to size itself larger than the hosting swf. Things get pretty weird if this happens. The scrollbar's track uses 1 pixel per line of text plus the height of the bar, so it'd take a fairly huge amount of text to oversize it. A later version will include safeguards for this.
  • If you use an edit field instead of an HTML text field, be sure to click Item > Edit Properties, then do the following:
    1. Check "Word Wrap"
    2. Check "Multi-Line"
    3. Check "Read-Only" (a later version will allow the scrollbar to resize if the text changes)

Products | Purchase | Downloads | Support | Flash Tutorials | Contact
Copyright © 1999-2013 Selteco Software, Inc. www.selteco.com, ph: +1 810 377 5778