Custom Scrollbar

In today tutorial we will make a custom scrollbar. For this tutorial we will use ActionScript 3.0
There are a lot of tutorials on the net with this subject but more of them are using a static text field (they draw a text field on the stage and type the text in that field).This approach does not offer a lot of flexibility. In our tutorial we will use a dynamic text field (the text is not typed on the stage it comes from an external source).


Ok. Now let’s go back to work.
  • 1.Go to File – New select Flash file(ActionScript 3.0) and click Ok.
  • 2.Double click on the layer1 name and rename it text.
  • 3.Select the Text tool in the Properties panel set the Text type to Dynamic text, the Line type to Multiline and set the color to black.On the stage click and drag to make a text field. In the Properties panel set the width to 200 ,height to 150, x to 175 and y to 125.Set the instance name myTfield.

Your settings must like like this:


  • 4.Insert new layer ( Insert – Timeline – Layer ) double click on the layer 2 name and rename it to track.
  • 5.Lock the text layer. Select the Rectangle tool and on the track layer draw a rectangle. Set is width to 15 ,height to 150, X to 376 and Y to 125 and pick a color. I pick a orange one (#FF9900).
  • 6.Select the rectangle hit F8 name it track_mc, set it’s type to Movie Clip and set it’s registration point in to upper left like in the picture.Set the instance name to track_mc.



  • 7. Insert new layer ( Insert – Timeline – Layer ) double click on the layer 3 name and rename it scrollHandler.
  • 8. Lock the track layer. Select the Rectangle tool and on the scrollHandler layer draw a rectangle. Set is width to 15 ,height to 15, X to 376 and Y to 125 and pick a color. I pick black.
  • 9. Select the rectangle hit F8 name it scrollHandler_mc, set it’s type to Movie Clip and set it’s registration point in to upper left like before.Set the instance name to scrollHandler_mc.


Ok now we finished the graphical part. Let’s write the code .
  • 10. Insert new layer ( Insert – Timeline – Layer ) double click on the layer 4 name and rename it actions.
  • 11.Select frame 1 in the actions layer hit F9 to open the ActionScript panel.
  • 12.Copy and paste the code in the ActionScript panel.
1. var myMessage:String = "If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy! If you like the scroll bar and want to know how I made it I have posted a detailed tutorial on my blog: http://biochimistu.blogspot.com.Thanks and enjoy!";
2. myTfield.text = myMessage;
3. myTfield.wordWrap = true;
4. var minScroll:Number = scrollHandler_mc.y;
5. var maxScroll:Number = minScroll+(track_mc.height -scrollHandler_mc.height);
6. var scrollInterval:Number = maxScroll - minScroll;
7. var draging:Boolean = false;
8. var bounds:Rectangle = new Rectangle(scrollHandler_mc.x,scrollHandler_mc.y,0,track_mc.height - scrollHandler_mc.height);
9. scrollHandler_mc.addEventListener(MouseEvent.MOUSE_DOWN,beginDrag);
10. stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);
11. function beginDrag(event:MouseEvent):void
{
scrollHandler_mc.startDrag(false,bounds);
draging = true;
scrollHandler_mc.addEventListener(Event.ENTER_FRAME,checkingProgress);
}
12. function endDrag(event:MouseEvent):void
{
scrollHandler_mc.stopDrag();
draging = false;
}
13. function checkingProgress(event:Event):void
{
var moveDrag:Number = scrollHandler_mc.y - minScroll;
var procentDrag = moveDrag / scrollInterval;
if (draging)
{
myTfield.scrollV = procentDrag * myTfield.maxScrollV;
}
}
Remove the numbers before every line of code. Hit Ctrl + Enter to test your movie.
Should work fine.
Next we will look at the code.
In line 1 we declared a variable that hold’s the text that will be displayed by our Text Fiels.
In line 2 we assign that variable to our text field and set the wordWrap property to true.
After we declared a variable for our minScroll this hold the minimum positions for our scrollHandler_mc.
The maxScroll variable holds the maximum positions of scrollHandler_mc.
scrollInterval variable holds the interval in witch our scrollHandler_mc can move.
In lines 9 and 10 we add two eventListeners ,these will keep track of Mouse_DOWN and Mouse_UP events.
Function beginDrag() handle’s the Mouse_DOWN event. In this function we enabled our scrollHandler_mc, you can drag it and set the boundaries for it.We register another listener(Event.ENTER_FRAME) that will update the scroll property of our myTfield base on how much we drag the scrollHandler_mc.This behavior is handle by the function checkingProgress().
The function endDrag() disable the drag property of scrollHandler_mc.

I hope that I was clear enough.
If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.I will see you on next tutorial.

You can download the source file from here:Custom Scrollbar.

50 comentarii:

Post a Comment

  • Anonymous : February 12, 2008 at 2:05 PM

    do you know how to make a scroll bar with up and down buttons? I have one made but can't figure out how make it so the buttons scroll continuously when held down. Please e-mail me at medicman006@yahoo.com. Thanks!

  • Anonymous : February 12, 2008 at 2:27 PM

    Yea I'm trying to figure out the same thing. Can you post something before 6:30 PM CST? Thanks!

  • Biochimistu : February 13, 2008 at 10:08 AM

    Hello.
    I will post here one tutorial that shows how to make this type of Scrollbar.If I have enough time I will write it this week if no the next week.
    Have fun flashing.

  • mike : March 17, 2008 at 3:49 AM

    hi, this might be a real silly question... but is there anyway to make the textbox transparent so when you load the .swf file into dreamweaver or similar the background design is visible??? also, is there any way to make segments of the text in the box different i.e. bold, different font, different size/colour etc...

    just gotta say the guide is awesome, well done.

    cheers,
    mike.

  • Biochimistu : March 17, 2008 at 11:42 AM

    Hi Mike.
    I don’t know if I understand your question. The TextField by default has no background, try matching your swf background with the background of the application where you want to load the sfw. Yes it is possible to format the text, read this tutorial Format text with CSS you will find some helpful things in there.
    Try reading from the ActionScript Official Documentation about TextField class.I hope that this helps you.

  • mike : March 18, 2008 at 7:21 AM

    i am making a website in dreamweaver and the area i need this scroll box needs to appear in has a background image. when i insert the .swf into dreamweaver and preview, the area where the text appears is white.... i can send you an example if you like?

  • Biochimistu : March 18, 2008 at 10:46 AM

    Hi Mike.
    Ok, now I understand, you want to make your sfw background
    transparent. Go to
    How to make a Flash movie with a transparent background you will find a very good explication on how to do that.
    Basically you will need to modify the Publish Settings of your swf or to make a little modification to the HTML code.
    This should solve your problem.

  • Anonymous : March 24, 2008 at 9:23 PM

    Hello, Biochimistu
    I love your custom scroll script - thank you, but how would I change your script to make the text load from an external text file? Thank you so much, Shawn.

  • Biochimistu : March 25, 2008 at 10:19 PM

    Hi.
    Read the How to load, display and scroll external text. tutorial, you will find there the code needed to load external text.

  • Anonymous : March 26, 2008 at 6:19 PM

    Hello, Biochimistu
    I know how to do scrolling text with up/down buttons, I was just hoping that you knew how to do it using the custom scrollbar. If you do know, please, share! Thank you for your help, Shawn

  • Biochimistu : March 27, 2008 at 11:13 AM

    Hi.
    You have not understood me or maybe I don’t make my self clear. You said that you want to make "the text load from an external text file". I told you to go to that tutorial to see how to load an external txt file and to add the text to the Text Field. But anyway make this modification to the script:
    -remove the first three lines of code
    -place the next code:
    //--------------loading external text and display it---------
    var textRequest:URLRequest = new URLRequest("sample.txt");
    var textLoader:URLLoader = new URLLoader();
    textLoader.load(textRequest);
    textLoader.addEventListener(Event.COMPLETE,
    fileLoaded);

    function fileLoaded(event:Event):void {
    myTfield.text = event.target.data;
    myTfield.wordWrap = true;
    }
    Now the text comes from an external file and you can use the custom scrollbar.

  • Anonymous : April 13, 2008 at 11:27 AM

    Hi!

    I used this scrollbar code and it works well, and I use it with dynamic text. Thank you.

    However, I have faced a problem: when a dragger (scrollHandler_mc) was moved to a position lower than its initial one, dwitching to another scrollable text area in another frame will have the dragger in the same position and it will be draggable below the limits of track_mc. In order to restore it, I need to refresh the website page. You can look at it: http://www.survivorsresource.narod.ru/flash/flash.html

    Some pages of my site have text which is scrollable, so when you scroll this page and don't return the scrollHandler in the initial position, yu will have problems scrolling text in other sections of the website.

    How the code can be changed?

    Thanks.

  • Biochimistu : April 14, 2008 at 4:42 AM

    I have visited your link and I saw the problem that you encounter. I don’t know how your site is build but I suggest to set a variable that will hold the initial position of the scrollHandler_mc and every time when you click on a button to load new text in the text field to set the position of the scrollHandler_mc to be equal with this variable. In this way when you go on a different page on your site the scrollHandler_mc is in initial position not where you have left it on other page.
    The value of the variable will be equal with initial y position of the scrollHandler_mc.
    If have not tested this (I don’t have time) but I think that should work.

  • Zyn : April 16, 2008 at 12:43 PM

    Is there a way to use this on a flash file in AS 2? It's great but I can't use it!

  • Biochimistu : April 17, 2008 at 11:55 AM

    Hi.
    No, you can’t use this scrollbar in an as 2 file.The scrollbar script is written in AS 3.0 and will not work in AS 2.0.You can try to adapt the script to as 2 or the easy way search a scrollbar that is written in as 2.

  • Anonymous : April 28, 2008 at 11:09 AM

    I tried changing the scrollhandler to a circle shape and now it won't reveal the last part of the text...any recommendations on how to fix that? Also, could you make a tutorial on how to make paragraphs and bolding certain words? Other than that your scroller is amazing!

  • Biochimistu : April 29, 2008 at 1:11 AM

    If you have maintained the registration point in the left upper corner you should have no problem. I have a tutorial Format text with CSS in ActionScript 3.0. where I just done that, making paragraphs and bolding certain words, if that is what you looking for.

  • Anonymous : April 29, 2008 at 3:24 AM

    This works well when placed in the root, but when I place all these scripts, textfields and scroll mc's to a nested mc, the scroller doesn't work.

    What do I have to change?

  • Anonymous : April 29, 2008 at 1:46 PM

    Great scrollbar tutorial! Is there a way to scroll pictures or movie clips as well? I'm really having trouble finding out how to do that in AS3.

  • Biochimistu : April 30, 2008 at 1:27 AM

    You must change the way in witch you are targeting all the movieclips that you have nested. For example, if you have placed a TextField in a MovieClip and you want to refer to the TextField you do it like this MovieClip.TextField.y = 100.

  • Biochimistu : April 30, 2008 at 1:49 AM

    I will try to write a tutorial about this subject, scrolling a movieclip/graphic, but I don’t know when it will be done.

  • Anonymous : April 30, 2008 at 5:09 AM

    When you wrote: "...do it like this MovieClip.TextField.y = 100"

    Is that "MovieClip" supposed to be just "MovieClip" or the instance name of the movie clip the textField and scrolls are in? Well I tried "MovieClip" and stage.myClip.TextField and got loads of errors.

    I'm back in the bottom of coding skills, thanks to as3. :(

  • Biochimistu : May 1, 2008 at 1:51 AM

    Yes, that "MovieClip" supposed to be just "MovieClip" is just an example and is not related with scrollbar script.
    Do this:
    Make a new Flash file, insert a new blank MovieClip, go to the file that contains the scrollbar and select all the layers press Ctrl + Alt+ C (Copy Frames). Now go back to the created file select the only layer and press Ctrl+Alt+V( Paste Frames) and now you have the scrollbar nested in a new MovieClip.

  • Anonymous : May 2, 2008 at 1:53 AM

    Doesn't work.

    The field and the scrollbar is nested in the third MC from root. How do I target it?

    Something like this:
    stage.firstMc.secondMc.thirdMc.myTfield.removeEventListener(Event.SCROLL,updateScrollHandler);

  • Biochimistu : May 2, 2008 at 9:46 AM

    Remove stage from your script.

  • Anonymous : May 5, 2008 at 12:31 AM

    after deleting "stage" it says:
    1120: Access of undefined property firstMc.

  • Anonymous : May 5, 2008 at 6:58 AM

    Any quick AS3 Coding to make the mousewheel scroll the text and make the ScrollHandler move with the text? And I also agree, AWESOME TUTORIAL!

  • Biochimistu : May 5, 2008 at 10:51 AM

    You have to set the instance name for your MovieClips in the Property Inspector. Make a MoveClip set its instance name to movie1, inside this make a new MovieClip set its instance name movie2, inside this place a TextField set its instance name to myText(and if you want to keep nesting movieclips repeat the steps, don’t forget to name you movieclips).To target the TextField : movie1.movie2.myText.text = "Hello Anonymous";

  • Biochimistu : May 5, 2008 at 11:04 AM

    Download the source file, the script included is improved and allows the use of the mouse wheel.

  • Courtny : June 1, 2008 at 8:24 AM

    Hello! Excellent tutorials!
    I have frankensteined together a scroll bar with buttons; but I am having trouble with the buttons correlating to the scroll bar's movement.
    i.e. the bar sits at the top while the buttons move the text field independently. Any suggestions on how to fix this error?

  • Biochimistu : June 2, 2008 at 6:30 AM

    You must update the scrollbar position when you click your buttons. You must do some math to find the value that you will add to the scrollbar x position when you click a button.

  • Anonymous : June 20, 2008 at 9:51 PM

    Hi there :)

    Very grateful for your tutorial, but unfortunately, I did everything you said... Pasted the code in, removed all the numbers, but had these errors.. (Even double-checked to make sure nothing which shouldn't be removed was removed, tried again etc). Code I used was :


    var myMessage:String = "If you like the scroll bar and
    want to know how I made it I have posted a detailed tutorial
    on my blog: http://biochimistu.blogspot.com.Thanks and
    enjoy! If you like the scroll bar and want to know how I made it
    I have posted a detailed tutorial on my blog:
    http://biochimistu.blogspot.com.Thanks and enjoy!
    If you like the scroll bar and want to know how I made it
    I have posted a detailed tutorial on my blog:
    http://biochimistu.blogspot.com.Thanks and enjoy!
    If you like the scroll bar and want to know how I made it
    I have posted a detailed tutorial on my blog:
    http://biochimistu.blogspot.com.Thanks and enjoy!
    If you like the scroll bar and want to know how I made it
    I have posted a detailed tutorial on my blog:
    http://biochimistu.blogspot.com.Thanks and enjoy!
    If you like the scroll bar and want to know how I made it
    I have posted a detailed tutorial on my blog:
    http://biochimistu.blogspot.com.Thanks and enjoy!
    If you like the scroll bar and want to know how I made it
    I have posted a detailed tutorial on my blog:
    http://biochimistu.blogspot.com.Thanks and enjoy!";

    myTfield.text = myMessage;
    myTfield.wordWrap = true;
    var minScroll:Number = scrollHandler_mc.y;
    var maxScroll:Number = minScroll+(track_mc.height -scrollHandler_mc.height);
    var scrollInterval:Number = maxScroll - minScroll;
    var draging:Boolean = false;
    var bounds:Rectangle = new Rectangle(scrollHandler_mc.x,scrollHandler_mc.y,0,track_mc.height-scrollHandler_mc.height);

    scrollHandler_mc.addEventListener(MouseEvent.MOUSE_DOWN,beginDrag);
    stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);

    function beginDrag(event:MouseEvent):void {
    scrollHandler_mc.startDrag(false,bounds);
    draging = true;
    scrollHandler_mc.addEventListener(Event.ENTER_FRAME,checkingProgress);
    }

    function endDrag(event:MouseEvent):void {
    scrollHandler_mc.stopDrag();
    draging = false;
    }

    function checkingProgress(event:Event):void {
    var moveDrag:Number = scrollHandler_mc.y - minScroll;
    var procentDrag = moveDrag/scrollInterval;
    if (draging) {
    myTfield.scrollV = procentDrag*myTfield.maxScrollV;
    }
    }


    Errors were :

    1095: Syntax error: A string literal must be terminated before the line break.

    1083: Syntax error: end of program is unexpected.

    --------

    Would be lovely to have some help with this...


    Cheers.

    Lin

  • Anonymous : June 22, 2008 at 1:04 AM

    Really, good tutorial,,,,,,,nice

  • Biochimistu : June 22, 2008 at 4:03 AM

    It’s a problem with that large portions of text passed to the myMessage variable. You need to format that text, download the source file and format the text like there.(answer for Lin).

  • Alexandra Zedalis : June 30, 2008 at 9:30 AM

    hi--I've tried a few of these scrollable text tutorials now, and I keep getting the same errors:

    **Error** Scene=Scene 1, layer=actions, frame=1:Line 22: The class or interface 'MouseEvent' could not be loaded.
    function endDrag(event:MouseEvent):void {

    **Error** Scene=Scene 1, layer=actions, frame=1:Line 27: The class or interface 'Event' could not be loaded.
    function checkingProgress(event:Event):void {

    I'm running Flash 8 so I'm assuming that I don't have Actionscript 3.0. Is there a Flash 8 equivalent?

  • Biochimistu : July 1, 2008 at 2:55 AM

    You receive those errors because the script it’s write in ActionScript 3 and you have Flash 8 witch operates with ActionScript 2. I don’t have a flash 8 equivalent, but if you do a search on Google you will find a lot of tutorials that show how to make a scroll bar using ActionScript 2.

  • Mark : July 10, 2008 at 10:57 PM

    Hello-- wonderful script! I was wondering if there's a way to put paragraph breaks in the text, though. I'm also interested in scrolling pictures within text. Thanks a million.

  • Biochimistu : July 11, 2008 at 3:56 AM

    Hi Mark,
    Yes, you can insert paragraph breaks in the text look at the Format text with CSS in ActionScript 3.0. tutorial to see how to format your text. This script wont work to scroll picture.

  • Mark : July 11, 2008 at 10:47 AM

    Thank you!!

  • Mark : July 12, 2008 at 1:41 AM

    Will that "format text" tutorial work with this scroll box tutorial? I'm kind of confused on the actions. When I did the format text, it disabled the scroll function.

  • Mark : July 12, 2008 at 1:50 AM

    I guess to clarify my last comment, I really want THIS custom scroll tutorial-- so I can have my custom graphic scroll bar, with formatted text. (Not the other tutorial with the up & down arrow scrollers) << that's great, too, but I need a custom graphic to drag the scroller up & down :)

  • Mark : July 12, 2008 at 2:35 AM

    hey..Biochimistu! You can disregard my previous 2 comments. I combined your 2 other tutorials and now I have the custom scroll box that I wanted, WITH the formatted text! I cannot thank you enough! This is awesome! Mark

  • Biochimistu : July 16, 2008 at 9:31 AM

    Hi Mark,
    I’m glad that you have made those script to work together.

  • Cris : October 9, 2008 at 3:23 AM

    Hi Biochimistu.
    Thanks a lot for this tutorial.
    I read here, if you had time you will write the same tutorial (with mouse wheel )but with a Images,etc.. scrolling a MC container with images text, etc...
    Did you made it?
    Thanks lot very useful for the AS3 beginners
    Cris

  • Biochimistu : October 12, 2008 at 3:43 AM

    Hi Cris,
    I have written a tutorial, it’s not using the mouse wheel but it explains how to scroll images.
    You can check it here: Scrolling photos loaded dynamically with ActionScript 3.

  • Anonymous : November 2, 2009 at 12:21 PM

    so someone know how to make a scrollbar without using a f-ing textfield.

  • Anonymous : May 1, 2010 at 9:01 PM

    thanks for the tutorial! but do you know how to make scrollbar for graphics?

  • Biochimistu : May 3, 2010 at 11:10 PM

    Take a look at this tutorial:Scrolling photos loaded dynamically with ActionScript 3

  • Jared Schwalbe : May 22, 2010 at 12:30 PM

    I got an error message when I tried this. I'm using AS3 I'm not sure if that has anything to do with it. This is the message I got: "1095: Syntax error: A string literal must be terminated before the line break." along with "1083: Syntax error: end of program is unexpected." Can you help me out? Thanks

  • Biochimistu : May 23, 2010 at 6:10 AM

    Hi Jared,
    The first error has to do with the string assigned to the myMessage variable, all the string must be in one line. The second error is a syntax error, so you probable have forgot a {, ; or misspelled something.
    Also download the source files and take a look.