Reusable AS 3.0 ScrollBar Class
Hi everyone and welcome to the newly launched Wisebisoft WebLog.
If you have been visiting the old blog then you know that I had a reusable ActionScript 3.0 scrollbar class there which was a kinda out of date. Although I created a new version, I decided not to upload it there but wait until this new WebLog is launched.
I didn’t bother adding fancy graphics to it but of course it can be done. The scrollbar has additional features too that can be disabled or enabled, one such feature is the “blurring feature” which will blur the content on scroll. You can play around with these features yourself and even add new ones if you like.
You can download the source files from here: Custom ScrollBar
It’s as efficient as it can get and certain features can be changed at runtime too ( with the help of the defined setter functions ).
Enjoy and don’t forget to report the bugs you find.
EDIT ( March 09.2009 ): The horizontal scrolling version of the class is available for download too: Horizontal Scroll Class and great thanks to aSnO© for making these changes.
this.buttonModeEnbaled = buttonModeEnbaled;
should be enabled? not enbaled?
scotty
3 Nov 08 at 8:25 pm
Yes, you are right. I accidentally mistyped the name but luckily I continued using it trough the whole class so it should be working just fine.
I’ll change it and upload the corrected version so that no one will stone me for bad typo.
Thanks for pointing it out. :)
Biro Barna
3 Nov 08 at 8:33 pm
Hi there!
I have some problems using your scrollbar but I honestly don’t know what is actually happening. I created a movieclip and inside it I have a content_mc a content_mask and then the scroll_button and the scroll_track. It is just as your example file. The only difference is that my stage is bigger than your example file’s stage and the whole movieclip is positioned in the bottom right hand corner. When I test my movie it simply doesn’t show anything. I did a quick test in your demo file by changing the stage size and positioning the movieclips to the size and position as mine are and it showed but not in the same exact position. What’s up with that? Any idea what this might be?
Thanks anyway for such a cool class. It would be excellent if I got this to work nice!
Tc
9 Nov 08 at 12:59 pm
never mind! it works perfectly! eheh, sorry about that! THANKS MAN, awesome job!
Tc
9 Nov 08 at 1:08 pm
Very cool.
How would I go about changing the code so that it works horizontally for a very wide panoramic movie clip?
Is it simply a matter of changing some y’s to x’s?
Thanks!
RR
7 Jan 09 at 12:45 am
Well, if you are totally new to AS 3.0 then it would be a bit hard for you to edit / extend that class. If you are not really new to this whole deal then I believe that the new feature can be added but you’ll need to read up on some math first so it will scroll right with the new stuff.
I’m a bit busy at the moment, but I’ll try to get a Class up and running with both X and Y scrolling as soon as I have some free time.
Thanks for your interest. ;)
Biro Barna
11 Jan 09 at 5:18 pm
I am trying to create multiple text fields in the same scene and access them at different keyframes via menu buttons. How would I customize the code to do so. By the way, this is a great tool and is helping me out alot.
Thanks!!!!
ATL
22 Jan 09 at 3:04 am
Hi there,
Well, you could do it more than one way but here are 2 possible roads you can go on:
1) Since the Class has an update(); method you could use a single instance of the Class and instead of having manually typed text ( like in my example ) you can load data from an XML file and once that data is loaded you should call the update(); method to update the scrollbar ( since obviously, with the new content loaded and displayed, the content area might get bigger or smaller… so your scrollbar must react correctly to the new data ). This would be the best solution.
2) You could simply creat a new keyframe and duplicate the scrollbar you already created and simply replace the content ( be careful to duplicate all the needed MovieClips because if you simply copy-paste without actually duplicating them, then the changes you make in the copy will affect the original scrollbar too… something that you don’t want to happen ).
Either way, you shouldn’t really touch the code because it was created to handle both situations correctly. Since I have more experience in AS 3.0 I’d go with the first solution but it would be safer if you go with the second one ( and maybe give the first one a try once you get better and understand what’s actually going on there ). Simply duplicate your scrollbar and all it’s components and change the content into whatever you want afterward.
PS: I decided to upload a working example on the second solution so that you’ll surely get the idea. I threw it together really fast but hopefully, it will be enough to get you started:
Wroking Example on the Second Solution
Good luck and have fun. ;)
Biro Barna
22 Jan 09 at 4:01 am
Thanks for the code Biro. If anybody needs the horizontal version. I have modified the code and It’s running perfect !!
Just email me and I’ll send you the code !!
asnete@gmail.com
aSnO©
28 Feb 09 at 12:31 am
Hi aSnO©, I’m glad to hear that you found my class useful. Since you modified the class ( I still feel back because I never had the time/will to do it myself ) you could try dropping an E-mail with the files and I’ll upload them and post them in this topic ( so that others can download them easily instead of having to wait until they can get the modified version from somewhere/someone ).
Good luck and I hope to see you around in the future too.
Biro Barna
28 Feb 09 at 12:36 am
I just sent you the files for you to post them. Thank you very much for your support.
Take a look how I used your class in my wife’s site. http://legal.emage-nation.com/
Sure to see me in the future, I´ll be around
Greetings
aSnO©
9 Mar 09 at 2:23 am
Hy aSnO© and thanks for sending me the modified class. So, for the rest of you, the Horizontal Scrolling version can be downloaded from here: Horizontal Scroll Class great thanks to aSnO© for making the changes to the class so it now supports horizontal scrolling too.
Biro Barna
9 Mar 09 at 9:10 am
Can this component be used in Flex?
Kumar
11 Mar 09 at 9:38 am
If you make additional changes to the class then it might be possible to use it in Flex too. When I wrote it, I didn’t have Flex in mind but Flash so it’s not likely for it to work with Flex components ( we know that Flex works differently in many situations than Flash ).
You can try, but I don’t think it will work the way it is now. If you want a custom Flex scroll bar then I’d recommend building one from the ground up.
Biro Barna
11 Mar 09 at 9:53 am