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
- Fixed issue with the mask not being added to display stack and thus no display object.
Full Feature List
- 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
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:
- 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
The optional properties and their usage are as follows:
- 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
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
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
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.
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.
Actually, that didn’t work. This did:
if (_scrollBar != null){
_scrollBar = null;
}
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.
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!
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
Pingback: HexLuv AS 3.0 Scrollbar — FlashChemist: Flash Libraries
Hey Matt,
Great Scrollbar! I’m having an issue with ‘paths’. Can you give instructions as to where to place the extracted files. I’ve tried every possible variation of folder locations, But I cannot seem to get this working.
No problem. I’ve already got a post for it. :)
http://www.hexluv.com/2008/09/19/how-to-start-building-a-class-library-in-flash/
Hey Matt, maybe it would be easier if I just asked where do i put the action script file and where do I put my .fla and.swf file?
This is my folder directory:
Hexscroll>HexluvScrollbar>com>hexluv>gui
And inside the gui folder are the options and filters folder as well as my .as file.
Morgan,
You have two things you most likely need to do.
Step 1
You can put your .fla and .as file anywhere you would like. I tend to organize my projects like this: client->project name. That’s just my preference. The bottom line is the location of your project files is completely independent of the hexluv scrollbar (Or any other external class)
Step 2
The next thing you’ll want to do is create a new folder somewhere on your hard-drive and point Flash to that folder. Not sure if you’re on a Mac or PC but it would be something like this [Flash]->com->hexluv->gui and so on and so forth. Then if you were to go use another library like TweenLite it would be [Flash]->com->greensock->TweenLite.
The idea is that you start building a library that reference over and over again. You’ll tell Flash once where you store all that stuff and then it’s just a matter of calling it when you need it. Hopefully that makes more sense.
Mark, I followed everything you said and i still get this error:
C:\Users\Sire Morgan\Pictures\hexluv\gui\scrollbar\HexluvScrollbar.as, Line 1 5001: The name of package ‘com.hexluv.gui.scrollbar’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. C:\Users\Sire Morgan\Pictures\hexluv\gui\scrollbar\HexluvScrollbar.as
Your class download is not packaged properly. Everything is referencing com.hexluv.gui.scrollbar but its missing the scrollbar folder. Goes straight from gui to HexluvScrollbar.
For those who need to use multiple instances of this great scrollbar class just change all of the private static vars at the top of the class to regular private vars and it should work fine.
Thanks @James. I really need to get this thing under version control and update a few things. I just built it and then figured it would be useful for others so I threw it up here. People seem to like it so I guess I’ll have to take it more seriously. Thanks for the input.