Pure coding AS3 regSimpleScroll (regular simple scrollbar) class or in simple words let’s say scrollbar class.
8/22/2010 UPDATE
- modifying mask size on runtime is now available.
- getting mask width on run time, before and after addChild (all of the inputs are actully live and editable before and after addChild)
- set vertical and horizontal percentage of the scrollbar on run time
- Everything is completely live and OOp
-
Listened to your needs, Made an easier and cleaner content window, just copy and paste
Lucky you! what? you may say why? right?
Well, I must say, you’re lucky because you are about to seeing the MOST POWERFUL AS3 SCROLLBAR COMPONENT in the world!! Yep, you heard it right.
Forget about any scrollbar you had seen before, this component has been built in 40 days, YES you heard it right, 40 days for just a scrollbar.
Now that it’s finished I can’t just call it a scrollbar but I think it’s LIVE BEAST!
Live because you can set all inputs at runtime .
Live because it cares for your CPU usage.
A beast because it has a full interactive communication with the status of your content.
A beast because you can use your imagination to give it different styles.
And, aha, it’s not only ONE product (powerful scrollbar), but also the content window that used the scrollbar in itself is included in the package too. you don’t even need to open Adobe flash or something as the content window is completely dynamic and easy to be modified…(gets its content from a XML file and its styls are from a CSS file) I have explained how to modify it in the package for beginner users, so feel relax because everything is as easy as 123.
JUST CHECK IT OUT HERE
Alright, about the scrollbar… It was very hard for me to figure out how to showcase all of its features, so I hope I have been made it simple and understandable.
Please take your time and test the features and hit the purchase button quickly as I have spent 40 solid days to blow a sprite into the beast to make it a live.
What you have is the scrollbar inputs and outputs, the only things to make it work
I introduce you with its feature and YOU check out this creature.
Main Features:
- mask width set, dynamically and abstract
- mask height set, dynamically and abstract
- scrollbar space, a space between the scrollbar and content
- scroll animation interval
- mouse wheel speed set
- scroll ease type set, there are a lot of scrolling ease types that you must check them all, Elastic, Bounce, Regular, Expo and more…
- orientation set, you want your scrollbar to be vertical or horizontal or both and automatic, auto
- drawing disable scrollbar option, if you are on auto orientation and you check the disable scrollbar, if for example your content doesn’t need horizontal scrollbar the component draws you a disable horizontal.
- blur effect option
Scrollbar Background Features:
- roll over effect type, you want it to have glow and change its color when you roll over on it? easy, you have it, it’s all in your hands, different roll over effect types
- change roll over effect color
- change roll over effect alpha (strength)
- roll over glow blur set
- roll over glow strength set
- background curve amount set
- background width amount set
- background alpha amount set
- background color set
Scrollbar Slider Features:
- roll over effect type, you want it to have glow and change its color when you roll over on it? easy, you have it, it’s all in your hands, different roll over effect types
- change roll over effect color
- change roll over effect alpha (strength)
- roll over glow blur set
- roll over glow strength set
- slider curve amount set
- slider width amount set
- slider height amount set, you set that you want to have auto height or not, if not, you give the height a number to have your own favorite slider height
- slider alpha amount set
- slider color set
Scrollbar Buttons Features:
- roll over effect type, you want it to have glow and change its color when you roll over on it? easy, you have it, it’s all in your hands, different roll over effect types
- change roll over effect color
- change roll over effect alpha (strength)
- roll over glow blur set
- roll over glow strength set
- buttons layout set, you want to have triangle or circle buttons, it’s all depends on you
- buttons space, a space between buttons and scrollbar body
- buttons size amount set, you set that you want to have buttons or not at all, if not, the buttons do not be created at all and you won’t see any buttons anymore, or you give an size amount to have the buttons again
- buttons alpha amount set
- buttons color set
Simply I can say that it’s not a simple scrollbar but a live beast.
It’s completely abstract and completely customizable.
DOCUMENTATION
Read the regSimpleScroll Documentation here. or download them for your offline review here.
BUY NOW
Currently selling on Activeden
Regards,
Ali

February 18th, 2010 2:54 am
Where can we download or purchase this class?
February 18th, 2010 3:35 am
please register in the newsletter for news. it will be online soon
February 19th, 2010 9:00 pm
Any idea of when it will be available? I want to use it in a project due 1/3. Any possibility of buying the current version so that i can allready incorporate it and replace with the finished component ?
February 20th, 2010 3:38 am
I see you added the scrollbar to the shop, but it still says UNDER CONSTRUCTION – PLEASE CONTACT US BEFORE PURCHASING ANYTHING. Can i order it now ?
February 20th, 2010 7:55 am
Yep, it’s ready, you can order it
Thanks
March 12th, 2010 6:05 am
How can i make the scroller expand to 100% width and height? (i’m aware of the DOCtype issue)
March 12th, 2010 6:31 am
I think i have the 100% issue solved. Is there a way i can load an SWF into my XML content?
March 14th, 2010 8:31 am
Hi Scott,
in the sample files, as you know the content window sample gets information from the XML file and the XML file can load photos not SWF files, but you can use scrollbar class itself to have your own content that should be a DisplayObject and you can scroll anything that you like, in your content you can load SWF and anything else
March 12th, 2010 7:36 am
Ok, all seems to be functioning well. Could you point me in the direction for more info about 100% height and/or width? Maybe how to resize to 100% height but maintain a proportional SWF?
Oh and great job on the component.
March 12th, 2010 9:43 pm
Can the scrollbar function in a fullscreen site? And if so what happen if the user resize the browser? How i can make the scrollbar resize with the window(ex. i set the scrollbar = stageHeight)?
Nice work!
March 14th, 2010 8:53 am
Hey Scott and whsecurity:
You can have a 100% scrollbar like below:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
stage.align = StageAlign.TOP_LEFT;
import com.doitflash.events.ScrollEvent;
import com.doitflash.consts.Orientation;
import com.doitflash.consts.Ease;
import com.doitflash.utils.scroll.EffectConst;
import com.doitflash.utils.scroll.RegSimpleConst;
import com.doitflash.utils.scroll.RegSimpleScroll;
var _regSimpleScroll:RegSimpleScroll = new RegSimpleScroll();
var _myContent:MyContent = new MyContent(); // the content you want to scroll
this.addChild(_regSimpleScroll);
this.stage.addEventListener(Event.RESIZE, onStageResize);
// set inputs
_regSimpleScroll.maskContent = _myContent;
_regSimpleScroll.orientation = Orientation.AUTO; // accepted values: Orientation.AUTO, Orientation.VERTICAL, Orientation.HORIZONTAL
_regSimpleScroll.scrollSpace = 20; // max value is RegSimpleConst.SCROLL_MAX_SPACE
_regSimpleScroll.drawDisabledScroll = true;
_regSimpleScroll.maskWidth = stage.stageWidth - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
_regSimpleScroll.maskHeight = stage.stageHeight - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
function onStageResize(e:Event):void
{
_regSimpleScroll.maskWidth = stage.stageWidth - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
_regSimpleScroll.maskHeight = stage.stageHeight - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
}
As you see I have set a RESIZE listener to listen when ever the stage width and height changes, then I set the scrollbar width and height according to stage.
the important part is only two lines that set the scrollbar width and height:
2
_regSimpleScroll.maskHeight = stage.stageHeight - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
April 20th, 2010 4:28 pm
Goodmorning! One more question: I want to control the position of the content with buttons how i can do that?
Example I want to move the content 20% how i can do that since i try the code from your example that moves the content 13% and nothing happens
April 21st, 2010 1:41 am
by pressing scrollbar buttons you just move the content, but to set the content position exactly, you can set it by calling “scrollManualY” property:
You can use “scrollManualY” property to set content vertical position and “scrollManualX” to set its horizontal position, I hope that helped, I have done this in the sample files that you download in the pack
May 6th, 2010 5:03 pm
I have seen the sample files and i have understand how you do it but I dont want to use the command in an external actionscript file. I want to use the _regSimpleScroll.scrollManualY = 10; to my actually fla file and call it with a mouse click. So far I haven’t any results. I try to manually set the content position but when i try to call an other position works odd
May 6th, 2010 6:39 pm
And something else: can I use a different method than scrollManualY? I mean a method that doesn’t use percent but actually pixels
May 7th, 2010 4:29 pm
scrollbar has only scrollManualY that uses percent, and for sure you can call the setters from your original FLA file, it’s a class.
if you take a look at the RegSimpleScroll documentation, I have wrote an example that all of the codes have been written in the FLA file.
You can also call the setters when ever you like to do, for example from a mouse event that you have set before… it’s a class, you can do anything that you like with it just like the classes that flash itself had created.
May 12th, 2010 3:25 am
Hi Ali,
Great scrollbar – I’m wondering how I can change the look of the arrow buttons – I don’t see a source file to use for reskins. I want to change the graphic itself, not just the color.
Thanks!
Jen
May 13th, 2010 1:23 am
Everything is dynamic and abstract, you can have 2 different look of scrollbar buttons by now, triangle and circle or you can have no buttons…
To have circle buttons you can modify the “btnLayout” setter:
and to remove the buttons you can set their size to 0:
July 6th, 2010 4:57 am
Hello,
I really like your scrollbar utility and have modified it to fit the project I’m currently working on, but I have no idea how to implement it. Is there any documentation or tutorials that show how to place the content window in the timeline? I’m really lost and can’t see what I’m doing wrong. Here is the code nested 3 MCs deep where I’d like the XML content window to display:
import com.doitflash.events.ScrollEvent;
import com.doitflash.consts.Orientation;
import com.doitflash.consts.Ease;
import com.doitflash.utils.scroll.EffectConst;
import com.doitflash.utils.scroll.RegSimpleConst;
import com.doitflash.utils.scroll.RegSimpleScroll;
var _regSimpleScroll:RegSimpleScroll = new RegSimpleScroll();
var _myContent:MyContent = new MyContent();
//this.addChild(_regSimpleScroll);
It throws this descriptive error when the loader finishes loading the index.swf:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at FLA()
So perhaps I’m doing something wrong with the FLA.as?
Any help or insight is appreciated.
Thanks,
Jason
July 6th, 2010 10:02 pm
Hi Jason,
Maybe you didn’t export your content for actionSpript in library.
You content: var _myContent:MyContent = new MyContent(); Needs to be recognizable for flash, so go to library and right click on it and select properties, from there tick export for actionScript in the name of ” MyContent”
Maybe it can be the reason, I hope it helped
July 7th, 2010 12:20 am
Hey Ali,
Thanks for your quick response. The properties were set correctly, I don’t know what it could have been. I did however, get it to work by loading the swf from your included example folder (samples) after I tweaked some settings and then commented out these two lines in FLA.as which for some reason gave the 1009 error after it was loaded:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
I appreciate your help and thanks again!
Jason
July 12th, 2010 6:17 am
Hi, I’ve just purchased your scrollbar. Can you tell me if (and how) I can import the swf with the scrollbar into the stage of my main fla stage?
Can it be done this way:
http://www.iheartactionscript.com/loading-an-external-swf-in-as3/
July 12th, 2010 6:21 am
I’ve got another question: is it possible to use an embedded font? If so, how?
Thanks a lot.
July 12th, 2010 5:11 pm
Everything is clearly explained in the package with examples and instructions in order to how you can use the scrollbar, and you can also take a look at the class Documentation for more examples and more info about every little tiny thing about the scrollbar class and related classes…
If you have any other questions, let me know and contact me from my profile page: http://activeden.net/user/tahadaf?ref=tahadaf and I’ll let you know my freelancing rate.
August 9th, 2010 2:49 am
Ali,
Hi I bought your scroll bar — it is quite well designed. I think I made a mistake or my programming skill are weak. Can this be used for xml content? And if so is there some documentation on that? Sorry for the dumb question, I’m a designer by trade, not a programmer.
Best & thank you,
BezerBezer
August 9th, 2010 2:56 am
Sorry, to clarify, I see that some xml is used, but I cannot see how to get the scroll bar onto my stage. I am used to components and was expecting this to be the same. Sorry to be a pain — just trying to make my deadline!
Thanks for your help Ali,
BezerBezer
August 10th, 2010 4:41 pm
Yes, you can use it as a XML content like the one I have created in sample files.
In sample files the simplest way to have the contentWindow in your own flash project is to load the contentWindow SWF file externally in your own project.
load SWF files like this:
2
3
4
5
6
7
8
9
var _swfLoader:flash.display.Loader = new flash.display.Loader();
_swfLoader.contentLoaderInfo.addEventListener(Event.INIT, onComplete);
_swfLoader.load(new URLRequest(yourSwf.swf));
function onComplete(e:Event):void
{
_main = e.target.content; // save the loaded SWF
}
I hope it helped
August 18th, 2010 6:17 pm
Hi Ali,
I bought your ScrollBar class through FlasDen. Really amazing work!
I know how time-consuming can scrollbar development can be. You did it great.
However, I can’t find out how to remove the buttons from the scrollBar itself?
I’m sure it’s pretty obvious.
Thanks in advance,
Jk_
August 18th, 2010 6:24 pm
set the buttonSize property to “Zero”… Ali will correct me if I’m wrong.
August 18th, 2010 8:50 pm
Yes, that’s right
August 18th, 2010 6:27 pm
Ok thanks, I’m going to test that!
A small other thing : sometimes when I use text-align:justify within my CSS, the text is trunked on the right of the text field.
Even tough, I increase the size of the mask it’s still trunked. Is there an easy way of avoiding this problem?
Cheers,
Jk_
August 18th, 2010 8:20 pm
Hi, I’m very interesting in your ScrollBar Class.
The project in wich I’m going to use your class is using TweenLite.
Is your Class using it too?
Do you believe if I will have any problem with TweenLite?
August 18th, 2010 8:22 pm
@Raul Jimenez > Yes it uses TweenLite.
Jk_
August 18th, 2010 8:50 pm
@ JK and Raul: Nope, scrollbar class uses TweenMax and no matter which tween engine it’s using, it will work in any AS3 project as it’s an independent component.
@JK: Unfortunately, that’s the TextField problem in Flash, I can fix that in freelancing rate, contact me through my profile page for more talks.
August 20th, 2010 7:19 pm
I’m working with v. 11.37 of TweenMax and the scroll works with v. 10.092
I’ve changed the “imports” at utils.scroll.Buttons.as
At utils.scroll.RegSimpleScroll.as I’ve changed the “imports” too and I use killTweensOf instead of removeTween.
Are these changes enough to make the scroll work with v. 11.37?
Thanks.
August 20th, 2010 8:46 pm
Raul, the TweenMax we’ve used is in Version 11.131
you’re not allowed to change the package path to our classes unless you have purchased the extended license.
August 20th, 2010 9:03 pm
I’ve just purchased your component and downloaded scrollbar-class-abstract-ease-blur-source.zip from http://activeden.net/
Class gs.tweenMax in src folder says that it is version 10.12. Would you send me the component version that uses TweenMax 11.31 with the path pointing to com.greensock instead of com.gs?
Thanks
August 23rd, 2010 9:25 pm
my mistake, yes, we updated the scrollbar and corrected the actual TweenMax engine in it… updates will be approved to AD soon.
August 23rd, 2010 9:35 pm
Thank you very much for your responses.
How can I download the last version? From activeden.net?
Do you notice us when the last version is available in this forum?
August 24th, 2010 12:23 am
Yes, we have used the last Tweenmax version, but the recent update will come up with the latest version of Tweenmax and with some more improvements. we announce new events in our newsletter, please register from the right sidebar, and also follow us on Facebook and Twitter for the latest announcements.