AS3 Scrollbar Class - V 2.0

I was not satisfied with the previous release of the scrollbar. It was too difficult to adapt and use, and it left very little space for upgrading.

So i made a new scrollbar class, with advanced features, with the precious help of Jack Kalish. Please stop by his site at www.kalicious.com, he was very helpful for this new version of the Scrollbar Class. Thanks Kali!

By the way. These are some of the new features.

  • It is now possible to use every movieclip on the stage as the components of the scrollbar. You are not forced anymore to give your object defined instance names. They can be whatever you want.
  • The class is now instantiated using the New Scrollbar constructor, that takes several parameters, leaves you more freedom and gives you the possibility to choose if you want the dragged movieclip to be blurred on dragging and the velocity of the movement.
  • The class now releases errors on init() if you did not declare the right components and tells you what components are missing.
  • The ruler (handler) length is now proportional to the length of the object dragged, as well as mousewheel velocity.

You do not need to instantiate the class by rightclick -> linkage, anymore.

The right way to use the class is now:

import Scrollbar;
var sc:Scrollbar = new Scrollbar(text, maskmc, scrollbar.ruler, scrollbar.background, area, true, 6);
sc.addEventListener(Event.ADDED, scInit);
addChild(sc);
function scInit(e:Event):void {
sc.init();
}

This is the example i made. As suggested by Kalish, i used a Input text to change runtime the length of the text box (to check for the change in the length of the scrollbar ruler)

And here you can download the class zip package, with an example inside.

Enjoy! And as usual, any comment is welcome!

ann said,

June 29, 2008 @ 7:25 pm

I’m having trouble with a dynamically created textfield with an embedded font which I add to the draggable clip. The font does not showup. How can I get that to work? I can add the textfield to other clips and it shows up fine, so I know it’s not a problem with my code.

ann said,

June 30, 2008 @ 4:46 am

If I remove the cacheAsBitmap in the init() function and all the blur filter references, then the font shows up but it’s squished short! Why would it do that?

fleshMaker said,

June 30, 2008 @ 10:13 am

Hi, be sure to check that you use the font in the format that you embed. If you use bold and you are embedding normal characters this won’t show up. At least here it gives no problem. Pixel fonts anyway are always a problem :) try sticking to a simple font and check. Otherwise if you find that the problem is having bold or italic characters, include somewhere in your fla, a simple dynamic textfield with bold characters and italic characters embedded. This will resolve.

JM said,

July 3, 2008 @ 7:12 pm

I tried adding two of the scroll boxes to my .fla and I get the error:

Scene 1, Layer ‘// actions’, Frame 519, Line 5 1151: A conflict exists with definition sc in namespace internal.
Scene 1, Layer ‘// actions’, Frame 519, Line 9 1021: Duplicate function definition

What do I change to make two scroll boxes work?

Thanks!
JM

ZanMaster said,

July 3, 2008 @ 11:32 pm

I just like to say Thank you! You are a life saver. I have been looking for this tutorial for a while now and am glad I found yours… It’s simple and easy to edit. I’m not flash savvy or anything but I know a little AS3 and I was able to edit the file and make it my own in a matter of minutes in my first attempt! This file is truly exceptional and everyone should get this because if I can do it, anybody can.

Thanks a lot!
Z

fleshMaker said,

July 4, 2008 @ 8:17 am

JM:
It’s natural! You are giving the two scrollbar instances the same name and the same function on ADDED_ON_STAGE

I do not know the name of the object you passed as parameter to the two scrollbars. Anyway your code should be something like this.

import Scrollbar;

var sc1:Scrollbar = new Scrollbar(…your parameters…);
sc1.addEventListener(Event.ADDED, sc1Init);
addChild(sc1);
function sc1Init(e:Event):void {
sc1.init();
}

var sc2:Scrollbar = new Scrollbar(…your parameters…);
sc2.addEventListener(Event.ADDED, sc2Init);
addChild(sc2);
function sc2Init(e:Event):void {
sc2.init();
}

I hope this can help!

ZANMASTER: Thank you for the comment! And i am glad to be helpful! Come back often to check new easy to edit scripts! :D

JM said,

July 6, 2008 @ 6:16 pm

Thanks! i will try it..

r3b00t said,

July 9, 2008 @ 12:38 am

Amazing work dude !
Thanks very much ! One day maybe, i will make great script to sharing like you ;)

fleshMaker said,

July 9, 2008 @ 8:17 am

jm: let us know if you succeed :)
r3b00t: it is not so difficult, anyway :D

Matt said,

July 12, 2008 @ 2:41 pm

Hello and first of all thanks a lot !!
I’m having a problem using this file in a particuliar situation, in fact I’m loading your file into another animation with a normal loader class and so on … the scroller appears, but I’m getting this error, can you help ?
TypeError: Error #1009: Il est impossible d’accéder à la propriété ou à la méthode d’une référence d’objet nul.
at classes::Scrollbar/init()
at home_fla::MainTimeline/scInit()
at flash.display::DisplayObjectContainer/addChild()
at home_fla::MainTimeline/home_fla::frame1()
Where home.fla is the new name I gave to your project.
The scrollbar and scroller do appears but doesnt reacts…I guess there is some sort of conflicts with the listener you create on your action layer.
My global animation is working with separate document class if it can helps.
Many thanks !!

cheuk said,

July 20, 2008 @ 8:38 am

Thank you for your effort. It is indeed very helpful.

Would you mind sharing some ideas about the ruler? I am new to Flash. When I looked into your design, I found that I can understand the basics except for the ruler. There are some grid lines in the ruler movieclip. I have no idea what it is and around all the examples from books and online tutorials, I can’t find any information about it. Would you mind sharing the knowledge about this?

Thank you very much !!

cheuk said,

July 20, 2008 @ 12:49 pm

I have been studying the class file that you have put effort into. I wonder that there are 2 movieclips which belongs to the same class, the hitarea and the mask. Would you mind telling me what are the uses of them ? Because I tried to remove the hitarea and modify the constructor so that the hitarea parameter uses the mask object and it works fine too. Thank you very much !!

jbweb said,

July 24, 2008 @ 11:00 pm

Perfect.

Thank you so much for sharing.

AS3 XML Scrollbar Class | SimplicIT . Simple IT Solutions . LAB said,

August 10, 2008 @ 11:31 pm

[...] Another big thank you to Valentino Tombesi for his fantastic AS3 Scrollbar Class v2. [...]

SimplicIT said,

August 10, 2008 @ 11:38 pm

Hi Valentino

As I did with your Scrollbar Class, I have done the same with your AS3 Scrollbar Class v2.

Just look for AS3 XML Scrollbar Class at my lab.

Thanks for your great work!

Nimb said,

August 14, 2008 @ 10:36 am

Cheuk: The grid lines are for 9-slice scaling, you can switch this on in the movie clip properties.

I’m having problems when I try to put images in the scrolling movie clip, they don’t show up.

SimplicIT said,

August 14, 2008 @ 12:44 pm

Hi Nimb

I had the same issue with images. Just comment out all the blur filter code in the class file:-
Lines 20, 29, 42, 99, 100, 102, 196-200
Once you have done this, remove “true,” from this line on your timeline:
var sc:Scrollbar = new Scrollbar(text, maskmc, scrollbar.ruler, scrollbar.background, area, true, 6);

Rodislav Moldovan said,

August 15, 2008 @ 4:20 pm

this is a nice component, but not ready for dynamic content.

Ryan Mac said,

August 15, 2008 @ 5:24 pm

Hi, Rodislav…

Not too sure what you mean. I’ve used it with dynamic content and it works just fine. Thanks for this code guys. Made our lives a bit easier.

Bractar said,

August 19, 2008 @ 11:55 pm

Hi!
I think there is a small problem with this scrollbar.
The last line is appears cut (need 3 more pixels) when I use the scrollbar but everything is fine when I use the wheel.
Do you know why? dragged, maskclip and hitarea have all the same height
Thanks

ps: nice work!

Jack said,

August 20, 2008 @ 3:38 pm

Hey flesh,
Thanks for the kind words. I was glad to have helped. Love the new improvements you’ve made, great work!

Gerardo said,

August 21, 2008 @ 10:28 pm

Hey fleshMaker….

Just a real quick question. I downloaded your Scrollbar.as file. Why are you calling “super()”? I’m a bit confused on why you need to do this?

Thanks….

Drinkspiller said,

September 10, 2008 @ 4:38 pm

Hi there,

Nice work on the component. I found it useful but made two modifications:

1. If the content does not require scrolling, the background and ruler are hidden (all visible traces of the scrollbar are removed)

2. It seemed there was a more elegant way to create the hitarea than defining an invisible movieclip on the stage. I modified the class to determine if the scrollbar is to the left or right of the scrolling content and then dynamically drag the hit area over the scrollbar and content.

I’ve posted these modifications here for your consideration:
http://drinkspiller.cannonballinteractive.com/temp/ScrollbarAS3V2.1.zip

If you change the second parameter of beginFill() on lines 104 and 114 from 0 to .3 you can see the dynamic hitarea that is drawn. I should also note that all elements in my modified version are left-aligned (registration at 0,0) instead of center-aligned registration.

I haven’t messed with it yet, but if time permits or the need arises, I might add up/down arrow handling.

Cheers, and again, nice work.

Drinkspiller said,

September 10, 2008 @ 4:42 pm

Correction:

In my above comment, where I said “drag”, I meant to type “draw”. It should have read “I modified the class to determine if the scrollbar is to the left or right of the scrolling content and then dynamically draw the hit area over the scrollbar and content.”

fleshMaker said,

September 10, 2008 @ 4:55 pm

sorry for the long absence, i’m back now, so i’m replying all those questions that were left unanswered.

Rodislav Moldovan: Yes, it was not intended to be ready for xml content loading. These are two different issues in most of the cases, so you can (and i definitely think you should) keep them divided. You can use an empty movieclip (linked to an external class) to load all the xml data you want. This scrollbar was mainly intended for general purposes.

About image loading: As SimplicIT stated, you have simply to remove the blurfilter from the scrollbar code. Anyway, there must be a method to keep images while blurring… mumble mumble…

Drinkspiller: well, nice work :) i was working on the changes you already made, so very good work! Adding up and down arrows is next step.

I’m very pleased and honoured of having such a big amount of feedbacks! Thank you all! Really!

Drinkspiller said,

September 10, 2008 @ 7:42 pm

At the previously posted link
(http://drinkspiller.cannonballinteractive.com/temp/ScrollbarAS3V2.1.zip)

I uploaded a slightly modified version…the dynamically drawn hitarea is now set to mouseEnabled=false so as to not prevent the hand cursor and dragging to work properly. Cheers!

Drinkspiller said,

September 10, 2008 @ 9:18 pm

> there must be a method to keep images while blurring

just make sure that the content movieclip (in the example the movieclip on the stage with this instance name “text”) has runtimeBitmapCaching enabled via the UI or via actionscript.

Bractar said,

September 13, 2008 @ 1:19 am

Hi again.
I have 2 problems:
1/ Sometimes the blur freeze
2/ Sometimes, the scroll bar works fine but the movie clip scrolled with jumps
I think the 2 problems are linked and it’s because I have more than one scrollbar on my scene.
Do you know about these issues?
Thanks

Chris said,

September 15, 2008 @ 7:09 am

Reply to Matt #10 (might be late for you but it will help someone else maybe)

I had the same problem as you, I fixed it by modifying the event listener, in case your movie is dynamically added to the stage:

sc.addEventListener(Event.ADDED, scInit);

becomes:

sc.addEventListener(Event.ADDED_TO_STAGE, scInit);

Cheers,
Chris

Chris said,

September 22, 2008 @ 6:21 pm

Thanks for all your work on this scrollbar. It looks really good, functions really well and I have managed to customise it nicely.

One problem though. After my swf has loaded (and the same applied to the test movie generated from your unedited fla) I get the following output error:

[object maschera_23]

I know it refers to the maschera mc in some way but can’t understand why it is being displayed or more importantly how to stop it being displayed.

Please help …
Thanks.

Chris.

fleshMaker said,

September 23, 2008 @ 10:12 am

Hey, chris! If that’s the only thing written in the output panel, then it should be not an error, but a simple trace. Please search trace in the code of the class and comment it, it should be fine! Thanks for visiting!

smrattagnau said,

September 29, 2008 @ 12:16 pm

and if i want the same scrollbar but in a horizontal direction?

r3b00t said,

September 29, 2008 @ 3:52 pm

You need to makes some changes (ex: all ‘y pos’ to ‘x pos’). It’s not difficult, but you’re lucky if it work at the first launch :p

smrattagnau said,

September 30, 2008 @ 10:31 pm

i already tried but even if the code does not report errors the result is that i can’t move the scroller horizontally.. :(

dinamik said,

October 24, 2008 @ 1:49 am

Hi,
First of all, thank you for sharing.

I’ve made a performance improvement stopping the EnterFrame event when the _dragged clip reaches it’s final position. I think it can make the differencce in a multi animated environment. It really has no sense to execute the positionContent() function indefinitely and so many times per second.

I’ver worked upon Drinkspiller’s last version.

http://personales.ya.com/dinamik/scrollbarAs3_v2.02.zip

Cheers!

lambay said,

November 3, 2008 @ 2:24 pm

Hi and thanks so much, the scroller is great.
I am trying to have to of these scrollers in the same swf but am having problems.
my actionscript is pretty bad, any chance you could explain to a newbie how I can use two scrollers :)
thanks again for sharing.

ScrollBar Flash AS3 « Blog.Include said,

November 11, 2008 @ 11:54 pm

[...] Link del Recurso: [ScrollBar]  [...]

SimplicIT . Simple IT Solutions . LAB » Blog Archive » AS3 XML Scrollbar Class said,

November 13, 2008 @ 9:24 am

[...] Another big thank you to Valentino Tombesi for his fantastic AS3 Scrollbar Class v2. [...]

me said,

November 15, 2008 @ 11:49 pm

Hi , this is a great file , one question : can this class be used in comercial purpose ? or only personal , can i use the class in any purpose (including modifying , and installing in another file and sell that file) ?
Thank you. :)

RSS feed for comments on this post · TrackBack URI

Leave a Comment