- Fixed issue with the mask not being added to display stack and thus no display object.
- Automatically determines if scroll bar is needed
- Customizable mask height
- Scrolls any display object. I.e. movieclip, sprite, textfield, etc.
- Sexy easing
- Customizable width
- Choose whether to use up and down “arrows” or not
- Customizable alpha control for foreground and background elements
- Customizable tints (colors) for foreground and background elements
- Customizable corner radius
- Customizable mask height
- Scrolls any display object. I.e. movieclip, sprite, textfield, etc.
- Sexy easing (Using TweenLite – you’ll need to download the tween classes if you don’t already have them)
- Fixed 1px jog error for textboxes not rounded to a whole number
- Optional gradient overlay as shown below
- yourDisplayObject – simply the name of the display object you want to attach the scroll bar to
- width – the number in pixels you would like the scroll bar to be
- maskHeight – the height you want to be visible to the user. It determines the width based on the width of your display object
- arrows – this is a Boolean value as to whether you would like the up and down “arrows”
- stage – the subsequent classes need access to the stage so this is required
- alpha1:0.5 – Specifies the alpha of the foreground elements
- alpha2:0.5 – Specifies the alpha of the scroll bar background
- fTint:0×000000 – The tint of the foreground elements
- bTint:0×000000 – The tint of the scroll bar background
- corner:10 – the radius of the corners
- gradient:true – Specifies whether you want the gradient overlay or not
April 26th, 2009
HexLuv AS3 Scroll Bar Class
I just updated version 2.1. There really isn’t any new eye candy or anything. I’ve just fixed a stability issue with the mask not being added to the display list and thus causing whatever you’re applying the scroll bar to not to be visible. Have at it!
Fixes In Release 2.1
Full Feature List
Demo – Customize Your Own Scroll Bar
How to Use
Syntax:
import HexluvScrollbar;
var _scrollBar = new HexluvScrollbar(yourDisplayObject, width, maskHeight, arrows:Boolean, stage, {customization options});
addChild(_scrollBar);
You must include the first five properties, but the customization variables are optional. The required properties are:
The optional properties and their usage are as follows:
Please let me know of any bugs that are found and shout out any ideas that you think would be cool to see in future releases. I hope you like it!
Download HexLuv Scroll Bar
Posted in: 
67 Comments.
Tags: 
Hey. I’ve been looking for something like this for so long. This is awesome. People, you have to check this out. Don’t even think about using Flash’s built in anymore. This kicks ass.
I’m glad you like it.
Awesome. Thanks again!
How can we refresh / recall / or hide the scroll bar when the contents of the textbox change. Flash is saying that _scrollBar is null.
As an example are you loading different text documents into the same textField?
Currently, if you didn’t have enough text to fill out your textField it would never instantiate. But, you make a good suggestion. I’ll definitely want to put then in in the next update.
I’ll try and remember to shoot you an email when I update it.
I figured a way to work around the refresh/reset issue. A year after the post, but it might help someone else.
To get around the problem I declared a generic global variable var _scrollBar;
Then, in the function to load the text I put a check:
if (_scrollBar != null){
removeChild(_scrollBar);
}
then when I instantiate the scrollbar I used:
_scrollBar = new HexluvScrollbar(myText, 7, 425, true, stage, {gradient:true, alpha:1, alpha2:.5,fTint:0×333333, bTint:0×000000, corner:8});
Hope that helps and isn’t too hacky.
Actually, that didn’t work. This did:
if (_scrollBar != null){
_scrollBar = null;
}
Hello there,
it looks really cool and easy to apply it, well done mate. Is there any easy way so I can apply the scrollbar to a MovieClip and not to a TextField.
thanks,
Giorgos
It’s an interesting thought. I don’t think it would be too hard to work that in. In fact, it would probably be simpler than scrolling the text.
I’ll add it to my list of updates.
Thanks for the suggestions so far guys!
Fantastic.
Your class is very good.
In future, can you make works the class with a MovieClip and not only with a text element?
Thank’s for your great work.
bye
I can reset the scroll bar.
Refresh?
How can i do?
Hi Matt
This class is brilliant. Many, many thanx:-)
Joel
You’re very welcome.
hello, i have a problem with the scroller. the “scrollbar” move 1 px to the left on a drag.
is there a way to fix this?
What browser/OS are you using? I can’t seem to replicate the 1 px jog. I think I vaguely remember seeing something like that as I was developing, but I can’t seem to make it happen anymore.
i have the same problem as Jonathan mentions earlier where the bar moves 1px when clicked/dragged the first time. I also have the problem that sometimes if i scroll to the top/bottom and then uses the arrow, the bar goes beyond its limits and then jumps back, or jums to the middle. Im using firefox v.3.0.6 on Windows Server 2008 Enterprise x64. And thanks for creating one of the best custom scrollbars available.
Hmm. I’ll check it out again when I get home. I’m stuck at the mountain on my phone. It must have something to do with the bounds. Make sure the text field coords are on a whole pixel. I.e. Not 42.4.
Interesting class. I have also just finished my version of scrollbar and you can get the class for free from here:
http://www.emstris.com/
This version scrolls anything that can be placed inside the movieclip. and also it’s easing when scrolled + mouse wheel enabled!
Let me know what do you think?
I definitely like the easing. It’s something that will go into the next version of mine. Obviously the benefit of scrolling not just text is nice too. However, I don’t seem to get the mouse wheel enabled action. Any ideas?
Hi Matt, i’ve followed your instructions to the letter and sadly to say i’m not able to make the scrollbar appear at all. I’m using CS3, Actionscript 3 and classpaths are correct. I’ve tried different ways of connecting the scrollbar to dynamic textfields but it doesn’t appear. Do you have a solution? Greetings Derhenno
If you’ve done everything correctly, then I’m guessing you don’t have enough text to scroll. The class checks to see if there is more text than there is room. If a scroll bar isn’t needed, it won’t add it to the display. Make sense?
this is giving me an error:
1084: Syntax error: expecting identifier before comma.
1084: Syntax error: expecting colon before rightbrace.
1084: Syntax error: expecting identifier before rightbrace.
where is the problem?
import CustomScrollBar;
var _scrollBar = new CustomScrollBar(text_txt, 7, false, {gradient:true, , alpha1:1, alpha2:0.4, fTint:0×000000, bTint:0×000000, corner:3});
addChild(_scrollBar);
Hey rmarin,
Just remove the second comma after “gradient:true”.
In other words: gradient:true,
not: gradient:true, ,
Hi, I’m actually a Koolmoves user but it was only in this site that I found the .class file. So my question is in the context of the Koolmoves software. Sorry if I’m posting in the wrong place.
Firstly, I luv the scrollbar so thanks and great job! I’m trying to customize it for my purposes.
Is there a way to scroll MovieClips? Your example uses Dynamic text. But what if you want to scroll a bunch of buttons, each with a LoadMovie function? Is this doable?
It doesn’t scroll a movie clip yet. I haven’t quite decided how I want to implement that yet. The next release is going to have that feature along with easing. I’ll be sure to let you know when I release it. Thanks for checking out the site.
Hey Matt,
I am also getting the 1px jump (to the left) when first clicking down on the scrollbar. Any updates on this?
Hello Everyone,
I solved this with Jay here. The coords and dimensions of your textfield need to be whole integers to avoid the 1 pixel jog. In other words, make sure your text field is 200×500. Not, 200.2 by 500.6. Same goes for the x and y coords. I can compensate for this in a future release, but for now that’s your fix.
Hey Matt. Your scrollbar looks good.
I’ve downloaded it and I get a ZIP file, then decompressed it and I get the AS file and two folders.
I put them in a folder called hexluvscrollbar, to have my classes organized.
But, when i’m importing the class like you say ‘import HexluvScrollbar;’ or in my case because i’ve created a hexluvscrollbar folder ‘import hexluvscrollbar.HexluvScrollbar;’ the Flash CS4 IDE throw me an error in ‘HexluScrollbar.as file line 1′.
I fixed it for me. In your HexluvScrollbar.as file you have the package declaration that is ‘package hexluv.gui.scrollbar{‘ so i’ve created in my classes folder the path that you give in package declaration, like hexluv>gui>scrollbar and then i’ve putted your files inside the scrollbar folder.
I don’t know if this happened to anyone than me. Maybe it’s an advice to you to put your files in the ZIP file within this ‘path’ (hexluv.gui.scrollbar) or maybe I’m a little noob in AS3 and I am, I’m changing now to AS3…, and I don’t know how to configure it.
Other thing it’s, I’ve tried to scroll a dynamic TextField, and I can’t, I only can if I put the text field height property bigger than the maskHeight property in your scrollbar. I don’t want to scroll the textfield itself, I want to scroll the text inside that textfield. Can you give me the solution?
Let me say that I’m creating all objects with AS code, the TextField too.
Congratulations to your work and sorry the English.
Compliments.
I’ve fixed the scroll of textfield. I used the autoSize property, so the textfield is autosized in height. But it isn’t scrolling the text, still scrolling the display object textfield, not the text inside it.
Compliments.
Hey Carlos. Yes I just zipped up the wrong folder. I just need to go upload a new zip file. So you are correct in your path descriptions.
As far as your issue with scrolling a text field. This is the classic, “It’s not a bug, it’s a feature.” If you made the mask height taller than the text field, there would be no need for a scrollbar. So, the code just gracefully exits, which is why you don’t see anything.
As of the latest version I moved away from scrolling a text field itself due to the fact that I couldn’t implement easing. There were also lots of requests for the ability to scroll various display objects and not just text fields. Sorry if that wasn’t what you needed. Feel free to tweak on the class to try and implement text field scrolling.
Very cool! Thank you very much!
2 things…
I think you need to add:
_do = $do;
addChild(_do);
right after:
if ($height > $do.height) {
That way, it still adds the display object to the display list even when the scroll bar is not needed.
Also, any chance of an option to put the scrollbar on the left side of the display object? That would be cool.
Again, thank you!
That’s a good idea Ray. It’s going on the update list. No reason not to improve usability. Thanks for the suggestion.
Hi I am total newbie in flash, can someone here give me a step by step tutorial on how to use this class? what I did was i unzipped both th hexluv and the gs zip file inside my folder together with my flash file, then i created a movieclip and i put an instance “test” on it then I put this on the actions frame
import gs.*;
import HexluvScrollbar.*;
var _scrollBar = new HexluvScrollbar(test, 15, 280, true, stage, {gradient:true, alpha1:1, alpha2:0.5, fTint:0×000000, bTint:0×000000, corner:10});
addChild(_scrollBar);
and now im getting this error “1180: Call to a possibly undefined method Hexluv Scrollbar”
Any help would be very much appreciated.
thanks in advanced
Great scroll bar class!
Tried it out in a Gaia Flash Framework project I am working on. When using horizontal and/or vertical centering for the project within Gaia the mask for the scrolling content floats relative to the size of the browser window. I inserted the following new line of code (line 156) to the maskProcess function to fix the issue:
addChild(_mask);
You may want to consider adding this line to the class.
Thanks again for a nice class.
Thanks for the input Tony. I haven’t worked with the Gaia Framework before, but I’ll have to give it a go. Glad you like the class.
Additionally, thanks to everyone for the suggestions. They’re going to get implemented and it will help to make a better product. I appreciate it.
Hi Tony, I’m trying the same thing with Gaia but not getting anywhere, can you elaborate a little more on how you achieved success?.
I think I’m trying to match the x & y (depending on alignments) of the mask created by the scrollbar class with a textfield on a loaded page.
My site is centring “pages” to the centre depending on the full stage width & height, but I can’t see my text anywhere.. no matter where I look, but don’t “seem” to be getting any errors.
If I don’t try to position manually, I see the mask’s position (up in the top corner, relative to where it’s positioned if the page was positioned at 0,0), so it’s there….
being a actionscript noob, I can’t work out if I’m just positioning badly or whether I’m not even accessing it
any help would be appreciated.
——–
Matt, if you have any advice on positioning or even accessing the mask, it would also be appreciated.
Thanks for making this uber nice scrollbar!
Just like Tony i am also using the Gaia Framework and i had the same problem. adding
addChild(_mask);
beaneath line 156
mask.cacheAsBitmap = true;
really helped. in case it won’t harm standalone AS3 projects you should really add that line!
Thanks both!
hi!
very handsome and useful class here!
i can’t seem to get it to work properly though!
i am using cs4.
my AS:
import hexluv.*;
import hexluv.gui.scrollbar.*;
import hexluv.gui.scrollbar.options.*;
import hexluv.gui.scrollbar.HexluvScrollbar;
var _scrollBar = new HexluvScrollbar(showsTxt_mc, 22, 600, true, stage, {gradient:true, alpha1:1, alpha2:0.5, fTint:0×990000, bTint:0xccccff, corner:22});
this.addChild(_scrollBar);
this throws no errors, and the scrollbar appears, but my content movieclip is gone/invisible!
any clue why this might happen?
Also, beyond this, wondering if there are a caveats etc. for using this in flex?
Thanks again for your contribution!
Not fully sure how or if this would be any different in flex. I haven’t been brave enough to make the switch. Try explicitly adding the content movieclip to the display list and let me know what happens. That should get us started.
So cool! Thank you so much!
Ok, I have gotten the classes imported. I had to add com. to some of the import statements , but other than that I seem to have it working correctly. However, the draggable scrollbar takes up the whole column. Is there a way to make it a set size? Say, 45 px?
By the way, I am a novice AS3 user, if it wasn’t glaringly obvious :)
-Corey
Update:
Yeah, I am not getting this to work.
//scrollbar
import com.hexluv.gui.scrollbar.HexluvScrollbar;
var _scrollBar = new HexluvScrollbar(myText, 7, 425, true, stage, {gradient:true, alpha:1, alpha2:.5,fTint:0×333333, bTint:0×000000, corner:8 });
addChild(_scrollBar);
[\code]
mytext is a TextField that is being populated with external HTML and is 425 high.
As it is the scrollbar takes up the entire scroll area and doesn’t move the text all the way. I would say only about 3 lines worth, with another 10 lines below the TextField.
-Stumped and Confused, but really liking the look of the bar
Hey Corey,
My best guess at this point is to add a listener to make sure the text has fully loaded before calling the scrollbar. The class is going to check for the true height of the textfield/movieclip/etc and if your text hasn’t fully loaded then it won’t know how much much taller than 425 pixels the textfield is. Does that make sense? A quick way to check if this is the case would be to trace the height of your textfield just before you make the call to the class. If it’s right around 425px then you’ve found your problem.
Matt
I still have no idea how to do that. Do you have a .fla file that is using these with a textfield? I would love to be able to see how someone else did it.
I am a retard. I meant, I am loading and external html file into a textfield. If there was an example doing that I would be very grateful.
I may be able to put together a little code for you in a bit. I’m in the middle of a big week of trash talking between my Oregon Ducks and the Utah Utes this week. It’s a big battle between my coworkers and I.
This week just isn’t going to be very productive.
Thanks, I would totally appreciate that. Sorry if I am a complete nub.
Ok, this is what I have so far and it is not working. Well the scrollbar shows up but it doesn’t work.
//Rect behind the taxtfield to add a shaded area behind var rect:Shape = new Shape(); rect.graphics.beginFill(0x333333, .4); rect.graphics.drawRect(510, 65, 365, 425); addChild(rect); //text field var myText:TextField = new TextField(); myText.width = 365; myText.height = 425; myText.x = 510 myText.y = 65; //myText.border = true; //myText.borderColor = 0x333333; myText.background = false; myText.multiline = true; myText.wordWrap = true; //myText.htmlText = ""; //CSS var cssLoader:URLLoader = new URLLoader(); var cssReq:URLRequest = new URLRequest("style.css"); var sheet:StyleSheet = new StyleSheet(); cssLoader.addEventListener(Event.COMPLETE, onCSSLoad); cssLoader.load(cssReq); function onCSSLoad(event:Event):void { sheet.parseCSS(cssLoader.data); myText.styleSheet = this.sheet; } //loading external HTML var contentLoader:URLLoader = new URLLoader(); contentLoader.load(new URLRequest("story.html")); contentLoader.addEventListener(Event.COMPLETE, onComplete); function onComplete(event:Event):void { var txt:String = event.target.data; //trace(myText.height); myText.htmlText = txt; //myText.autoSize = TextFieldAutoSize.Left; addChild(myText); var _scrollBar = new HexluvScrollbar(myText, 7, 425, true, stage, {gradient:true, alpha:1, alpha2:.5,fTint:0x333333, bTint:0x000000, corner:8 }); addChild(_scrollBar); }The textfield I have on the screen is 425 high, and I can’t find out how to make it size according to the size of the input html file. I am not sure if this is what you were talking about. Probably not, as it is not working :)
Hey Corey,
Try changing your scrollbar height (currently 425px) to something shorter. The class is determining the height of the textfield automatically anyways. Essentially you are making your scrollbar the same height as your textfield, which would cause it not to scroll anything (It wouldn’t need to).
Try: var _scrollbar = new HexluvScrollbar(myText, 7, 300, true, stage, {gradient:true, alpha:1, alpha2:.5,fTint:0×333333, bTint:0×000000, corner:8});
And let me know what happens. The rest of you code looks fine (at first glance anyways).
Ok, I finally got it. Turns out I needed to find out how to set the height on my textfield dynamically. Here is what did the trick:
var myText:TextField = new TextField();
myText.width = 365;
myText.x = 510
myText.y = 65;
myText.autoSize = TextFieldAutoSize.LEFT;
myText.background = false;
myText.multiline = true;
myText.wordWrap = true;
myText.htmlText = “”;
Setting the autosize while creating the textfield worked. I think I was trying to set it after I had added the HTML content. Anyway, it works great now and looks fantastic.
Also, I changed line 175 in HexluvScrollbar.as:
_scrubberHeight = 40;//(_h – 44) * (_mask.height/_maskee.height);
So that I had a static size handle. I am hoping that it doesn’t pooch the whole thing, but so far it works great.
Sorry for all the hassle. And thanks for the great scrollbar.
Also, I changed
Cool. Glad you got it all worked out. Hopefully it helps someone else out. I don’t think setting a static scrubber height should affect anything. Have fun with the rest of your project.
Hi Matt!
Really like your work! This scrollbar would be fully completet with the mouse wheel enabled. When do you think that will be fixed?
Hey Matt!
Great work! do you have a version with mouse wheel enabled?
I’m definitely putting functionality for the mouse wheel in the next release. It’s really become a must have.
hi; appreciated for your work and time. I have one suggestion: If you keep all the properties of HexluvScrollbar as static, it makes you use only one instance of the scroll bar. I suggest people who need more than one instance of the scrollbar to remove all the keyword “static” in the HexluvScrollbar class, otherwise, only one instance will be scrollable.
Great scrollbar, my compliments. I’ve managed to import the scrollbar into my main.swf and scroll content loaded into main.swf. But if i remove one instance of the scrollbar to create a new one (which in turn scrolls another textfield located in an external swf) it removes the content it scrolled. I’ve tried every way of resetting the mask before removing the scrollbarinstance, but i do not get it to work. What am i missing here? How can i remove an instance of this scrollbar but keep the content it scrolls to be visible?!?!?! Anyone?
grtz Derhenno
Nice job! Elegant and tidy!
I had Tony’s problem as well, it’s not limited to Gaia.
Because the mask is never added to the stage, it uses global coordinates rather than the local coords of the rest of the scrollbar. So if the parent display object of the scrollbar is not at 0,0, the position of the mask will be off relative to the rest of the scrollbar elements.
Easy fix, as Tony mentioned.
Same to me, had to addChild the mask, and comment the cachAsBitmap, But it works great now.
custmized also the tween duration from 1 to 2, and .5 to 1.5 so that it is smoother to use.
great custom class, reusable, fully customizable. great job you did.
In Paris we like it.
Hmm, i now have 2 hexluvscrollbars onstage, but only one of them seems to be working(read:scrolling). i don’t get any compiler or runtime errors at all. Any idea why this happens?
Never mind! removing the static keywords solved the problem!
@ozgur uksal thanks for the fix!
Hello,
your work is awesome, even if i can’t get it work tho’.
your scrollbar is in the package
“package com.hexluv.gui.scrollbar”
seems the imports aren’t right at this point:
“import hexluv.gui.scrollbar.options.*;
import hexluv.gui.scrollbar.filters.DropShadowDown;”
anyway…i added “com.” to the imports and when i try to apply:
var _scrollBar = new HexluvScrollbar(copyText_txt, 15, 200, true, stage, {gradient:true, alpha1:1, alpha2:0.5, fTint:0×000000, bTint:0×000000, corner:10});
this.addChild(_scrollBar);
on an dynamic textField i got the
TypeError: Error #1009: Cannot access a property or method of a null object reference.
any ideas? maybe i have to wait the text to load? uhmm…
Hey Gian,
I actually just uploaded a newer version that addresses the class path issue. But, you had the right idea by just adding the “com” on your import.
As far as your #1009 error goes….check to make sure that text field that you’re putting the scroll bar on has been instantiated. 99% of the time that error is thrown it’s because you just forgot to instantiate. To test against it – run a trace “trace(yourtextfield);” right before you call the scroll bar. If it returns null then you’ve found your problem. Just go back and make sure you have a:
var mytextfield:TextField = new TextField();
somewhere prior to calling the scroll bar. See if that gets you somewhere.
hi Matt,
on the scrollbar, i cant seem to create 2x scrollbars on the stage.
so if i have 2 instances of the scrollbar, it does not work.
have you tried this?
also the button to drag over/out of the scrollbar, if you click+hold mouse down on the drag bar, and release outside, the mc still drags as you move the bar around the stage
thanks
C
Hey Clark,
I need to change a few things to make it possible to have two scrollbars on the stage at the same time. I didn’t build it in because I never really thought I would have a need for it, but plenty of people have asked so I guess I’m going to have to build it in now.
To your second question. If I’m understanding you correctly this is actually the normal behavior or a scrollbar in just about everything. Next time you’re in Flash drag on the scrollbar in the IDE and even when you’re outside the bounds of the scroll section the bar will still scroll up and down. This ensures that a user doesn’t have to keep their mouse within a 30px (or so) width as they go up and down.
hi Matt.
thanks, for the quick reply,
the second question was refering to v2.0 of your scrollbar which i see has been updated to fix the “release outside still dragging bug”
hope to see an update soon
regards
C