Creating a Custom Text Scrollbar

February 6, 2009 by: smonte

Learn how to create your own custom scrollbar!

1. Create a new document (ActionScript 3.0).

2. Draw a rectangle of size 40×100.

3. Convert the rectangle into a movie clip. Give it an instance name of “scrollMC”.

4. Draw a line of size 1×200. Convert it into a movie clip.

5. Snap the rectangle on top of the line.

Snap

6. Add a text field (250×250) next to the scrollbar . Give it an insance name of “scrollText”.

7. Now we can set the text field’s properties via ActionScript. Create an actions layer and type the following.

 
var someText:String = "Etiam sed pede. Aliquam rhoncus purus a tortor. Vestibulum tortor risus," +
"hendrerit id, elementum sed, ornare eget, nunc. Integer eu magna. Phasellus cursus. Integer eu sem." +
"Aliquam quam. Cras feugiat quam eu sem. Praesent interdum purus non risus. Fusce dui metus, aliquam ac," +
"sollicitudin vitae, luctus quis, elit. Suspendisse tempor felis eget erat. Sed auctor, est nec luctus "+
"bibendum, neque massa luctus risus, id dignissim enim leo ut nisi. Praesent sed metus sed ante porta "+
"sodales. Ut tincidunt varius arcu. Aenean luctus tempus massa. Aenean ac eros. Nulla facilisi. "+
"Pellentesque nulla. Nunc dolor dolor, laoreet ac, fermentum vitae, mattis ultricies, ipsum.";
 
 
scrollText.text = someText;
scrollText.multiline = true;
scrollText.wordWrap = true;

Explanation: We assign some text to the scrollText text field. We want it to be multiline and wrap text.

8. Let’s add the scrolling functionality to the scrollbar. Type the following.

 
var bounds:Rectangle = new Rectangle(scrollMC.x, scrollMC.y, 0, 200);
var scrolling:Boolean = false;
 
function startScroll (e:Event):void {
        scrolling = true;
        scrollMC.startDrag (false,bounds);
}
 
function stopScroll (e:Event):void {
        scrolling = false;
        scrollMC.stopDrag ();
}
 
scrollMC.addEventListener (MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener (MouseEvent.MOUSE_UP, stopScroll);

Explanation: First we declare a bounds rectangle. It’s x and y coordinates are the same as scrollMC’s. We want it to be a width of 0 and height of 200. Bounds rectangle is used on limiting the movement of the scrollMC. We use the scrolling variable later on, don’t worry about it now. We add the dragging function for the scrollMC by assigning MOUSE_DOWN and MOUSE_UP event handlers. We assign the bounds rectangle to the startdrag’s bounds property. Go ahead and test your movie. As you can see, the scrollMC still doesn’t move the text, but the scrollMC’s movement is now correct.

9. Now let’s make the scrollMC to scroll the text, type the following.

 
addEventListener (Event.ENTER_FRAME, enterHandler);
 
function enterHandler (e:Event):void {
        if (scrolling == true) {
                scrollText.scrollV = Math.round(((scrollMC.y - bounds.y)/200)*scrollText.maxScrollV);
        }
}

Explanation: We want this function to run on every frame, so we use the ENTER_FRAME event. First it checks if the user is dragging the scrollMC. If he does, we scroll the text accordingly. First we calculate the height difference between scrollMC and the bounds rectangle. We divide it by 200, so we get the proportianal value. Then we multiply that value by the maximum scrollV value of the text field. If you have trouble trying to understand this equation, try it with some real numbers.

E.g. if (sqrButtonMC.y – bounds.y) equals 40, and the maxScrollV equals 10, the equation is
Math.floor(((40)/200)*10) = 2. So we scroll the text by 2 units (scrollV = 2).
The Math.round simply rounds the value to the nearest integer.

10. You are done! Test your movie…If you have any questions concerning the tutorials, please visit the forum.

Final code

var someText:String = "Etiam sed pede. Aliquam rhoncus purus a tortor. Vestibulum tortor risus," +
"hendrerit id, elementum sed, ornare eget, nunc. Integer eu magna. Phasellus cursus. Integer eu sem." +
"Aliquam quam. Cras feugiat quam eu sem. Praesent interdum purus non risus. Fusce dui metus, aliquam ac," +
"sollicitudin vitae, luctus quis, elit. Suspendisse tempor felis eget erat. Sed auctor, est nec luctus "+
"bibendum, neque massa luctus risus, id dignissim enim leo ut nisi. Praesent sed metus sed ante porta "+
"sodales. Ut tincidunt varius arcu. Aenean luctus tempus massa. Aenean ac eros. Nulla facilisi. "+
"Pellentesque nulla. Nunc dolor dolor, laoreet ac, fermentum vitae, mattis ultricies, ipsum.";
scrollText.text = someText;
scrollText.multiline = true;
scrollText.wordWrap = true;
 
function scrollUp (e:Event):void {
        scrollText.scrollV -= 1;
        trace (scrollText.scrollV);
}
 
function scrollDown (e:Event):void {
        scrollText.scrollV += 1;
        trace (scrollText.scrollV);
}
 
 
var bounds:Rectangle = new Rectangle(scrollMC.x, scrollMC.y, 0, 200);
var scrolling:Boolean = false;
 
function startScroll (e:Event):void {
        scrolling = true;
        scrollMC.startDrag (false,bounds);
}
 
function stopScroll (e:Event):void {
        scrolling = false;
        scrollMC.stopDrag ();
}
 
scrollMC.addEventListener (MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener (MouseEvent.MOUSE_UP, stopScroll);
 
addEventListener (Event.ENTER_FRAME, enterHandler);
 
function enterHandler (e:Event):void {
        if (scrolling == true) {
                scrollText.scrollV = Math.round(((scrollMC.y - bounds.y)/200)*scrollText.maxScrollV);
        }
}
  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. MovieClip Scroller
  2. Creating a Web Portfolio
  3. Creating a Menu via XML
  4. Random Boxes Text Effect with ActionScript 3
  5. Creating a Shake Effect



Filed under: ActionScript 3 Advanced
Tags:

Comments

7 Responses to “Creating a Custom Text Scrollbar”
  1. ME says:
    December 12, 2009 at 3:21 am

    THANK YOU.

    now..

    DOES ANYBODY KNOW HOW TO FORMAT THE TEXT?! (i.e. bold, arial, size 100)?

    AS3 hurts. Somebody please bring Macromedia’s original programmers back to work on Flash.

    Log in to Reply
  2. Anthony says:
    September 3, 2009 at 4:14 pm

    Does anyone know how I can make a scroll bar like the one above but instead of storing the text in a var have it loaded via XML?

    Log in to Reply
  3. RCB says:
    March 18, 2009 at 1:50 pm

    Any one want to tell us how to format the text – line spaces, bold, stuff like that.

    Log in to Reply
  4. LB says:
    March 13, 2009 at 7:05 pm

    Great tutorial! I just wanted to ask how you would go about adding some easing to the scroll as the text moves using Tween max or something similiar. Thank!

    Log in to Reply
  5. Kyle says:
    February 26, 2009 at 12:33 pm

    Is there any way to format the text? I.E. having spaces after the sentences and new paragraphs?

    Log in to Reply
  6. SHEKAHR says:
    February 9, 2009 at 3:20 am

    SCROLLER is very gud but its difficult 2 understand ActionScript 3 Custom Scrollbar plz can u send me a fla plz shekhar student

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.