Free AS3 Scrollbar: Fullscreen and Resizable

In coincidence with the launch of my new Aspen template, I’ve decided to release for free the source code for the scrollbar I’ve been using in my other Flash templates. The scrollbar is coded in AS3 and will automatically resize according to the amount of content, unlike a lot of other Flash scrollbars. You can set the track color, grabber color, grabber press color, grip color, track thickness, grabber thickness, ease amount and whether or not the grabber is “shiny”.

Update [6-21-2009]: Now supports mouse wheel scrolling on the Mac using SWFWheel.

Here is a demo of the scrollbar in use. You can click “Add Copy” to see how it resizes:

Get Adobe Flash player

You can also view a demo of it being used fullscreen in my Sycamore template.

Here is the usage for the scrollbar class:

// Arguments: Content to scroll, track color, grabber color, grabber press color, grip color, track thickness, grabber thickness, ease amount, whether grabber is “shiny”
  1. _scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0x05b59a, 0xffffff, 15, 15, 4, true);
  2. addChild(_scrollBar);

» Download the demo and source code

Feel free to use this code in any way you want other than selling it.

Enjoy!

Related posts:

  1. AS3 Dotted Line Class
  2. Flash AS3 Contact Form Using PHP
  3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3
  4. Simple Sanity-Saving Tip for All Timeline-Based Flash Projects
  5. Top 8 Resources for Learning ActionScript 3

129 Responses to “Free AS3 Scrollbar: Fullscreen and Resizable”


  1. 1 sambrown

    this is great, thank you for the post. I’ve got a couple scrollbar classes that I use, but adding the be ‘automatically resize according to the amount of content’ feature is awesome. Thank you

  2. 2 kem

    it is not free !

    not fullscreen !

  3. 3 Minhaj

    What fonts are used on this website’s logo and tabs?

  4. 4 Jay

    @kem
    Yes it is – try downloading the zip above.

    @Minhaj
    Logo is Mustardo and tabs are Lucida Grande.

  5. 5 Richard S Davies

    Thanks! A great looking AS3 scroller!

  6. 6 Stephen M. Walker II

    great work with the site and the designs. your patience with the above comments is very commendable. I’m interested in purchasing, just to check out your AS3 code for a hands-on learning example. that’s the kind of stuff they need to be putting in books.

  7. 7 Anton

    Many thanks to author for saving a lot of my work and time.

  8. 8 Jermaine

    This looks fantastic, but I’m having trouble implementing it, exactly how do you activate the scrollbar script in flash?

  9. 9 Jermaine

    Oh and btw, the demo fla is empty :/

  10. 10 Jay

    @Jermaine,

    The FLA is empty because all the code is located in the AS class files. You can see the implementation of the scrollbar if you open up “Main.as” located in the “classes” folder. Look on line 57 to see how it is used. Hope that helps.

  11. 11 Jermaine

    Ohh I see I see. I guess it’s cause I’m still trying to figure out AS3, so I’m having trouble with classes still. I’ll figure it out haha. Thanks!

  12. 12 psychoinca

    Hey Jay,

    cool scrollbar!! Is it possible to position it in init position after scrolling down and adding new text?
    At the Moment it stays in the last scroll position.

    Thanks for your good work

  13. 13 Jay

    @psychoinca

    In the adjustSize function inside of FullScreenScrollBar.as you should be able to just add something like this:

    _grabber.y = 0;

    Hope that helps.

  14. 14 psychoinca

    Hey Jay,

    it helped, thanks a lot.

    Greetings from Germany

  15. 15 derhenno

    First of all: Mucho mucho thankyous for this magnificent scrollbar…It works almost perfectly.My problem is that the scrollbar loses its functions when I create a papervision 3dScene (basicview). I am not able to scroll anymore. It doesn’t matter if I create the 3d scene within the swf that holds the scrollbar or load a separate swf containing the 3d scene into main.swf or the menu.swf that holds the scrollbar. I’m at a loss right now…do you have any idea what’s causing this?

  16. 16 derhenno

    First of all: Mucho mucho thankyous for this magnificent scrollbar…It works almost perfectly.My problem is that the scrollbar loses its functions when I create a papervision 3dScene (basicview). I am not able to scroll anymore. It doesn’t matter if I create the 3d scene within the swf that holds the scrollbar or load a separate swf containing the 3d scene into main.swf or the menu.swf that holds the scrollbar. I’m at a loss right now…do you have any idea what’s causing this? As soon as i add the pv3d scene – addChild(view)…nothing works anymore…

  17. 17 derhenno

    I’ve figured out that the scrollbar does not work if i make the papervision 3d scene interactive so it can receive mouse-events….

  18. 18 james

    I just get errors:

    1046: Type was not found or was not a compile-time constant: FullScreenScrollbar
    1180: Call to a possibly undefined method addFrameScript
    1180: Call to a possibly undefined method FullScreenScrollBar

    any ideas why i’m getting these errors? I’m guessing they’re all caused by 1 stupid thing i’m doing wrong?? I put all the files in the right places and just added “main” to the class bit EXACTLY as it was done on the example.

    thanks

  19. 19 Jay

    @derhenno,

    Unfortunately I don’t know enough about Papervision to know what is happening – seems like something in Papervision is interfering with the mouse events but I really have no idea.

    @james,

    Sounds like it can’t find the class files. Make sure everything is in the “classes” folder, including everything in the “com” and “gs” folders. Also make sure in your FLA it knows where to look for the “classes” folder – under Publish Settings > Flash > Settings, make sure the classpath is the following:

    ./classes

    Hope that helps.

    -Jay

  20. 20 Andrew

    Awesome work, Jay.

    Thanks for posting.

  21. 21 Giovannie

    I am new to all this and am having a realy hard time with scrollbars. I down loaded the zip file and extrated it as well but still can’t figure out how to install it or where to edit / add content.

    Thanks for your help.

  22. 22 Jay

    @Giovannie

    You’ll pretty much need to know some AS3 in order to use this. But basically the usage is as follows, where “_content” is the name of the content movie clip you want to scroll:

    _scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0×05b59a, 0xffffff, 15, 15, 4, true);

    addChild(_scrollBar);

    Hope that helps.

    -Jay

  23. 23 Jean Alexandre

    Hey Jay,

    Great scrollbar class. Love it! I added a xPos var to allow for x positioning of the scrollbar once it’s instantiated. I needed to be able to have is sit closer to the content I’m scrolling. I’m sure you already know what I’m talking about, you should add it to the class as it makes it more flexible.

    Thanks again for making a great scrollbar, I suck at math so scrollbars are the bane of my existence.

  24. 24 Jay

    @Jean Alexandre

    Glad you found it useful! Cool idea for a feature – I’ll consider adding it in the future.

    -Jay

  25. 25 Alan

    I am fairly new to this, Looks like a great tool. How do I use it in my fla file? I tried

    include “Main.as”

    Any help would be wonderful

  26. 26 Jay

    @Alan

    If you scroll up a few comments I go over the basic usage. Hope that helps.

    -Jay

  27. 27 Julian

    A nice addition for an even more minimal scroller would be a “thin” mode that expanded horizontally on mouse over. So it would stay out of the way until the user actually needed it.

  28. 28 Lijunkui

    got it. Thank you very much . China RIA Developer

  29. 29 Adam

    Is it possible to provide better docs, like what each parameter to the contructor means and how to do things like NOT make it fullsize? Awesome job, btw. Thanks.

  30. 30 Jay

    @Adam

    The sample usage above lists what all the parameters do. It’s also commented in the source code. It’s setup to be used fullsize so you would need to customize the code yourself to use it in a different way.

    -Jay

  31. 31 Ramon Fritsch

    Ok man, great job!

    I have made a scroll class too. Verify in http://blog.ramonfritsch.com/t/scroll

    cheers

  32. 32 Ray

    Awesome looking scrollbar! When implementing, I am getting “1180: Call to a possibly undefined method addFrameScript.”

    any idea why?

  33. 33 Ray

    I changed your class to extend MovieClip instead of Sprite.

    This is what I stumbled across on the Internet while looking for answers:

    “Your class is extending Sprite and Sprites are not allowed to have actionscript code on the frames/main timeline, since your class is a Sprite, and a Sprite doesn’t have the addFrameScript method, the error should make more sense.”

    found: http://www.flashmove.com/forum/showthread.php?t=32933

  34. 34 Brett

    Jay,

    Great work here!!! Love it this scrollbar and it’s functionality.

    I am full flash page using this scrollbar. I removed the “copy” button and made the paragraph text to blank ” “. I have the scrollbar then to scroll a movie clip I called “contentMC.” In that is a few images spanning the movie clip to about 5000 px. Tested it and it scrolls. Now I realized I wanted to autocenter the movie clip on the stage with ease. I added the code and tested it getting TONSSSS of errors. I remove the “main” class and test the file and everything auto-centers. Is there a solution for this?

    I have also tried to externally load the autocentered conent into the “contentMC” movie clip and I still get errors, nothing loads. I remove the “main” class, and my content loads. Same issue with putting in a preloaded before my content on the scrollbar FLA.

    Would sending you some of my codes help you? I’m not really sure what to do here. Thanks.

  35. 35 Johan

    hey,
    superb scroller, just what i needed. but i’m havin a problem… i’m loading a bunch of jpg’s through XML in container_mc and i have the scroller assigned to it. my problem is that only when i resize the browser does scroll handler show up! how can i get this to automaticly happen everytime something is loaded in to container_mc?

  36. 36 Jay

    @Brett

    Not sure what is causing your errors – if you are getting them after you add your autocenter code then the errors would probably be from that code… maybe you are mixing AS2 and AS3 code?

    -Jay

  37. 37 Jay

    @Johan

    In the demo look at the code used on the add copy button:

    _scrollBar.adjustSize();

    Calling that should adjust the scrollbar size for the new content you add.

    -Jay

  38. 38 Jared

    Does the function “kill” in FullScreenScrollBar serve a purpose?

  39. 39 Jay

    @Jared

    The kill function removes the listeners – use it if you remove the scrollbar to free up memory.

    -Jay

  40. 40 Johan

    @Jay

    _scrollBar.adjustSize();

    It solved my problem… hmm, should have seen it…

    Another question:
    What if you dont want the scroller to be exactly fullscreen. Say if you want a margin of 50px at top & bottom?

  41. 41 Jay

    @Johan

    It was designed to be used at full browser size – you’d have to customize it further to have it do something like that.

    -Jay

  42. 42 Olive

    Hey, this seems to be awsome but i can’t get to make it work inside of fla not an as file. Do i have to import the class ? How should i do it ?

    Many thx

  43. 43 Jay

    @Olive

    Here is something I wrote in another comment here. Hopefully it helps:

    Make sure everything is in the “classes” folder, including everything in the “com” and “gs” folders. Also make sure in your FLA it knows where to look for the “classes” folder – under Publish Settings > Flash > Settings, make sure the classpath is the following:

    ./classes

    The usage is as follows, where “_content” is the name of the content movie clip you want to scroll:

    _scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0×05b59a, 0xffffff, 15, 15, 4, true);

    addChild(_scrollBar);

    -Jay

  44. 44 George

    Hey mate!! This is a very cool scrollbar, but when I was trying to implemented with gaiaframework the following error occure..

    1023: Incompatible override. override public function initTweenVals($hrp:Boolean = false, $reservedProps:String = “”):void {

    The implementation in my class is…

    package pages
    {
    import com.gaiaframework.templates.AbstractPage;
    import com.gaiaframework.events.*;
    import com.gaiaframework.debug.*;
    import com.gaiaframework.api.*;
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    import gs.*;
    import org.libspark.ui.SWFWheel;
    import com.warmforestflash.ui.FullScreenScrollBar;

    public class AboutPage extends AbstractPage
    {
    private var _scrollBar:FullScreenScrollBar;

    Thanks in advance!

  45. 45 George

    Nevermind I found the solution!!!

    I have change the TweenFilterLite to TweenLite and works like it should!!!

    It Rocks mate!!!!

    Nice Job (but take a look at the above problem, if there is any other way to be solved)!

  46. 46 Brett

    Jay,

    The scrollbar seems to not work when I put any sort of AS3 lines in the timeline, so I don’t think it’s just the center code. The center code is AS3 and works perfectly without the scrollbar. And the scrollbar works perfectly without the AS3 center code. :P This is a little frustrating here. Maybe I did something wrong

  47. 47 George
  48. 48 George

    Jay,

    What manipulations I have to make, in order to work ONLY for an mc inside the main stage???

    George

  49. 49 Alexandra

    Hello! This tool is amazing , but please tell me how to make it work on Flex3. I mean if I use uicomponents for content, scrollbar etc, everything is messed up . Thank you!

  50. 50 Jay

    @George

    Not sure if I entirely understand your question – it should scroll anything in the “_content” clip.

    _scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0×05b59a, 0xffffff, 15, 15, 4, true);

    @Alexandra

    Unfortunately I don’t use Flex so I honestly have no idea.

    -Jay

  51. 51 George

    @Jay,

    My problem is that I use the scrollbar to scroll the contents on the clip that I have added to stage, and not the contents on the stage it self!!! So if the stage is 1200X900 i have added a clip that is 400X300! So I only want to scroll the contents of the newly added clip.

    George

  52. 52 Jay

    @George

    By default it only scrolls what you add to the “_content” clip. Notice how in the demo above it doesn’t scroll the “Add copy” button because it’s not part of “_content”. Only add the stuff to “_content” that you want to scroll.

    -Jay

  53. 53 George

    @Jay,

    I will try that, but I use it with Gaia, it’s a little more complecated.

    George

  54. 54 0L4F

    Hi Jay,

    thank you very much for this great class, I’ll be using it a lot in future projects!

    Right now I’m trying to figure out this problem: when I add a Papervision scene to my current project, the scrollbar stops working. The scrollbar appears, and has the correct height, but it no longer scrolls _content.
    The Papervision scene is in an external .swf, and is not a child of _content.
    Any idea what might cause this?
    I’m thinking it might be something with the stage scalemode, Papervision changes it when it initiates.

  55. 55 Jay

    @OL4F

    I don’t really use Papervision that much so unfortunately I’m really not sure what might be causing that issue…

    -Jay

  56. 56 Levi

    I would like to know how come everytime I resize my browser I get extra space.

    -Jay

  57. 57 Bob

    Jay-

    Great scrollbar class and easy to implement. I’ve noticed what I believe to be an error both in your example and in my testing.

    The FIRST time you click on the track (not the grabber) it moves the grabber but doesn’t scroll _content. From then on it works. I’ve tried looking for the solution but I’m not sure. Any ideas?

    Thanks!

  58. 58 Jay

    @Bob

    Thanks for the heads up – never noticed that before. I’ll look into it and post an update ASAP.

    -Jay

  59. 59 Jay

    @Bob

    FYI just posted an update to fix that issue. Thanks again for pointing it out.

    -Jay

  60. 60 Levi

    Sorry I didn’t specify. When I resize my browser I get extra space in my scroll_content in the bottom. Any idea what is causing this?

  61. 61 Jay

    @Levi

    I really have no idea – I don’t think I’ve ever seen what you are talking about.

    -Jay

  62. 62 Deon

    I have everything set up exactly as noted in this post:

    http://www.warmforestflash.com/blog/2009/04/free-as3-scrollbar-fullscreen-and-resizable/#comment-3502

    I have three errors pop up, all for the line:
    “var _scrollBar = new FullScreenScrollBar(contentMC, 0×222222, 0xff4400, 0×05b59a, 0xffffff, 15, 15, 4, true);”

    1093: Syntax error.
    1084: Syntax error: expecting rightparen before 222222.
    1093: Syntax error.

    Any thoughts on what I am doing wrong?

  63. 63 Jay

    @Deon

    I think the “x” character is giving you the error – when you copy and paste from the blog I think it’s copying a special character instead of a true “x”. Try copying and pasting from the actual source code download or just retype the “x” in 0×222222 and the other colors. Hope that helps.

    -Jay

  64. 64 Scott

    Great thanks for putting this up:

    I have used it on a test project whilst using swiffit and I am not sure how I get the scrollBar to work and ignore the browser scrollBars. I have put my example below

    http://www.sb-dev.co.uk/scott/site2/www/#/about/

    Any ideas?

  65. 65 Jay

    @Scott

    Not really sure – you would probably want to disable SWFFit while using the scrollbar since they are both trying to do the same thing.

    -Jay

  66. 66 Scott

    @Jay

    Thanks Jay, I noticed you use this scrollbar on one of the templates, sycamore I think it is. If you don’t mind me asking how do you get the swf to extend beyond the browser height so the scrollbar can scroll up and down the extended swf file?

    Hope that makes sense.

    Thanks again.

    Scott

  67. 67 Jay

    @Scott

    I think I set the site height dynamically according to the amount of content then passed it to SWFFit like this:

    ExternalInterface.call(“swffit.fit”, “flashcontent”, 960, siteHeight);

    Hope that helps.

    -Jay

  68. 68 Scott

    @Jay

  69. 69 Scott

    Great thanks Jay, I’ll look into SWFFit in more detail, I might be able to use it to resize the browser whilst not showing the scrollbars.

  70. 70 Bob

    Jay

    Beautiful scrollbar class – I love it! I know several people have asked what to do if you DON’T want it to be fullscreen and you have replied “you’d have to change stuff”. Would you mind just leading me in the right direction? Just a rough idea of what I would need to change?

    Thanks man!

    Bob

  71. 71 Bob

    Oh – and one more thing. Thanks for fixing the error I pointed out :) I can’t figure out where your change was… I already have the scrollbar implemented and my code changed quite a bit to reflect things not needed with my version of your scrollbar. Would you mind letting me know where you changed things so the first click of the scrollbar works?

    Thanks so much!

  72. 72 Jay

    @Bob

    To fix the track click bug inside the onTrackClick function I moved the following line from the beginning to the end of the function:

    _grabber.addEventListener(Event.ENTER_FRAME, scrollContent, false, 0, true);

    I’m not sure how to make it work not as a fullscreen scrollbar – it’s not like I know exactly what code to edit and I’m just holding out on everyone. :) It would take a lot of reworking the class to have it function like that so if you know AS3 feel free to take a crack at it.

    -Jay

  73. 73 PJ

    Hi Jay,

    Brilliant scroller, saved my hide.

    I’ve got a quick question, when I publish the project to .SWF the scroller appears at the right edge of the screen (see pic 1) but when I publish it to a Projector app it leaves a gap on the right hand side after the scroll bar. I assume this has something to do with the Flash player embedded with the Projector app, any idea how to get it to appear at the right edge?

    Pic 1: http://i25.photobucket.com/albums/c73/pjburnhill/Screenshot2009-11-17at124655.png
    Pic 2: http://i25.photobucket.com/albums/c73/pjburnhill/Screenshot2009-11-17at124658.png

  74. 74 PJ

    Hmm, found out that there seems no way of getting rid of the ‘empty scroll bar’ and the bar at the bottom without a specific publishing tool…

    Or does anyone have any other ideas / methods?

  75. 75 alexandre

    I need to use a back to top button… any possibilities? I had a similar scroll bar in as2, and I only needed to put some vars = 0…

    Thanks

  76. 76 Chan

    hi!

    did anyone had that problem?:

    1083: Syntax error: package is unexpected.

    i`ve copy classes and do everything as it should be and this is the only problem with this greate scroll – but i can`t use it because of it.
    HELP please!

  77. 77 Jay

    @Chan

    Sounds like you don’t have things setup correctly. Make sure everything is in the “classes” folder, including everything in the “com” and “gs” folders. Also make sure in your FLA it knows where to look for the “classes” folder – under Publish Settings > Flash > Settings, make sure the classpath is the following:

    ./classes

    Hope that helps.

    -Jay

  78. 78 Jay

    @alexandre

    This should be a simple way of doing that – in the scrollbar class add a function like below:

    public function scrollToTop():void
    {
    _grabber.y = 0;
    adjustSize();
    }

    Then call the function like this on your button:

    _scrollBar.scrollToTop();

    Hope that helps.

    -Jay

  79. 79 Marcus Zorbis

    Very nice post, thanks for sharing. Orks great in fullscreen!

    Congratulations!

  80. 80 flaim

    Hi!

    Nice class – I will probably use it somehow- Thanks for sharing!!!

    Cheers,

    FLAIM

  81. 81 Kode

    Wow!!! excelent job my brooo… justamente lo que buscaba!

  82. 82 Joel

    Hi,

    Just would like to find out what license is this scrollbar released as. E.g. MIT license?

    Rgds,
    Joel

  83. 83 Jay

    @Joel

    I’m fine with any use other than reselling it – not sure what license that falls under.

    -Jay

  84. 84 anonymouse

    Hi there It’s a cool bar ! Great that it works with mac aswell.

    The only thing is, and I’ve noticed this before on site with flash scrolling content.
    It doesn’t focus! If I use the mousewheel the hole page scrolls…not only the flash. Would be cool if some js-guru would make the rest of the page stop responding when flash has focus and is being scrolled..That should be do-able right ?

    Other than that, very cool !

  85. 85 John

    This works really well.

    My only question is:

    How would you go about making a “GOTO” function, to respond to Anchors.

    So if I wanted a button to tell my content to scroll to the middle of the text, I’d go:

    scrollBar.goto(new_Ypos);

    And you’d see the scroll go to that point, which would make the text scroll as well.

    Cheers,
    John

  86. 86 dave

    Hi Great job thanks!

    I was wondering if its possible to change the height of the scroll bar? so that it does not take up the height of the stage, as in my case I have a header & footer and cant seem to figure out what i need to alter

    cheers, dave

  87. 87 Andrew

    Hey, has anyone tried to get this to work on dynamically loaded SWFs into MovieClips? It works on the SWF by itself. But as soon as it is loaded into the main SWF the grabber stops working. It only works when the content is moving already (like if I was to click the track then grab the grabber while the content is still easing). Any suggestions?
    Thanks
    -Andrew

  88. 88 Sergio Alves

    first, thanks for this great class :)

    second, what’s the easiest approach to do “anchor” like stuff? :)

  89. 89 Ian Kemp

    How can you make this to control multiple movieclips instead of just one?

  90. 90 Trav

    So excited to have found this scrollbar…

    I got these 3 errors though.

    1120: Access of undefined property _scrollBar.
    1180: Call to a possibly undefined method FullScreenScrollBar.
    1120: Access of undefined property _scrollBar.

    Please Help…

  91. 91 Ness

    Hi! Your scrollbar is really, really cool. But as I don’t really know anything about empty flash files and class folders with the code inside, I couldn’t do anything with it. I guess it would have been different if I needed the scrollbar for all the website, and not just one movieclip nested inside three others…
    I get the same errors as Trav, even after specifying the classes folder in the settings.
    Anyway, maybe one day I’ll understand this way of programming, and I’ll come back and grab this scrollbar :)

  92. 92 John

    Really, really great class ! Thanks a lot !

    Andrew (I guess you found out since, or you used something else) :
    I had the same problem and I just used the adjustSize() method after my container was filled.

  93. 93 Conrad

    Hello Jay
    Great job, of course. I have a question, how can I make, a whole site center in browser. I want it bo be at top center, when I changed a html ” var params … salign: “tl ” to salign: “t” or “tc” the it scrolls by wheel but the scrollbar is missing. Help me please !!! My recent work depends on it

  94. 94 Ritz

    Hi Jay,
    Awesome :) love it… But i use flash 8 and AS2… so can you make this source fla file compatible with flash 8 and send it to me plz… I cant offord to upgrade to CS3 ryt now so plz help out…

    my email id is: darkbladetrinity@gmail.com

  95. 95 $incere

    The sample looks great, and the usage looks pretty straight forward. I might have missed the answer if someone already asked but will this work as a horizontal scroller also. If it’s been asked and answered, please don’t be too hard on me….LOL

  96. 96 Philipp

    @John you can implement a goto-function by doing something like this:

    public function moveContentTo(gotoPos:Number):void {
    var temp_perc = (gotoPos*100)/_cH;
    var temp_pos = (_tH/100)*temp_perc;

    TweenLite.to(_grabber, 0.5, {y:temp_pos});
    _grabber.addEventListener(Event.ENTER_FRAME, scrollContent, false, 0, true);
    }

    cheers, philipp

  97. 97 X

    Anybody have an idea on how to center the movieclip within?

    This scroller works very well, Thanks Jay for the component.

  98. 98 Noorotic

    Thanks for the awesome code snippet. The only issue I have is, is there a way to use the scrollbar horizontally? I have a map that I need to scroll in both x and y directions.

    Thanks!!

  99. 99 Tom

    Thanks for this great script!

    I have been scratching my head for a while trying to figure out how to update the scrollbar when the movieclip it was scrolling changed (changed contents and so height, etc).
    It was doing funky things when I tried to either remove the existing scrollbar and create a new one, or leave it there and run adjustSize()

    Adding the function a few comments up and running it everytime the content is changed seems to have done the trick!

    public function scrollToTop():void {
    _grabber.y = 0;
    adjustSize();
    }

    Hopefully this helps anyone with a similar problem!

    Perhaps having the scroller check for if the movieclip it’s scrolling changes size etc and adjusting accordingly could be included in an update? :)

    Thanks!

  100. 100 AP

    Jay awesome scroller! (BEST I HAVE SEEN).

    One problem I am having is that all of the content does not scroll up. I use the _scroller.adjustSize(); function and it still does not do the trick. Any ideas?

    Thanks!
    -AP

  101. 101 Peter

    Then click on the text field and after that scroll it with the mouse the first line of the text dissapears =)

    Bug?

  102. 102 Nobox

    Hi, thanks for this great job! I want to ask: how to load my movieclip from timeline into _content? Thank you.

  103. 103 Levi

    I would like to know how to customize the scrollbar horizontally.
    I placed the scrollbar horizontally but I’m having trouble dragging
    it to the sides, instead it goes up and down.
    How can I fix this? What would I need to change?

  104. 104 Aaron Beall

    Hey, how did you get it so the mouseWheel doesn’t scroll the HTML page when the mouse is over the Flash Player? That always annoys me with mouseWheel in Flash… is that solved through JS?

  105. 105 Paul

    Thanks Jay
    Nice clean code that permits easy further customization.

  106. 106 Ina

    Really good code and very nice to work with.
    I used your scroller as base for a scrollbbar which isn’t Fullscreen. Its not too difficult, you just have to modify all the variables in “FullScreenScrollBar.as” which are referring to the Size of the stage.
    And then you have to put the Movieclip where you want to add the scroller before the code addChild(_scrollbar); In my case: text_mc.addChild(_scrollBar);

  107. 107 Amonymous

    it works just great…THX

  108. 108 antonio brandao

    not complete without horizontal mode

  109. 109 Niklas

    Hi there!
    I have a website in flash where I’m trying to use this scrollbar on every section of the site.
    I only get this error this way:
    I visit the home page & everything works.
    I visit a page without the scroll, for example about us & then go back to home.
    This is the error:
    TypeError: Error #1009: cannot access a property or method of a null object reference
    at com.warmforestflash.ui::FullScreenScrollBar/mouseWheelListener()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at org.libspark.ui::SWFWheel$/triggerMouseEvent()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at flash.external::ExternalInterface$/_callIn()
    at Function/()
    Any ideas as to what is happening here?

    Niklas

  110. 110 Adam

    Anyone know how to make it so the height isn’t the full height of the stage. I’ve changed the height of the track and can get it to just scroll within the track but track.y is not 0 so once you’ve started scrolling and you scroll back to the top of the track, the content is now being cut off at the top because its still using the entire height of the stage.

  111. 111 Beno

    Hey;
    Cannot unzip your demo. Tried in Windows. First got some error about needing to insert some kind of disk. Got that twice. Next it just times out trying to open it. Uploaded it to my CentOS server:

    [beno@13gems ~]$ ls
    as3_scrollbar.zip
    [beno@13gems ~]$ unzip as3_scrollbar.zip
    Archive: as3_scrollbar.zip
    End-of-central-directory signature not found. Either this file is not
    a zipfile, or it constitutes one disk of a multi-part archive. In the
    latter case the central directory and zipfile comment will be found on
    the last disk(s) of this archive.
    unzip: cannot find zipfile directory in one of as3_scrollbar.zip or
    as3_scrollbar.zip.zip, and cannot find as3_scrollbar.zip.ZIP, period.

    Can you reupload that file?
    TIA,
    Beno

  112. 112 Beno

    BTW, the initial error is: “Please insert the last disk of Multi-volume set and click OK to continue.”

  113. 113 Beno

    THERE IS NOBODY RE3ADING THESE POSTS AND THE DOWNLOAD LINK IS BROKEN. THIS SUCKS!

  114. 114 Jay

    @Beno

    The download link works fine on my end – just tried on my Mac and in Windows. The same zip file has been uploaded for over a year and I haven’t heard of anyone having the problem you are having. Are you able to open other zip files? Maybe the problem is on your end?

    Also keep in mind I am offering this scrollbar for free so it would be nice if you could be a little bit appreciative.

    -J

  115. 115 Kevin

    Hi! This scroll bar looks really great and so much cleaner and more effective at making flash an effective design tool. Who has time for scroll bars that don’t use mouse wheels these days?

    However, I of course, am having trouble implementing it like so many others. I have copied your whole class folder to my base folder and have tried setting the class to use both the main and the FullScreenScrollBar script. I then tried putting in your code to start the scrollbar but all I get is:

    1093: Syntax error.
    1084: Syntax error: expecting rightparen before 222222.
    1093: Syntax error.

    So I’m mostly confused because I don’t know why it would need a code for the 0×22222 in the constructor.

    Could you tell me exactly which script I should be setting as the class script and any idea on why Im getting syntax errors on the code you posted?

  116. 116 Jay

    @Kevin,

    For the scrollbar usage make sure you are copying and pasting the code from the zip download and not the code directly from this blog entry. Sometimes when you copy and paste code from blogs weird special characters get pasted instead of the actual code. For example right before the “222222″ there is a “x” character which sometimes gets pasted as a special multiplication character. Just follow how things are setup in the download and you should be good.

    Hope that helps.

    -J

  117. 117 Loco

    Hi J,

    Awesome scrollbar. I apply to my project but somehow i can’t make the grabber dragging to works. If i click on the track the content moves, but not when i use the grabber..

    Did i miss anything? Or do i need to copy anything else than the code you pointed out on the article?

    Thanks heaps..

    LC

  118. 118 Loco

    And this is how i embed it into the script :

    addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
    if (STATE==0){
    nullMask();
    _content = homeDetails;
    homeDetails.mask = menuBG;
    TweenMax.to(homeDetails, 3, {alpha:1,y:125,x:30,delay:2,onComplete:loadScroll()});
    } else if (STATE==1){
    nullMask();
    _content = aboutDetails;
    aboutDetails.mask = menuBG;
    TweenMax.to(aboutDetails,3,{alpha:1,x:30,y:125,delay:2,onComplete:loadScroll()});
    .
    .
    .

    function onAddedToStage(e:Event):void
    {
    //loadScroll();
    removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    }

    function loadScroll():void {
    SWFWheel.initialize(stage);
    if (_scrollBar) {
    removeChild(_scrollBar);
    }
    _scrollBar = new FullScreenScrollBar(_content, 0×000000, 0x6699CC, 0x05b59a, 0xffffff, 10, 10, 4, true);
    //_scrollBar._defaultPosition = 0;
    //_scrollBar._content.y = 0;
    addChild(_scrollBar);
    }

    So when you click the track and it goes to the bottom of the scroll, then you can use the grabber or the mouse wheel. Once it got to top, it’s off again.

    Bit confuse here..

    Really appreciate any advice..

    Thanks,
    LC

  119. 119 ZREN

    I find Full Screen Button at http://www.as3tutorial.com it’s free, and jsut copy the mc your project, it’s works!

  120. 120 Zack

    I’m not sure why this isn’t working for me, I dropped the classes folder into the same folder that my FLA file is in.

    I imported the classes folder with:
    import classes.*

    I’m calling it as:
    var _scrollBar = new FullScreenScrollBar(portfolioPieces, 0×222222, 0xff4400, 0x05b59a, 0xffffff, 15, 15, 4, true)
    addChild(_scrollBar)

    I keep getting an error message that say “Call to a possibly undefined method FullScreenScrollBar.”

    What am I missing?

  121. 121 Ajayi Oluwaseun Emmanuel

    @zack, u must import the full path of use the wildcard in the folder where the classes actually reside.

    why cant i get this to work with my project?

  122. 122 kl1m4xx

    THATS NOT FREE!!!!!!!!

  123. 123 michalis

    how do i get this to work, do i need to import the swf or fla to the project i am working on? please guys i need some help, i am very new to flash, but i like what i see

    thanks

  124. 124 thedark_master

    great code! However, I wanted to take it a step further. What would be the best way to make it resize according to a movie clip? So basically I have a full flash website and somewhere in there I will have a set size movieclip that will contain the text.

  125. 125 Ismail Cherri

    If you are using this class with Gaia, this should make it work if you are using the SiteView as container!

    In the indexPage.as find the following line, it should be in the initScrollBar() function:

    Code:
    //Adding scrollbar at the top
    //Gaia.api.getDepthContainer(Gaia.PRELOADER).addChild(_sb);

    and replace it with:

    Code:
    //Adding scrollbar at the top
    stage.addChild(_sb);

    This should separate the ScrollBar from the SiteView without messing with the depth of different Gaia containers.
    I hope this works for you…

  126. 126 LJ

    Hey, I’m an AS3 newbie but love your scroll bar. I’ve seen some of your basic implementation comments but I’m still struggling. Any chance of a step by step to implement it?

  127. 127 Dan

    Hi Jay,

    This is great work! Just what I was looking for. I’ve managed to implement your scrollbar and it sort of works fine.. It’s just that if I change the stage alignment from top left to top (for the purpose of centring the site) is screws with the positioning of the scrollbar.

    While I have a basic understanding of AS3, I’m just not sure or seeing what it is that I would need to do to correct this. Would you, or anyone still checking the comments be able to suggest a fix?

    Many thanks,

    Dan

  128. 128 Remon

    Hi! first of all nice plugin!
    Does the free version contain the resizable scrollbar aswell?

    cheers

  1. 1 Flash AS3 Contact Form Using PHP | Warm Forest | Flash & ActionScript Blog

Leave a Reply