Jan 22 2010

Scrollbar Class

Category: Utils — ali @ 8:34 pm

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

Tags: , , , , , , , , , , , , , , , , , , ,

40 Responses to “Scrollbar Class”

  1. Tony says:
    February 18th, 2010 2:54 am

    Where can we download or purchase this class?

    Reply
  2. Tim says:
    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 ?

    Reply
  3. Tim says:
    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 ? :)

    Reply
  4. Scott says:
    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)

    Reply
  5. Scott says:
    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?

    Reply
    • ali says:
      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 :)

      Reply
  6. Scott says:
    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.

    Reply
  7. whsecurity says:
    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!

    Reply
  8. ali says:
    March 14th, 2010 8:53 am

    Hey Scott and whsecurity:

    You can have a 100% scrollbar like below:

    1
    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.scaleMode = StageScaleMode.NO_SCALE;
    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:

    1
    2
    _regSimpleScroll.maskWidth = stage.stageWidth - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
    _regSimpleScroll.maskHeight = stage.stageHeight - _regSimpleScroll.scrollBarWidth - _regSimpleScroll.scrollSpace;
    Reply
  9. whsecurity says:
    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

    Reply
    • ali says:
      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:

      1
      _regSimpleScroll.scrollManualY = 20;

      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 :)

      Reply
      • whsecurity says:
        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

        Reply
  10. whsecurity says:
    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

    Reply
    • ali says:
      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.

      Reply
  11. Jen says:
    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

    Reply
    • ali says:
      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:

      1
      _regSimpleScroll.btnLayout = RegSimpleConst.CIRCLE;

      and to remove the buttons you can set their size to 0:

      1
      _regSimpleScroll.btnSize = 0;
      Reply
  12. Jason says:
    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

    Reply
    • ali says:
      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 :)

      Reply
      • Jason says:
        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

        Reply
  13. Samuel says:
    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/

    Reply
  14. Samuel says:
    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.

    Reply
    • ali says:
      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.

      Reply
  15. BezerBezer says:
    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

    Reply
  16. BezerBezer says:
    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

    Reply
    • ali says:
      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:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      var _main:Sprite; // to save the loaded SWF file as Sprite
      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 :)

      Reply
  17. Jk_ says:
    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_

    Reply
  18. Jk_ says:
    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_

    Reply
  19. Raul Jimenez says:
    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?

    Reply
  20. Jk_ says:
    August 18th, 2010 8:22 pm

    @Raul Jimenez > Yes it uses TweenLite.

    Jk_

    Reply
  21. ali says:
    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.

    Reply
  22. Raul Jimenez says:
    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.

    Reply
    • admin says:
      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.

      Reply
      • Raul Jimenez says:
        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

        Reply
  23. Raul Jimenez says:
    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?

    Reply
    • ali says:
      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.

      Reply

Leave a Reply