Easing scrollbar
I got a request for it and decided to put up my scrollbar for anyone who might be interested.
It's not using the V2 framework and is designed to be lightweight but flexible.
Features:
Only 4k uncompressed.
Can scroll one or several movie clips, text fields or buttons.
Responds to mouse wheel, arrow keys and page up/down keys.
Configurable easing.
Fairly easy to alter style by simply editing the component.
Drag area that resizes with the amount of content to scroll.
Can update when changing the size of the content to be scrolled.
So basically just another scrollbar, but if you are looking for something less bloated then the MM V2 components and just want to do some scrolling it might be useful.
Get the download here.
UPDATE:
After doing some testing with several instances on multiple levels I noticed some issues.
I have now updated the download so you can use several instances as well as load them on top of each other and still have the mousescroll and keyboard control working fine.
To update the scrollbar reinstall the component using the extensions manager by double clicking the .mxp file.
Then drag an instance of the component onto the stage in the .fla with an old version. When prompted choose to replace existing items.
You can now delete the newly added instance, and your previous instances will be up to date.
UPDATE 2006-02-12:
An error in ScrollFocus.as made the key and mouse scroll stop working if you removed the first instantiated scrollBar.
The .zip file have been updated with the amended class file.
Cool scrollbar. I’ve got a question for you. Say I want a user to be able to enter a paragraph in an input textfield that’s tied to your scrollbar. And I want the text field to obviously be masked so they can type in 10 lines of text, but only 5 are visible at a time. I want the scrollbar to “listen” for updates to the input textfield so that it keeps the input field scrolled to the bottom row when they’re typing. I also want the input textfield to autosize, so they can write as much as they want, but still retain the 5 line height I’d mentioned previously.
Is it possible for blixtscroll to auto update on keyup to keep the input textfield on the bottom as they type and scroll as per normal when they’re just re-reading what they’ve typed? Is it possible for it to update as they keep adding more text (so it resizes based on how many lines they’ve entered)?
If so, could you provide an example of this? or sample code to help me along?
Anyway, thanks for the crafty component. You rock.
Hi Lyam,
You should simply have to call the update method with the TextField.onChange event like this:
myInputText_txt.onChanged = function(textfield_txt:TextField) {
blixtScroll.update();
};
Great. THanks Leo, I’ll give it a try! Sub-question. When I’m scrolling a textfield, i notice the bottom line of text gets cut-off.
The textfield parameters are:
Multiline
HTML
Anti-alias for readability
2pt line-spacing
Helvetica
The blixtscroll parameters are:
__contents_array [plot]
bottomMargin 50
mask mc_mask
scrollEasing 5
scrollSpeed 9
The mask is exactly the same size as the textfield. The data comes in from XML. and I call an update when it’s done. No matter how much text is in there (provided that it’s enough that requires the scroll), the bottom line seems to cut-off half way through when you drag the dragbar down. The interesting thing is that if you click the down button, it can expose the bottom line in its entirety…so users can do that. But it’s a little disconcerting that they can’t scroll the drag bar to see that line.
Any help that you can provide would be greatly appreciated. I should note that your example files work fine and don’t produce this issue…so i’m thinking it may have something to do with the textfield logic, or settings (2pt line spacing, font, bottom Margin, etc.).
Thanks for your help.
Sound like a familiar issue, but I cannot recall what cause it I’m afraid.
Are you embedding any images using the img tag?
Usually the height of the would be picked up ok when you embed the text field inside an mc regardless of leading values etc, but if you include images with the img tag without specifying “width” and “height” the correct height will not be picked up until the image have loaded.
Hi Leo, Thanks for your response. I’m using a dynamic textfield on blixtscroll (not a movieclip) and I’m not embedding any images in the htmlText that’s loaded by XML into the textfield. As I said, if I use the scroll on movieclips, as you do in your example.fla, everything works fine. But if I use it on a dynamic textfield with xml loaded content, the bottom line gets cut-off and the bottomMargin parameter doesn’t seem to affect it. Is there a place I may email you a sample FLA and XML to show you what I mean? You can email me at the email I provided for this comment and I’ll send it to you.
Thanks again for all your help.
Hi, great stuff.
But how can I move the scrolled MC (and scroll position), for example 200px down, to direct user to for example second pragraph?
Hi - thanks for posting this.
One question: can the scrolling be modified to scroll horizontally rather than vertical? If so, would you be kind enough to direct me as to how to do this?
Many thanks in advance.
Great scrollbar! One question though, im trying to get the scrollbar to update contentsHeight and for testing purposes the height of box8 in you sample file increases by 15 every time i click a button, at the same time i call blixtScroll.update(); to update the scrollbar. Nothing happens. (except box8 increases in height of course)
Could you please explain how i should go about this?
thanks
Never mind, found an example in the readme.txt
Hi,
Thanks for taking the time to put this together. The scroll bar is not working when nested in my movies, At the moment I’m using in an attachedMovie - although it will work correctly at the root of my SWF.
Any pointers as to what I’m doing wrong?
Chris