AS3 Version of ScrollBar Class

Here’s an AS3 version of the ScrollBar Class. This uses the same methods and properties as the AS2 version of this class.

Make a newinstance of ScrollBar with:

 new ScrollBar( target_mc, callBack )

The target_mc must have two clips inside named drag_mc and track_mc. The first is the dragger and the second sets the limits for the dragger. You can design these in any way you like as long as they use the instance names

  • drag_mc
  • track_mc

For best results place the registration points of both clips in the upper left corner and align both clips within their parent.

The callback can be any function name that you have defined. The ScrollBar class will send a value from 0 to 1 to the callback function. Think of this as the percentage position of drag_mc from the top of track_mc.

For example if you made a clip with both drag_mc and track_mc you might give that clip the instance name of scroll_mc. To make a new instance of ScrollBar you could use the following:

var a_scrollbar:Scrollbar = new Scrollbar( scroll_mc, test );

When the scrollbar is dragged the function test would be called and passed a value between 0 and 1 representing the position of the dragger. You could use this to scroll some text in a dynamic text field or set the volume of a sound object.

Here is a sample function that would scroll a dynamic text field named scroll_txt:

function test( n ) {
scroll_txt.scroll = Math.round( ( scroll_txt.maxscroll - 1 ) * n ) + 1;
}

AS3 Scrollbar class

Here’s an example of the scrollbar in action.

Scrollbar( host_mc:MovieClip, call_back_func:Function )Creates a new Instance of Scrollbar. The host_mc clip must contain two clips named drag_mc and track_mc. These clips act as the scrollbar. track_mc sets the limits while drag_mc is the interactive clip.The call back function can be the name of any function you define. It will receive one parameter, a value representing how far the scrollbar is scrolled. The range of the returned value will be from 0.0 to 1.0. With 0.0 being the value returned when the scrollbar is at the top (or left when scrolling horizontally) and 1.0 when the scrollbar is at the bottom (or right). You can use this value to control elements in your movie.

  • host_mc: a movie clip containing the drag_mc and track_mc.
  • call_back: the name of a function that will be called when the scrollbar is scrolled.

scroll_horizontal( horizontal_scroll:Boolean )

This method determines whether the scrollbar scrolls vertical or horizontal. By default the scrollbar scrolls vertically. Calling scroll_horizontal() and passing true makes the scrollbar scroll horizontally.

getValue():Number

The method returns the current value of the scrollbar.

setValue( n:Number )

The method sets the current position of the scrollbar. Pass a value of 0 to 100.

Property enabled

This property enables and disables the scrollbar.

24 thoughts on “AS3 Version of ScrollBar Class”

  1. Thanks for this great example!

    I did notice that the drag function is getting called non-stop, even when you release the scrollbar. You may want to add a removeEventListener for the Enter Frame event.

  3. That scroll bar seems to work perfect….Thanks….any ideas on how to make arrows that you can click that makes the text AND scrollbar go up and down???

  4. Add a method to the MakeScrollBar class that allows you to set the position of the scroll bar. I think I did this in AS2 version.

    Make some buttons that scroll your text. Call the set_position method in the MakeScrollBar class to update it’s position.

  5. I am new to flash and was wondering if someone could send me a file of a done scroll bar with the AS inside the .fla? i’ve never worked with outside the fla and it seems you cant use both. anyways i would be greatful if someone did this.

  6. I have a two scrollbar examples on my site. Take a look they are not difficult to work with. You should be able to modify the art in the example file without with a little effort.

  7. Hi there… is there an easy way to modify the code so it when I click on the left/right arrows the scrollbar jumps a special distance instead of scrolling forward until I release the mousebutton ??

    Thanks for att good class!

  9. Thanks for your code. Very thoughtful to put it out there!!!

    But why doesn’t this code work, when I use it not in the main timeline, but inside another movie clip which handles my page?

    Cheers

  12. Hi

    I updated your SimpleScrollbar.as class so it handles page up/down funcionality. It assumes the width/height of the drag_mc as “page size”. This could help if you eventually make the drag size vary similar to standard OS behaviors.

    I guess this might help others so here’s the code (it’s just a matter of replacing the click_track function):

    private function click_track( e:MouseEvent ):void {
    if ( is_horizontal ) {
    if ( drag.mouseX < 0 ) {
    drag.x -= drag.width;
    if ( drag.x lower_limit ) {
    drag.x = lower_limit;
    }
    }
    } else {
    if ( drag.mouseY < 0 ) {
    drag.y -= drag.height;
    if ( drag.y lower_limit ) {
    drag.y = lower_limit;
    }
    }
    }
    broadcast_update();
    }

  14. I made some additional changes so that the scrub width/height would be relative to the text field (if any) and it would not show up if the text length is less than the available area. If you want the new files just let me know.

  16. Pingback: websites accesed so far to help understand ActionScript 3 « Dave Potts Blog

  17. Hello EveryOne,

    1st thks for shaing, just I want to say u have a probleme with mouseWheel text is scrolling but thks Scrollbar stay on the Top…

    thks again

  19. Pingback: OEF3: scrollbar klasse « Webanimatie 2
  20. Pingback: Assignment 03 « Webanimatie 2

  21. Hello,

    I’m still somewhat new to flash, and Id like to say this scroll bar works beautifully, but I am having one small issue: for some reason so far I haven’t been able to get the dynamic text to word wrap, do you know why this is or how I can fix it?

    Thanks

  22. Hi, I am interested in trying out your code. I am able to open the .fla from the download link at the very top (makescrollbar-class), but not the examples from SimpleScrollText_041109 with the xml feed, I always get an Unexpected File Format error when I try to open the .fla, what version of Flash are they? (I am using Flash CS3 Pro / PC version)

    thanks

Comments are closed.