Home

Create your own Flash AS3 Scrollbar!

Sat, 12/18/2010 - 6:57pm — Jody Hall

Many times when you are programming in Flash, you may have a project where you need a scrollbar. You may also wish that you could customize it and make it look however you want it to look. You could use the scrollbar that comes in the components set. The UI scrollbar will let you apply it to a textfield to scroll text. Similarly, the ScrollPane component will let you scroll any kind of content just by setting it a MovieClip instance as the "source." But in both those cases, the look is really difficult to customize, and the default look is just so "clinical," and in your finished program, anyone could tell that you just took the easy way out and used the components. You probably realize that if you could just create your own scrollbar, you could make it look exactly like you want. But just how hard is it to make your own scrollbar?

As you are going to find out in this article, it's really not all that difficult. There is some math involved, but even that's relatively easy. So, I am going to show you how, step by step. And in my usual "down to the bone" descriptive style, I'll make sure that you do understand all the steps. But if you're not up to reading the whole article, you can also just grab the finished files from the last page, and put them to use! I've tried to make the class as easy to use as humanly possible!

This task is definitely more within your reach than you might think. By seeing not only the formulas involved, but just HOW they are arrived at, you will be able to build your own custom scrollbar class. If there is anything presented here that is not how you would have done it, you can tailor it to your needs!

We're going to start out with timeline code, then when all the formulas are worked out and we have a timeline prototype working, we'll take that same code and build it into a cool reusable class! Sound good? The fun begins on the next page!

Sun, 03/06/2011 - 9:35pm — BritJ

Omg.. Thank you so much!!!

I created an account on this site just so I could tell you THANK YOU!! I've spent a week and half looking for a great tutorial for a basic scrollbar, one that had the optional top and bottom buttons.. and this one was perfect. You explained everything so well, and I could not be happier. Once again, thank you, and you rock!

Brit

Mon, 03/07/2011 - 9:26pm — Jody Hall
Jody Hall's picture

I appreciate your comment!

Brit,

Thank you for posting your comment! You can't imagine how much I appreciate it. Without some kind of feedback, I have no idea who's getting what kind of help from my tutorials. I must say that your comment was one of the nicest I've ever received, and definitely made my day! Very nice to know that someone has found this information useful.

Jody

Sat, 04/16/2011 - 2:14pm — tockcool

Very Good post for me

It's  helpful for me. Thank a lot.

Thu, 05/05/2011 - 7:43am — maxpower78

Hi there. Nice scroll bar and

Hi there. Nice scroll bar and well explained tutorial but I've a problem, I try to use it in another fla movie and when I compile the movie, it throws me this error:

ReferenceError: Error #1056: Cannot create property track in Main.
at flash.display::Sprite/constructChildren() 
at flash.display::Sprite() 
at flash.display::MovieClip() 
at Main()  

 

¿what's the problem and how can I solve it?  

Thanks

Fri, 05/13/2011 - 5:23am — Jody Hall
Jody Hall's picture

Send me your files

maxpower78,

Use the contact form on this website to write me an email. I'll reply and then you can send me your files. I'll fix your problem.

Jody 

 

Thu, 06/09/2011 - 5:30am — Bill Burton

scrollbar

Hi Jody,
I never thought I would use one of these but I made a program with a song and yes it was a long one. The mask got the content out of the way so the next and back buttons below still worked. The math worked out great. Thanks for your fantastic explaination and sharing this tutorial. I also like the way you did the alpha on the red dot. Very Nice!

Mon, 09/26/2011 - 6:01am — snipercup

Thanks for this tutorial

Thank you for this tutorial. I've used only Flash Builder 4, so I created the components (graphics) from code. It was kind of difficult to get the masking working because I couldn't (and didnt want to) let the program do it. I read the tutorial again and I found the part I missed to get the masking working. I found out I had to make (and define) the mask in the main program that's calling the scrollbar onto the stage.

Would be nice if you could add a option to have the page scroll when the user clicks on the bar instead of the thumb (pagedown).

Again thank you I learned a lot and this is one of the few simple working scrollbars (without the need to import additional packages/libraries) I could find out there.

Wed, 11/16/2011 - 1:53am — Siddharth sharma

soory but i could not find

soory but i could not find the source file

Wed, 11/16/2011 - 6:54am — Jody Hall
Jody Hall's picture

Source files are at the top of each page

Siddharth, You did make it to the other pages of the tutorial, right? Anyway, the source files are at the top of each page. There are many source files, because they are progressive. So take some source files from the last couple of pages if you want a working scrollbar. For example, go here: http://theflashconnection.com/content/dispatching-events-and-more-enhanc... (the next-to-last page). Look for the source files just before the text of the article. There is a ZIP archive file for you to download. Jody

Thu, 01/12/2012 - 7:26am — deaconpt
deaconpt's picture

Hi

Hi,
This a very nice scrollbar! But is there a way to hide the scrollbar if the content doesn't need to be scrolled? I say this, because I wanted to use the scrollbar to load multiple contents from different frames (some with long or short text).

Thanks

Fri, 01/13/2012 - 12:43am — Jody Hall
Jody Hall's picture

Showing and hiding the scrollbar

deaconpt,

Use the scrollbar's visible property to hide or show it. But you will have to write your own logic for this. When you instantiate a scrollbar instance, you have already created all your "parts." Among these are the content and the window. You will already have references to these objects, since you create them outside of the class (the class only makes the "parts" behave like a scrollbar). So your logic might go like this:

scrollbar.visible = content.height > window.height;

With a line like this, if the content's height is greater than the window's height, then the scrollbar will show, and if not, it won't.

Jody

 

Tue, 03/20/2012 - 7:01am — julianwave

Resizing the thumb?

Hi, thanks this was a really useful article and a big help. What I was wondering is, how hard do you think it would be to make the "thumb" resize automatically so that it's proportion to the "track" matches the proportion of the window to the content? I'm tempted to have a try myself but I've only just started using as3 and am completely new to creating classes so I thought I'd see if you had any tips.

Mon, 03/26/2012 - 6:50am — Jody Hall
Jody Hall's picture

re: resizing the thumb

Sorry for the lateness of my reply.

I don't have too much doubt that if I took this on, I could do it. I don't think it would be that difficult. I guess I just have to ask myself if it is worth it to me. This feature might be considered a "frill." Another one would be the ability to click the track and have the scrollbar scroll to that point immediately.

It's not that these things are very difficult, it's just that I don't have an immediate need for them, so I don't have much incentive to do it. If you do, though, I'd love to see it, if you care to send it along. Writing things into a class is kind of liberating. Things become reusable. But it is the same code, just structured a little bit differently.

Jody

Thu, 04/26/2012 - 8:12am — Mandy86

Thank you for this scrollbar tutorial!

OMG I just wan to say THANK YOU for making this tutorial! I'm a student trying to make a Flash website for my final project...this is literally the 9th tutorial I've come across (I'm not kidding!). All the other tutorial's I've found are either for ActionScript 2.0, or they stop at the step that returns the number value on the screen...so an especially ginormous thank you for not stopping at the "Extracting the 'scroll percent' " part of the tutorial.
You saved me from endless nights of sobbing into my keyboard...

And OMG the math values! I've never been good at math either and it was SO-O-O helpful to finally find someone who bothered to explain things to me...I'm going to take your tip and start drawing things out. It probably sounds stupid, but it never occurred to me to do that before. : P

Anyway, THANKS AGAIN!

Mon, 04/30/2012 - 10:22pm — Jody Hall
Jody Hall's picture

Thanks!

Mandy86, Thank you so much for your comment! It's one of the nicest I've ever received! It's always fantastic to get feedback that lets me know that my explanations were helpful.

Jody Hall