Lightweight Scrollbar Component
January 13th, 2006Free TextScroller. I was looking for free, lightweight scrollbar to use with Flash Text Formatter. There are quite a few out there but good ones are either part of commercial set or too heavy(MM UIScrollBar), so I made my own. It is less then 4Kb compiled AS2 component, compatible with Flash Player 6, 7 and 8(8.5).
Getting basic scrolling to work was quite easy, but polishing all of the details (fp6 compatibility, livePreview etc) took much more time. It scrolls textfields horizontally and vertically. Check out the example:
And here is Actionscript Reference List:
- autoHide:Boolean
- fixThumbAtEnd:Boolean
- targetTextField:Object
- orientation:Boolean (true for horizontal)
- setSize( w:Number, h:Number )
Properties:
Methods:
Download TextScroller Component. Unzip archive and install .mxp using Macromedia Extension Manager. The component will be available in "Choma" directory of Components Panel. Flash MX2004 or Flash 8 Required.
January 13th, 2006 at 5:53 pm
Nice!
There’s no need to load the whole v2 framework when you just want a simple fully functional scrollbar.
Thanx for sharing
Cheers!
January 16th, 2006 at 7:19 am
Cool! Looks real nice! And souch a thing is allways handy! Good work!
January 16th, 2006 at 5:47 pm
Thank you so much for sharing these super clean components!
January 17th, 2006 at 1:33 pm
Thx for sharing
January 20th, 2006 at 1:57 pm
Somewhow I can’t manage to resize the component properly at runtime. Actually it just does not resize at all when calling the setSize() method.
I’m using Flash 8.
Cheers!
January 20th, 2006 at 3:53 pm
Hello, this is a nice scrollbar, do you have this scrollbar in black? i know you mentioned how to customize it, but I’m kind of new to flash. feel free to email me if you can. thanks!
January 28th, 2006 at 6:02 pm
Hello, I’ve been trying to customize this scrollbar but no luck. If anyone finds out how to customize this scrollbar please email me at whoismarkus@gmail.com thanks!
January 28th, 2006 at 7:41 pm
Customize -
1) create a movie clip. MyMovieClip_mc.
2) inside movie clip make a bunch more movie clips with instance names and defined above. ( minus, plus , etc)
3) define linkage idea of MyMovieClip_mc in the library. example = “myTextScrollerSkin”
4) define skin property in the textScroller params interface as the linkageID you put in the library. example “myTextScroller”.
you have now skinned it.
good luck.
January 31st, 2006 at 8:30 am
http://img52.imageshack.us/img52/9828/customize7pd.png
Having this problem while trying to customize it. Anyone, please help.
February 6th, 2006 at 11:29 am
Hey, nice scroll bar. I’m having problems with one thing though.
If I scroll down to the bottom of a dynamic text, and then the textfield is updated (through xml for instance), the expected behaviour would be that the scroll bar resets to the beginning of the text. But it doesn’t, it’s left in the last (scrolled down) position.
How can I fix this? I’ve tried using setSize method but nothing happens. Please help out!
February 6th, 2006 at 1:13 pm
Hm, not sure if there is a public method to reset thumb position, but you can always set empty string as content for the textfield before. That should work.
February 7th, 2006 at 1:28 pm
Excellent component, Igor. Skins nicely!
Thank you for making this available.
February 7th, 2006 at 4:50 pm
Any chance of releasing the source? I would like to convert it over to strictly a class that is all user-drawn and instantiated like a class, versus using resources in the library…
February 8th, 2006 at 4:52 pm
Hi,
Nice component. Have you tested it with embedded fonts?
When using the left/right arrows for horizontal scrolling each increment is say .05px. so klicking 20 times will move the text same distance as on click with “device fonts”.
best regards
david eriksson
February 8th, 2006 at 5:03 pm
Also, a big improvement would be changing the mouseDown event to the thumb itself.
This makes it possible to get _xmouse movements outside the “flash-stage” and so, enable thumb-movements outside/above the flash when used in a browser.
February 9th, 2006 at 10:06 am
Mike J, I am not sure what to do with source yet. Did you check ASWing framework?
David, you are right. There should be public propery to change horizontal movement. Can you please create an example of getting _xmouse in browser when mouse is not over flash?
February 11th, 2006 at 7:28 pm
Hello, im having some troubles with this. I create a text box, right click it and set it to scrollable and add some text. I then add the textscroll component to snap on the right edge. The bars buttons and scroll marker are viewable in the canvas. However when I export the file, all I see is a white bar.
February 12th, 2006 at 9:06 am
Hi,
For some reason I’m getting a small red block where the thumb.centered grey lines skin should be. Has anyone else experienced this? It’s the only problem I’m finding with an otherwise fantastic component.
February 13th, 2006 at 4:13 am
Great scroller!!!
Works brilliantly!! Thanks!!!
February 16th, 2006 at 6:42 am
First, I realy like having a lightweight scroller for my projects. Thanx!!!!
But alas, skinning does not work for me as intended:
- No matter what I do, most of the parts do not end up on the right place at the screen (only the minus arrow gets at the right place). The location and size of minus, plus, track and thumb has influence on this, but don’t know what exactly.
- the thumb does not scroll all the way down and when you move it with the mouse it jumps about 12 px to the left and stays there.
This does not affect the way the scrollbar works, it still works fine.
February 26th, 2006 at 10:54 am
Hi,
I’m still experiencing problems with a small red block where the thumb.centred skin should be.
Igor, or components experts, please can anyone advise what might be causing this or suggest an alternative solution?
March 4th, 2006 at 10:50 am
i have downloaded flash media player,
iam having problem in that,i.e scrollbar,savedialogboxbuttons are commming left & right side of the flash media player
But those shoul display Top& Bottom .
How can I Solve this Problem . Please send the Solution.
March 5th, 2006 at 11:50 pm
I LOVE YOU! haha - you just saved me so much time. So simple to implement and I didn’t have to do anything, just drag & drop and you completed my movie. Thanks you SOO much!
March 10th, 2006 at 1:32 pm
If you use Flash 8 to compile your movie, the small red block on the scrollbar will not show.
March 10th, 2006 at 8:34 pm
In regards to Cesar coment,
on February 11th, 2006 at 7:28 pm
Hello, im having some troubles with this. I create a text box, right click it and set it to scrollable and add some text. I then add the textscroll component to snap on the right edge. The bars buttons and scroll marker are viewable in the canvas. However when I export the file, all I see is a white bar.
Create a new Flash project and make new the text scrollbar box with your texts and export as a single swf file. Next, script it as an external movie into your Flash project.
BTW, nice light weight scrollbar…;7)
March 14th, 2006 at 2:47 pm
I feel like a total newbie here so I’m hoping you can help push me in the right direction. I think I’m close but I just can’t get over the hump. I created a dynamic text box with multiline selected. The target text field is labeled “Object”. You had indicated that I need to change the following:
# autoHide:Boolean
# fixThumbAtEnd:Boolean
# targetTextField:Object
# orientation:Boolean (true for horizontal)
However it looks like the parameters for “autoHide” & “fixThumbAtEnd” have drop down menus with only “true” or “false” as the options. How do I tell it “Boolean”? Is there something else I’m missing?
Go here and http://hphhomechildcare.com/test/site and select the “Who We Are” section to see what I’m doing wrong
Thanks!
Jeffrey
March 14th, 2006 at 2:48 pm
Sorry to submit this twice but I’m not sure if it went through the first time…
I feel like a total newbie here so I’m hoping you can help push me in the right direction. I think I’m close but I just can’t get over the hump. I created a dynamic text box with multiline selected. The target text field is labeled “Object”. You had indicated that I need to change the following:
# autoHide:Boolean
# fixThumbAtEnd:Boolean
# targetTextField:Object
# orientation:Boolean (true for horizontal)
However it looks like the parameters for “autoHide” & “fixThumbAtEnd” have drop down menus with only “true” or “false” as the options. How do I tell it “Boolean”? Is there something else I’m missing?
Go here and http://hphhomechildcare.com/test/site and select the “Who We Are” section to see what I’m doing wrong
Thanks!
Jeffrey
March 16th, 2006 at 1:07 pm
I,
this component is incredible. Thanks a lot ! So, i have a problem. It seems that thumb zone appears in red and not in white. Plus, i’m a newbie and i don’t succeed to customize scrollbar. If anyone could explain me what i have to do. I’m not english or american and i don’t speak english very well so it’s difficult for me to understand the explanation of Cole… Please, just a little help… Thanks in advance
March 16th, 2006 at 1:36 pm
I have understood !!! It’s really simple in fact… Thank’s a lot and excuse me for the previous post
:) 
March 21st, 2006 at 8:25 am
Hi.
Fantastic component. Thanks for the link.
I have also come across the problem of a red block where thumb.centred should be. Does anyone have a solution to this problem that DOES NOT involve an upgrade to Flash 8??
Thanks in advance
March 21st, 2006 at 8:47 am
my bad… fixed it with a new skin…. is the problem a bug??
Thanks for the GREAT component.
::)
March 29th, 2006 at 6:04 pm
Bug with the scroller:
If you scroll with the down arrow it will stop at a different location at the bottom of the text box vs scrolling down with the slider.
April 7th, 2006 at 6:50 pm
Hi nice addon
spent ages trying to sort a scrollbar im going to work on the skin in a bit to fix the red bar, but i have another problem! when i view my movie there is a gap between the ‘plus’ arrow and ‘track’ 
(quite a big 1) and i cant figure whats wrong with it
April 7th, 2006 at 7:19 pm
sry 4 double post :\
i have modded my bar and am still working on it, but i still have that blooy gap! the bar is ~300px when it should be 360 (to match text field) its 360 in the design but when i test/publish its messed up
(im from UK, not finland!)
April 7th, 2006 at 7:23 pm
ahh fixed! i was useing setSize and that was messing it up lol! good addon, bit of a pain sometimes though!
April 14th, 2006 at 2:43 pm
Thanks for this nice scrollbar.
Damn ony 4kb !!!
Awesome work
April 21st, 2006 at 1:38 am
In order to skin this component correctly, where do you place the thumb.centered MovieClip? Does it go inside the thumb MovieClip?
If i do put it inside the thumb MovieClip it streches and if i put it outside on it’s own… it doesn’t scroll with the bar?
April 23rd, 2006 at 8:04 pm
could anyone post a link with a fla with an exemple of personnalisation ?
PLz , i am a beginner in flash i dont understand very much english
i have my scollbar in red and its not very beautiful
Thanks guys
April 26th, 2006 at 1:05 am
Dude I freaking love this scroll bar. Silly boy.. I would have paid top dollar for it
muahahahhahahahha
p.s. wheres the donate button!
April 30th, 2006 at 12:51 pm
good response bishop
good mind
May 1st, 2006 at 12:40 pm
Can someone help me out with this?
I think I must have missed something.
When I drag that little component onto the scene, how to I “assign” it text to scroll? Is it a movie clip or a text box? I just don’t know what to do with it.
All I need is a simple scroll box because the flash scrollbar component won’t scroll a long movie clip. It just stops after some text and I don’t know why or how to fix it…so I’d rather use this one.
Thanks
May 7th, 2006 at 12:03 am
In order to skin the “centered” part of your skin working correctly place it inside the “thumb” movie…
May 10th, 2006 at 12:44 am
I have successfully used the file and it worked well. Im experiencing the same red bar showing also, but Im interested in using another skin. So Im giving a try to customising the scrollbar and get to you if Im successful or not.
Thanks for sharing this lovely component, makes my life much easier.
May 11th, 2006 at 9:45 am
Hi,
I try to play with your component and it works well…
But my problem is :
I load dynamic datas inside a textfield that is used by your scroller.
If I leave the scrollbar at the bottom when I load another item, the scrollbar stays on the bottom.
Is there a way using actionscript, to set the scrollbar to the top ??
Regards
May 17th, 2006 at 4:35 pm
anybody seen something like this for the combobox component?
May 17th, 2006 at 6:31 pm
I’m trying to implement this scrollbar to a dynamic text field which uses an XML to populate my text. When I drag and drop this scrollbar in the location where it needs to be, it’s not scrolling at all. The scrollbar simply doesn’t scroll, is there a property setting I’m missing for it to recognize the dynamic text field?
Would appreciate any help.
May 24th, 2006 at 6:10 pm
Can anyone provide a detailed explanation of how to skin this TextScroller component. I think it is a great component but I am used to skinning MX2004/8 components and this is quite different.
Thanks in advance for any assistance.
June 1st, 2006 at 2:16 pm
fantastic work - I have been try to get the MM UIscrollbar componant to work properly for hours, this solved my problem in minutes,
thanks
June 6th, 2006 at 2:53 am
2 problems ive had with this:
1. Someone mentioned for this to work properly, you have to put your text into a seperate swf, and call it it from your main file. Is this true?
2. When using a font such as helvetica nue, when exported the text goes really bold. Any idea why it does that? It seems to handle arial perfectly fine though. Does it matter what anti alias option is selected.
Im using flash 8, but want to publish with flash 6 player.
Thanks
June 7th, 2006 at 4:18 pm
awesome scrollbar alternative to the other ones out there. Good work!
June 11th, 2006 at 6:19 pm
This works great until I try and skin it.
Then the sizes of the new graphics get pretty screwed up.
Can someone tell me how to reset the sizes??
Thanks a bunch.
Nice work though. I’ve been searching for something like this for a year.
gary.
g@studio4nine.com
June 11th, 2006 at 6:43 pm
ok, i got it figured out.
the graphics for the skin have to be lined up like they would be displaying it appears.
and i didn’t understand the thumb.centered
that is saying ‘centered’ is inside of ‘thumb’, not that it is called thumb.centered
then the setSize is targeted to ‘centered’ using the ‘.’ string to drill down to it.
that way your centered graphic doesn’t get scaled along with the thumb
thanks again.
gary.
June 12th, 2006 at 11:07 am
Gary,
Can you give specifics for skinning?…just not understanding what needs to be done…
Thanks!
June 14th, 2006 at 9:53 am
I’ve put up a successful skin here:
http://rjames.org/readtest/loadtext.fla
The secret is managing the sizes and spacing within the skin movie clip.
The only annoyance was figuring out that the thumb.centered means that you have to place the centered instance INSIDE the thumb instance.
using it for building a php CMS to edit txt and xml files that get pulled into flash. neat stuff.
http://rjames.org/readtest/read.php
June 14th, 2006 at 2:07 pm
It’s really good stuff.
June 16th, 2006 at 11:02 pm
hey motty,
i’m still having a couple of little spacing issues with this.
still working out the bugs, but it works pretty well the way i have it now.
send me an email and i’ll send you the fla for the skin.
gary
g@studio4nine.com
June 19th, 2006 at 12:19 pm
Euxaristo gia to component. Ligi boithia omos tha mou dosis
den mporo na to litourgiso sosta. BACK to english:
How do I get my dynamic text field masked? My text comes in
a long strip and when I try to use a mask layer on it it dissappears
completely? Any suggestions?
I havent been able to make it work yet either the scroll bar
June 20th, 2006 at 12:24 pm
asfsdafasdfsadfdfs
June 22nd, 2006 at 10:36 am
Brilliant. This is simply the best scrollbar component I have seen. Small file size, easily skinnable, and it even follows standards, i.e., it looks and acts like a scrollbar.
Nicely done.
June 22nd, 2006 at 8:40 pm
I love this component but I am having an issue. This was reported earlier in the comments.
Chris Brainard said,
If you scroll with the down arrow it will stop at a different location at the bottom of the text box vs scrolling down with the slider.
I am having this same issue. Scrolling with the thumb will go all the way to the last text line. Pressing the down arrow cuts off the last line of text.
I am willing to pay for the source on this.
June 26th, 2006 at 9:45 am
Thanks a lot for sharing such a cool component.
From Bangladesh
June 29th, 2006 at 2:01 am
thanks in from component
ali reza mosallanejad _ iran _ jahrom city
July 12th, 2006 at 4:38 pm
Really usefull component Igor !!! thanks.
I was wondering is ther a way to put bold text and links on the text?
i tried putting html tags in the txt but it just rendered the text as is. Is there another way to do it?
July 14th, 2006 at 1:54 am
ok, I’m still not getting how to resize this thing. How do you write the code for it? scroller.thumb.centered.setSize(15,150);? Could someone please just spell it out for me?
This is a great little tool, I’m just having this issue.
July 25th, 2006 at 8:30 pm
I’m with this guy above: an example of some text and it’s results would be greatly appreciated.
Thanks
August 3rd, 2006 at 12:09 pm
Ok First of all I gotta say Igor’s da man!
To show my appreciation I will help those in this forum!!
Scroll Reset: to reset scrolling to the top evrytime just add myText.scroll = 0 to ur buttons or frame when loading the variable.
Skins: to make sure the scroller sits just snugly and works without hiccups make sure ur skins are the same height properties as the original. I used guides to measure the minus, plus, track etc. I just put the original next to the skin im working on and delete the original when im done. DONT leave any gaps between when u set them up!! If u want to change width make sure they r all the same. Hokay!!!
Once again Igors da MAN!!
Malaysia
August 10th, 2006 at 12:57 am
I finally got my new skin to work. It did take some time but if you follow two or three of the tutorials above and pay real close attention it will happen.
To view my cool scrollbars in action go to
http://www.austinsiebert.com
Peace,
Curtis Hendrix
August 10th, 2006 at 12:59 am
Oops, forgot to ad a huge THANKS!!! to igor for the great component. When I first got it installed I simply dragged it onto my dynamic text area and let her rip! She did all the rest herself.
Great work!!!!
August 23rd, 2006 at 11:09 am
it’s great!
September 22nd, 2006 at 6:01 pm
Great scrollbar !!
September 27th, 2006 at 9:45 am
to every1 having problems with sizes in custom skins…:
track 16×70
plus and minus 16×15
thumb 16×15
centered… as you want
September 28th, 2006 at 7:52 am
I think I am lost in customizing the scrollbar… I am a newbie to flash….
despite following what has been mentioned above, my scrollbar is still a mess. my thumb and track gets stretched to the size of the text box and I cant seem to set the setsize action. Can someone show me an already done up file?
My email is jacqueline.swyeo@hotmail.com
Your help is greatly appreciated!!!
September 28th, 2006 at 8:26 am
Cool!!! I managed to solve it!
This is really a very fantastic component. Love it!
September 29th, 2006 at 1:19 pm
First of all great Work!!!!
Q. what as to use if you wanna use click wheel (little wheel on your mouse)
on your mouse for scrolling the text??
Thanx in advance for the help!!!
October 5th, 2006 at 10:06 am
You’re the king! Thanks a lot for this great component.
October 22nd, 2006 at 5:12 pm
Thanks for this!
One little bug I noticed on everyone’s examples (and mine), when you use the “plus” button to scroll to the bottom of the field, you only get to the second to last line. The “thumb” clip and mouse thumb whell work fine. Fixable?
October 23rd, 2006 at 9:03 am
you genius ive been doin flash for years but this is brrrrilll thanks very much its so helpful
October 23rd, 2006 at 2:50 pm
EVERY1
ive done it to make a skin work you just have to keep tring it n different place make sure that the position of each part is correct then try some more!!!!!! this scroll bar is fab fab fab
October 25th, 2006 at 7:24 am
really saved my skin on this site i was working on. thanks a lot. havn’t understood the script yet, but getting there.
October 26th, 2006 at 5:02 pm
Great Component !
Thanks for this
October 31st, 2006 at 11:06 am
Hey guys,
I am using FlashDevelop. Does anybody know how to instanciate this just in as2 code without using the flash IDE? I tried to extract the classes from the swc and rename them, etc… Any help please?
Regards
Gope
November 1st, 2006 at 9:59 am
Gope,
You will need source probably that might be released soon.
Thanks.
November 1st, 2006 at 12:58 pm
Hey Igor,
Thanks, but I can access the Typeinformation via the intrinsic classes I extracted from the swc. I don’t know but I think it should work somehow without the source… anyways thanks for the reply and this great component. All the best to you.
Gope
November 1st, 2006 at 3:04 pm
It’s working! Philippe from FlashDevelop.org made it possible!
http://www.flashdevelop.org/community/viewtopic.php?p=4690#4690
For everyone who would like to use this component just in code.
Thanks!
November 1st, 2006 at 8:33 pm
Works great with one instance. As soon as I add another instance it stalls the player. Did anyone else encounter this?
Great component!
November 2nd, 2006 at 9:21 pm
Please Example Source~~
November 4th, 2006 at 5:17 am
[…] play.ground » Lightweight Scrollbar Component Free TextScroller. I was looking for free, lightweight scrollbar to use with Flash Text Formatter. There are quite a few out there but good ones are either part of commercial set or too heavy(MM UIScrollBar), so I made my own. It is less then 4Kb compiled AS2 component, compatible with Flash Player 6, 7 and 8(8.5). […]
November 9th, 2006 at 7:08 am
Hi
Just in case u couldnt succeed in making the skin in the first go, then here s a little thing that helped me out.
1. Firstly you dont need to create linkage identifiers for all (minus, plus, track,thumb, thumb.centered)
2. Put the clip named ‘centered’ on the center of the clip ‘thumb’
3. Use the sexy component provided here as a guide on a locked layer underneath. No need to resize it. Just Zoom In.
4. align and size all your clips according to the guide
5 Make sure all these new clips reside in one move clip (eg:myScroller)
6 Create an identifier(eg: mySkin)
6. IMPORTANT: Drag the sexy component (not mySkin) and place it ON the stage and not outside it!
7. Assign the identifier name: mySkin to the skin parameter of the sexy component
I had done all the above except the 6th. I had kept the sexy component outside the stage area thinking it might render itself. I dragged it on to the stage and that did it!
The reason for using the word ’sexy’ component is to simply avoid confusion between the skin u made and the original! And one more time: Excellent Component. Great Help!
November 21st, 2006 at 12:29 pm
a
November 22nd, 2006 at 4:10 am
Ok. So it took me forever to figure out what was going wrong with this component. And i still haven’t solved it. I could not get it to work in one FLA but could in another using the exact same properties. So I copied out every frame from one FLA to a brand new one. It worked after creating a brand new FLA.
So if your having problems… try it in a new FLA. I have no clue why this happens…
November 30th, 2006 at 10:06 pm
Thank you for this useful Component Igor.
For those that have customization problems, you can find a working example here: http://cosmos.oninetspeed.pt/diho/custom_scroll.zip
I don’t really know what are the main rules except trying to keep the elements of the skin movieclip as shown at the top of this page (distribution and proportions, exepted the thumb that must be centered over the track).
The component will automatically resize the track according to the volume of text.
December 28th, 2006 at 8:30 pm
In order for the scrollbar to return to the top when you swap out new text in the textbox, use this code.
txtField.vPosition = 0; // Replace “txtField” with your text instance name.
Selection.setFocus(”txtField”); // Replace “txtField” with your text instance name.
Selection.setSelection(0, 0); // Keep this 0, 0, to bring text to the top.
Great job on the component. Been looking a long time for this one. Now I just need to it work with the mousewheel, and give the option to not resize the thumb. Please let me know if you ever make updates on this baby.
December 29th, 2006 at 4:11 am
This is almost really great - except it has a major bug! This has been mentioned above by ‘bwd’ but no one responded. When you click the down (aka plus) button the field does not scroll down to the last line. Dragging the thumb works, but this is useless if the button doesn’t work properly! Many of us could fix this in 10 seconds if we had the source, but it seems Igor is not paying attention to this any more… Oh well.
December 29th, 2006 at 4:15 am
In fact, if you drag the thumb all the way down and then click on the down/plus button the text actually moves UP one line! This is not just in my files, you can see this in the author’s own example at the top of this page. His text content has a blank line at the end which makes the bug not as noticeable but try clicking the down button after dragging the thumb to the bottom to see what I mean. It’s a shame such a fixable bug ruins an otherwise great component…
December 29th, 2006 at 6:58 am
I will release updated version soon. Thanks for your reports!
December 29th, 2006 at 12:03 pm
It does work with the mousewheel.
txtField.mouseWheelEnabled = true;
And make sure the text is selectable. Just like the V2 component.
January 2nd, 2007 at 11:20 pm
Even with above attribute set, mousewheel does not work for me, at least on Mac OS 10.4.8, Safari 2 or Firefox 2 standalone Flash Player 7 or 8.
January 4th, 2007 at 12:29 pm
hi, and tnx for this great and simple component…
only one small request:
i’m just able to skin the component following your instruction… and i used this without any particular problem.
On thing that each time i think is that would be very very usefull to get (as FLA) the standard graphic set of the scrollbar… being able to modify it and insert it into our progect as skin.
with my bad english isn’t easy
but what i mean is that a lot of times i found your skin perfect, but just a little bit too bright, too “light gray”… i will appreciate very much the possibility to take your default skin, make it a little more dark, and use this in my projects…
if you release the MCs of the default bar, it would be perfect!
tnx in advance and sorry for my english!
gabriele
February 7th, 2007 at 9:06 am
for the newbies:
once you have made your scroller skin Movie Clip with all of the above mentioned parts, right click in the library and go to Properties. under Linkage, type your Identifier, we’ll use “scroller-skin” for the sake of argument. Select the textScroller component (which should be placed on your stage), go to the Component Inspector or in the Parameters panel, type in scroller-skin where it says skin. Make sure your Movie Clips (minus, plus, thumb, thumb centered, track..) have these names as their instance names: you’ll want to open up your scroller-skin Movie Clip by double-clicking on it in the Library, click on each of the parts and give them their Instance Name (minus, plus, thumb… etc.) in the Properties panel.
February 13th, 2007 at 4:22 pm
Is it possible to to stop thumb area from resizing (to show how much content is in the box)? The scroller’s great, but I want the thumb area to be a consistent size no matter how much text it is handling.
Any ideas?
February 21st, 2007 at 3:06 pm
ok this is a very nice scroll bar i love how easy it is to skin. but no matter how many times i try to skin it the functionality dies, the skin attaches but it stops working. if i take off the skin the scroll bar works fine. if anyone knows anything on how the fix this problem please let me know.
February 21st, 2007 at 8:13 pm
You are a god - I’ve been searching for ways to do this for a long time now - Been trying to do it myself, but never got it working very nicely. Now I find a perfect solution that can be skinned and ITS FREE!!!
Thanks for the great work - Big up!
February 22nd, 2007 at 11:07 am
Hi Igor,
Just one small problem I found - It seems that if I am using a pre-loader and set the publish setting “export frame for classes” to anything other than 1 the component stops working…
If anyone has a workaround for this please let me know - Unfortunately I HAVE TO have a pre-loader with minimum first frame size as i am targeting a low connection speed user-base.
March 4th, 2007 at 4:25 pm
hello, I have been able to successfully skin this thanks to WallGod. however the scrollbar is no longer functional anymore, just the up and down arrows. any hints?
March 11th, 2007 at 3:23 am
Hey,
I need help. Somebody plz tell me how to use this scrollbar in the Flash IDE!
I tried many things right from converting it to a symbol to using the customization of the scrollBar but I couldn’t implement it!
If nebody has implemented it in their Flash IDE plz urgently send in some help to me. I would be obliged.
Thank you,
Parag.
March 12th, 2007 at 12:50 pm
Great, component, although if you are using it to load xml text dynamically and you are using the same textbox and scroller to load multiple kinds of text, when you scroll halfway and choose another option it reloads the new article in the same position as the older scrolled one.
Would be nice to have access to control the scroller through AS, is there a way to do this?
March 14th, 2007 at 4:49 pm
hmm, does this scroll bar not work in text fields that just have external swf’s loaded into them?
March 14th, 2007 at 5:14 pm
Man,
you made my day yesterday!!! I have a customer who wants his site with custom scrollbars and gee… it was a way back that i tried something in Flash 5 with that. Your component totally saved my day!!!!
Thanx so much! good job!!!
March 23rd, 2007 at 3:27 pm
Best flash component ever. You’re amazing!
March 26th, 2007 at 11:37 pm
Great Component Igor - thanks for sharing.
For all those having troubles with the textfield not reseting it’s position when dynamically updated (such as Ryan Mac above) you can get around this by adding the following when you update the textfield contents :
mytxt.scroll = 0;
This simply resets the textfields position. Also I’m not sure whether it’s because I’m embedding fonts in html or it’s the way I’ve implemented the scroller but I was having issues with the autoHide parameter. The scrollbar would not show (if the text lenght required it) until I gave the textfield focus. So I also added :
Selection.setFocus(”mytxt”);
whenever the text content was updated to ensure the scrollbar was shown if needed.
Cheers
April 5th, 2007 at 5:35 am
is there an API for this? i cant seem to get any of the properties / methods to work. additionally cannot use attachMovie using linkage ID.
April 20th, 2007 at 3:53 pm
Awesome!! Thank you very much!
May 3rd, 2007 at 2:10 pm
well done!!
I was looking for this. thank for sharing.
May 20th, 2007 at 2:15 pm
hey you should include a skin as example. not that it is hard to skin but it saves much time by having something already in place. by the way thx for sharing this is a great resource to have.
anybody here as a skin they can share?
May 24th, 2007 at 4:47 am
Hello,
The scrollbar has been very useful, thank you very much. will be sending the link after the site is complete
May 30th, 2007 at 1:52 pm
I was able to attach the scrollbar using attachMovie(”TextScroller”… as long as I included all the properties in the init obj parameter, especially the skin property. However, it doesn’t find the textField Object. Any one get this problem?
June 5th, 2007 at 3:19 am
Very Nice Component. Thanks!!
June 6th, 2007 at 4:12 pm
lol, great Component !! Thank you !!
easy to customize - the best that kind of component in The Internet !!
cole –> thx for explanation !!
June 11th, 2007 at 8:28 pm
Is there a way to skin this without making the graphics the exact size of the originals?? I want to use separate graphics for the plus and minus symbols… but when I skin it this way the scrollbar completely loses functionality. It appears skinned in the movie but no longer works. I’m a bit of a n00b, please help! Email me if you need more specifics. thanks.
June 17th, 2007 at 2:53 am
Is it possible to use this scroller to scroll MovieClips with masked content?
June 20th, 2007 at 12:50 am
THANKS! This is great! Why did they take it out of 8?
July 4th, 2007 at 5:49 pm
big up IGOR!
really nice component; perfect if all you want is scrolling a textfield
thx a lot!!!
it’s a pitty that that this bug still exists:
dragging the thumb down to the bottom and then clicking on the plus-
button makes the text scroll up one line.
releasing the code would be great; maybe we can eliminate this bug
and even extend the functionality
scrolling movieclips would be a nice addition although…
July 8th, 2007 at 6:55 pm
Any chance of releasing the source? I would like to convert it over to strictly a class that is all user-drawn and instantiated like a class, versus using resources in the library…
July 9th, 2007 at 10:42 am
I have new version (plus new Slider and MCScroller) ready for couple of months now. I was hoping to find time to set up OS project properly, but obviously I can’t. If someone is willing to help me with that please drop me an email.
July 10th, 2007 at 6:05 pm
The reason of showing the scrollbar as white box in my case was Actionscript settings: I’m using preloader in my movie, so all the classes are exported in 2nd frame (Publish Settings / Flash / Actionscript version / Settings / Export frame for classes) and Linkage settings of the Scrollbar component were set to “Export to first frame”. I switched this off and manually included the component to my second frame (where all the movieclips are inserted - for proper work of preloader). After that, everything worked ine.
Thanks for the great component!
August 2nd, 2007 at 12:13 pm
Great Component !
but, Is there way to make it auto scroll for my dynamictext (always stay at the bottom of text, I just making a chat.)
August 3rd, 2007 at 8:00 am
Hereblur, set fixThumbAtEnd component parameter to true.
August 27th, 2007 at 6:58 am
Great component! Thanks
August 27th, 2007 at 7:13 pm
This is the best text scroll-bar component I have found, easy to use and customize, very designer friendly. You wouldn’t happen to have a similar scroll-bar for movie-clips
August 30th, 2007 at 6:04 pm
Hello!
This is a smart component , i usedit with dynamic txt from the string panel (took me two days to understand what was going on with the size of textfields
and the way to resize without resizing the txt, still some textfields that are filled with string panel doesn’t want to resize no idea why.. ) but now working fine. Thank you really nice to customize!
ps: i didn’t use setsize just resising manually the width of each element.
August 30th, 2007 at 6:06 pm
and i’m french..
September 9th, 2007 at 6:13 am
Thank’s for your suggestion, Igor.
But that’s still didn’t work for me.
you can see my little demo here
http://www.sodarefill.com/uploads/scrolldemo.fla
please check it if i do something wrong
P.S. I found that fixThumbAtEnd work for me if I scroll down the thumb by my self for the first time. and After that It’s scroll down automatically.
Thanks for great tools.
September 17th, 2007 at 2:03 am
I too would love the source to be available, there are a few bugs I would fix if I had the source code. Even if you make it available as a download then people can modify it for their own needs.
October 1st, 2007 at 6:58 pm
Cool but doesn’t support html
which knd of make it sucks
October 2nd, 2007 at 12:55 pm
I would like to apologise for the above comment
I jumped to conclusion too quickly … it does support HTML … I make a stupid mistake
So I gues this change it from “Cool component” to “Great component”
You rock man !!!
October 8th, 2007 at 8:38 am
It seems there’s a bug considering mouse wheel scrolling - when I scroll the text too fast, the browser window starts scrolling…but when I scroll really slow, it doesn’t happen…
October 19th, 2007 at 7:14 pm
You just saved me a MASSIVE headache on a project where I needed to implement two different styles of scrollbar. Excellent work. Thanks.
October 23rd, 2007 at 2:00 am
Thank you for your article, I pull collections
November 2nd, 2007 at 11:31 am
A bit buggy component. Has anyone discovered how to resize it? Or add it with AS code to a text Field with needed sizes?
November 6th, 2007 at 12:22 pm
AWESOME! Thank you!!!
November 9th, 2007 at 3:31 am
A bit buggy component. Has anyone discovered how to resize it? Or add it with AS code to a text Field with needed sizes?
November 9th, 2007 at 8:18 pm
[…] play.ground » Lightweight Scrollbar Component (tags: actionscript as2 components ui scroller flash scrollbar) […]
November 21st, 2007 at 2:04 pm
I did found a solution.
For example scr is my Choma Lightweight Scrollbar Component
1. Run scr.setSize(); function without arguments, it will resize automatically to targetTextField (specified in component inspector) Height( or Width if horizontal).
2. Then put you scrollbar on the right place by specifying its scr._x (or scr._y)
PS. Thanks for the component. But without a documentation most people can NOT use it…
November 23rd, 2007 at 2:17 am
See our wide selection of Flash components for audio-video chat, Search, Banner Ad Component, Shopping Cart, Button Creator, Scroll Text Component and several others
January 14th, 2008 at 12:55 pm
Has anyone found a solution to the bug that causes the last line to be truncated/hidden, unless you use the slider?
Thanks.
January 17th, 2008 at 10:53 pm
Thanks for the nice component…
You can further customize it….
Try this out
scroller._skin.plus._y = 20;
scroller._skin.thumb.unloadMovie();
I like it! Just what i needed…
Asen
January 20th, 2008 at 6:05 am
HIDDEN LINE FIX:
Hello everybody!
After facing the same problem with the hidden/truncated/missing bottom line when clicking the scroll up button, i finally reached a solution for it… yes! I have tested it, and it seems to work pretty well, it took me about 3 hours to find out how to do it… so here it is:
1) Supposing your component name is “scroll_mc”
2) You write this on the timeline where the object is initiated:
_root.scroll_mc._skin.plus.onPress = function() {
if ((this._parent._parent.__target.scroll+1)>=this._parent._parent.__target.maxscroll) {
this._parent._parent.__target.scroll += 1;
} else {
this._parent.onPlus();
}
};
To actually understand it, you will need to play around with the component’s internals, of course, i dunno if the author would be happy about it…
For reference, it seems that there is an “error” in the setScroll() and Refresh() function (TextScroller.as)…
What the fix does, is that it calculates if the next scroll is the same that the max and if it’s true it forces the text to scroll that final step (there’s the bug), I added a GREATERTHAN sign in order to keep forcing it to stay there otherwise, the second time you click the button the line would hide…
onPlus() is the internal event for the scroll-up button, I had to add it here, because the onrealese event overwrites it…
That’s it!, pretty simple to apply, a headache to discover.
YOU MUST NOTE: When the component is set to autohide, if the text is just ONE line longer the component will go invisible and that line will be hidden. This is the “normal” (BUGGY) behavior of the scroller, in order to fix this, i think it’s necessary to modify the refresh function, but i’ll do that another day… in the mean time, if you want to use the autohide feature and “fix” the problem, you can automatically and a NEWLINE and a SPACE character such a TAB (mytxt_txt.text += “\n\t”;), that way the hidden line will be an “empty” line… (If you do this, the previuos code isn’t necessary anyways because the last line will always be an empty one)…
February 20th, 2008 at 1:44 pm
[…] play.ground （本组件的信息及其介绍来源于凱爾的布拉格廣場） Play.ground 這個網站也提供了 Lightweight Scrollbar 和 Lightweight Slider 組件,也是很方便的供使用者變更樣式 […]
February 20th, 2008 at 4:36 pm
For those who want to attach this scrollbar dynamically:
_root.attachMovie(”TextScroller”, “TextScroller”, 2, {_targetInstanceName:”textFieldName”, horizontal:false, skin:’custom_skin’, autoHide:true, _x:textFieldName._x+textFieldName._width, _y:textFieldName._y});
(custom skin is required!)
November 9th, 2008 at 7:55 pm
You legend.. I’m not sure why but your scrollbar works way better than the one provided in CS3.. as having issues with the default one while loading external XML text but now it’s fully functional.
You are a legend.
Thank you
(and for the bug with the last line of text not always displaying, a simple extra blank line in the text solves this problem)
July 2nd, 2009 at 2:22 am
This is a video explaining all
http://www.casaazuldetepoztlan.com/scroll
And heres the .fla
http://www.casaazuldetepoztlan.com/scroll/scroll.fla
Hope it helps, i have tried a lot of times. It works if you do it correctly.
July 2nd, 2009 at 3:49 pm
Enrique, great! Nice video.