Scrollbar class for AS3

I have recently been working with a lot of display objects that needed scroll bars. Previously i have often used the scrollbar component in the Flash IDE, but i wanted a lightweight and slicker looking way to scroll through content. I made a class that is very simple to use, that i would like to share with you. This is the class in action:


You can download the source files here.

The class is very easy to use, below i will give two usage examples. One which is more of a Flash IDE approach where code is written in timeline, and the other where the object that is to be scrollable is created programatically. But first of all you need to add the Scroller class to you class path. In the Flash IDE, you can add the classes folder ( in the zip file ) to you list of classpaths in Preferences -> ActionScript -> ActionScript 3.0 Settings…



Now the code. First off, the timeline version. Lets say you have a MovieClip you need a scrollbar on, where the viewable area should be 250 pixels high, and has a red color. The content of this MovieClip can be anything, an image, graphic, text etc. We place it onto the stage where you want the scrolling MovieClip to be, and give it an instance name of “myClip” in the properties panel. Finally we write this code on the timeline:


      // Import the class.
      import com.perkstoveland.utils.Scroller;

      // Create the scrollbar
      var scroller:Scroller = new Scroller( myClip,  250, 0xFF0000 );

This will create a scrollbar and place it next to the MovieClip on the stage.



This class can used without using the timeline too, lets create a TextField that uses the Scroller all programatically. Like this:


      // Import the class.
      import com.perkstoveland.utils.Scroller;

      // Create the TextField, asume we have stored the text to
      // show in a variable "theTextToShow", which is a string
      // with a few paragraphs of text.
      var txt:TextField = new TextField();
      txt.multiline = true;
      txt.wordWrap = true;
      txt.autoSize = TextFieldAutoSize.LEFT;
      txt.width = 300;
      txt.text = theTextToShow;

      // Lastly we create the scroller, position it, and add it
      // to the display stack.
      var scroller:Scroller = new Scroller( txt, 350, 0x333333 );
      scroller.x = 20;
      scroller.y = 20;
      addChild( scroller );

Thats it, hope you use it, and like it. Enjoy!

Popularity: 20% [?]