Flashscaper AS3 Scrollbar
Posted by Flashscaper on February 27th, 2008 filed in Actionscript 3, Components, Flash CS3Welcome to my first post! I never had the motivation to create a blog though I read many of them. The only reason this blog is in existence is because I wanted to share my new Actionscript 3 scrollbar. After creating it, I realise non-programmers may need some instructions on how to use it. To keep editing my website would be tedious and I wanted to keep my website simple. Also, I will post more of such stuff and my website would not be a suitable place.
This scrollbar was created more or less on a whim so it may not meet all needs. As Actionscript 3 is starting to take off rapidly, most websites will soon be created using Actionscript 3. Scrollbar is one of the basic requirement but from experience, it is also hard to find a customisable scrollbar component unless its a paid one.
Anyway I will just do a brief explanation. First you will need to download the files. You will see a caurina folder, a Scrollbar.as and two fla.
Using the scrollbar
- Open the scrollbar_demo1.fla in Adobe Flash CS3.
- You can copy the scrollbar movieclip into your own flash file. Remember that the caurina folder and Scrollbar.as must be copied into your project folder as well.
- In the actions layer, 1st frame, open up the actions panel by pressing F9.
- You will see this line of code. sb.init(txt_mc, “easeoutBack”, 2, true, 2); Copy this code into your fla file where you need to use the scrollbar.
Scrollbar parameters
- I will now explain this line of code, sb.init(txt_mc, “easeoutBack”, 2, true, 2); sb is the instance name of your scrollbar. So remember to name the scrollbar.
- txt_mc is the name of your scrolling target. Right now, I basically scroll movieclips instead of text. By doing this you can add images to your scrolling target and it will still work. So it also means you must convert your text into movieclips. Remember to name your scrolling target after you convert it into a movieclip.
- The next parameter, “easeOutBack” is the scrolling effect. As I used Tweener to do the effects, you can find the type of effects here. Look under transition types.
- The number you find after specifying the effects type is the timing of the effect. If its higher, means the scrolling will be slower and the transition more obvious. Put 0 if you want to scroll normally.
- The next parameter determines your scrolling arrows visibility.
- The last parameter is a scrolling buffer. You will need this if you adjust the length of the scroller. The longer your scroller, the bigger the number should be. You use this to adjust how high you want to scroll to.
Visual Adjustments
- To change the scrollbar visually, you just do it manually. Means you can go to the Flash library you will find an scrollbar assets folder. You can change colours or add in your own images into the movieclips.
- Take note that if you want to increase the height of the scrollbar, please go and adjust the track movieclip in the scrollbar assets folder instead of just changing the height of the scrollbar.
- After adjusting the scroll track and if you want the scroll arrows, you got to adjust them so that they are on the tip of the scroll track. Do not overlap the arrows on the track.
Features of Flashscaper AS3 Scrollbar
- Customizable
- Mouse wheel scrolling
- Scrolling effects
- Auto detect if scrollbar is needed
April 1st, 2008 at 2:48 am
Love your work!
Very nice scrollbar!…..and it works!
Just one question though, how do you change the size of the text area width, if you want a wider viewing area?
Thanks again.
Vlado
Sydney, Australia
April 2nd, 2008 at 12:27 am
Let me use the default txt_mc as example. If I want to increase the width of the text, I need to double click into txt_mc. From there I adjust the text to the width I want. The important thing is, the x and y values for the top most text should start from 0. From there you can go back to the main timeline. Now adjust the position of the txt_mc accordingly in the main timeline. Hope this helps.
April 7th, 2008 at 1:27 pm
Hello Flashscaper, incredible script ! Thanks !
Now, a question :
I have edited the “text” mc to have several frames (one for each page).
Each content has a variable height.
I have a button on the root to skip to the wanted frame of “text”.
But I would like the scroll to reinitialize and to be shown from the top again.
How can I do this ?
April 7th, 2008 at 11:13 pm
Hi Gordie,
This scrollbar was more or less meant to scroll 1 text_mc at one time. So if you need to scroll several text, most prob you need to have 1 scrollbar per text_mc.
Just for clarification sake, is there any reason why you need to use 1 scrollbar to display multiple text?
April 8th, 2008 at 10:43 pm
loving your scroller however when i dynamically add stuff into the div it wont display when i put in a transparent square where im loading the data in it will display but once i scroll the data disapears.. any chance of some help please.
April 8th, 2008 at 11:07 pm
all good just changed the target hieght to a global populated when i create the data
April 9th, 2008 at 12:07 am
Ok, so means its working now? Honestly, I haven’t really test out the limits of the scrollbar yet. Im sure there are scenarios in implementation which need tweaking. Im interested to know what are the issues too.
April 15th, 2008 at 3:18 pm
it’s a great job… and u make it so easy for using with our oun text…
thx a lot
April 19th, 2008 at 1:29 am
What about the browser scroll?
If you add text to the page, which make it scrollable as well, when you scroll inside the flash, the page scrolls as well.
Any ideas?
April 20th, 2008 at 5:56 pm
I assume you are talking about the mousewheel scrolling? If there is html content, for the mousewheel scrolling to work, the flash with the scrollbar has to be selected. Means you have to click on the flash before the focus is on it. When the focus is on the flash, you can start scrolling using the mousewheel.
April 25th, 2008 at 11:43 am
Hi,
Thanks for sharing your code. Nice work on something that people shouldn’t have to pay for.
I updated your code to add functionality to the track. So someone could click anywhere on the track and scroll up or down to that point.
Here is the code that will need to be added to the class:
private var track:Sprite;
private var trackY:Number = 0;
private var trackIsDown:Boolean;
track.addEventListener(MouseEvent.MOUSE_DOWN, downTrackScroll);
track.addEventListener(MouseEvent.MOUSE_UP, upTrackScroll);
track.addEventListener(Event.ENTER_FRAME, trackScroll)
private function trackScroll(event:Event):void {
if (trackIsDown) {
var half:uint = scroller.height * 0.5;
var scrollerBottom:int = (scroller.height + scroller.y) + 2;
var scrollerTop:int = scroller.y – 2;
if (trackY scrollerBottom) {
isDown = true;
} else {
trackIsDown = false;
isUp = false;
isDown = false;
}
}
}
private function downTrackScroll(event:MouseEvent):void {
trackIsDown = true;
trackY = event.localY;
}
private function upTrackScroll(event:MouseEvent):void {
trackIsDown = false;
}
April 25th, 2008 at 5:15 pm
Nice add on. Thanks for the code Marshall.
April 26th, 2008 at 7:58 am
Thanks Flashscaper. It appears that some of the code got stripped out when posting to the blog. If you email me, I will reply with the updated as file if you would like to update the download source.
April 29th, 2008 at 4:33 pm
Hi is it possible to embed the action-script from scrollbar.as directly into an swf rather than referencing it? I want to load an existing swf with your scrollbar component into another movie, but when i do this the scrollbar no longer functions.
May 2nd, 2008 at 10:14 am
So… I’m following EXACTLY step by step your instructions, but I’m getting an error:
TypeError: Error #1006: init is not a function.
at about_fla::MainTimeline/frame1()
I copied everything into my route folder + the script into my movie, so I’m not quiet sure what am I doing wrong…
Let me know.
Thanks!
May 2nd, 2008 at 6:24 pm
Hi Tom,
I will need to look into your issue but will take some time. Right now, if I remember, the code is tie to the movieclip itself so it may not work when loaded into another movie. Will reply again with solution if there is.
May 5th, 2008 at 5:06 am
Great scrollbar!!
I’ve noticed that this scrollbar isn’t working with pixelfonts. Sometimes they get blurry – is there a way to see to it that the scrolled MC always stays on whole pixels?
Niklas
May 12th, 2008 at 2:24 pm
Hey Marshall,
I would love to get a chance to look at the completed code for the track functionality you posted here… is there anyway you could e-mail me it? (juliamarierobinson at gmail dot com)
And Flashscraper, great class… the only problem I had was referencing the stage from inside the class (was getting a #1009 null object error).. it seems that doing this in as3 when you are in child movieclips proves some difficulty.. any ideas? I did a temporary solution of adding a new invisible movieclip inside the Scrollbar mc to use as a fake stage for referencing space…
Thanks!
May 13th, 2008 at 7:26 am
Hi Julia,
You can try passing stage as a parameter into the scrollbar.as. but this would require some code change.
May 13th, 2008 at 7:29 am
Hi Amos,
As there could be many possibilities to your problem, I suggest you try the scrollbar on the source given first. Once you understand it better, you can try it on your own projects.
June 3rd, 2008 at 2:54 pm
Hey
Very nice, thanks.
I added the line
stage.addEventListener(MouseEvent.MOUSE_OUT, stopScroll);
on Scrollbar() function to avoid a problem I was having with swf embedded into html page (when releasing the button outside the area of the swf the scroller was going a little crazy)
June 8th, 2008 at 3:50 pm
This scrollbar works very smoothly. Thank you for sharing FlashScaper!
I would love to implement a scrollTo(offset_Y); function which I could call from within my actionscript upon load.
In other words I want to dynamically change the scrollTO-position to a specific Y – value. Anybody ideas on how to implement that in this scrollbar class?
thanks, have a good one,
Roeland
June 11th, 2008 at 6:37 am
Hi Flashcaper,
Nice scrollbar!!
I’ve a question. The scollbar works just fine after a few modifications in the original fla. After i’ve copied it to my own fla it doesn’t seems t work any more.
I’m having the next message:
ReferenceError: Error #1056: Cannot create property track on Scrollbar.
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at Scrollbar()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at index_fla::MainTimeline()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at index_fla::MainTimeline/frame1()
Can you please help me out?
June 12th, 2008 at 1:22 pm
Hi Marshal
I would like to get your code aswell. Could you please mail it to joel [at] joel.biz. Many thanx.
Anyway, Julia, I’ve managed to create the class dynamic from actionsscript where I pass the stage and the scrollbar movieclip, it works brilliant. I’ve send you an email, if anyone needs the class just send me an email.
Oh, and by the way, great work Flashcaper!
Thanx
June 15th, 2008 at 1:08 pm
This is in response to 3. Gordie
If you want the scroll bar to “reset”, such that the scroll thumb is at the top of the track and target content is at the top use the following:
sB.scroller.y = 0;
sB.startScroll();
Flashscaper – terrific work.
June 22nd, 2008 at 4:30 pm
Damn helpful. Well done that man…
June 23rd, 2008 at 9:11 am
What a fantastic scroller. If ONLY it worked on movies loaded within movies… Like Tom says above, if you could make that aspect work, we’d love you EVEN more…please please, pretty please ?
July 24th, 2008 at 6:50 am
i have the same problem, always i get error… when i load swf inside another swf…
July 25th, 2008 at 10:52 am
Hey Flashscraper, great code. Very useful. I’m a flash newbie and am having a problem. Everything seems to work fine if i have one scrollbar, but i added a second scrollbar on another frame. The user clicks a button and goes to the second page and can use that scrollbar. However, if they visit the second scrollbar and then go back to the first, i get this error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar/init()
at bliss_chic2_fla::MainTimeline/bliss_chic2_fla::frame40()
The first scrollbar works fine, as long as you don’t visit it after the second scrollbar. any ideas, fixes?
Thanks in advance! Alex
July 28th, 2008 at 11:32 am
I error #1006 “init is not a function”. What am I doing wrong?
August 14th, 2008 at 10:17 am
Hey Marshal,
Can I get a copy of your code as well? Thanks
Danny.
August 18th, 2008 at 7:54 am
Hallo sir fantastic scroller:
So I have one question sir, If I put the scroller in my firts frames of my swf file than is the scroller working fine. But I made a website as followd. a stage with left menu and buttons on it. and a titel.
The buttons are link to a movie clip. So everythim a click on the button than i see my contents of the movie clip “text and pictures. When I try to put a scrollbar in these pages i get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at pagePictures()
at test_fla::MainTimeline/frame1()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at pagePictures/frame1()
so wat is the problem here and how can I fix this? you can see the site online, I put the link in the website of the register
thanks Philippe
August 26th, 2008 at 3:02 am
Very nice scrollbar, saved my day
But I have the same problem as Alex. The first scrollbar works fine, as long as you don’t visit it after the second scrollbar. any ideas, fixes?
August 27th, 2008 at 2:53 am
how to change the size of the text area height viewing area?
August 27th, 2008 at 5:39 am
Hi Uldis,
You can try giving the scrollbars different names.
August 27th, 2008 at 5:41 am
Hi noob,
the size of the txt area is dependent on the contents of txt_mc. So put your contents in it, and the viewing areas will change accordingly.
August 27th, 2008 at 5:43 am
Hi Philppe,
Im not too sure about your problem. Can you put your project online so I can view it?
August 28th, 2008 at 9:57 am
hi i tired to use your fil in my fla, but i keep getting this error:
ReferenceError: Error #1056: Cannot create property track on Scrollbar.
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at Scrollbar$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at BF_interactive_fla::MainTimeline$iinit()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at BF_interactive_fla::MainTimeline/BF_interactive_fla::frame1()
any idea why?
September 4th, 2008 at 10:50 pm
Hi – I have a scroller with images in it and I want to allow the user to click on an image and call lightbox js – http://www.huddletogether.com/projects/lightbox/
I’m unable to create any traces or anything let alone call lightbox js by clicking on an image. I’ve tried making the images using textfields and the img tag – that wont work. I’ve tried making the images movieclips and attaching getURL but no joy there.
Please can someone suggest a way? I can send my fla if that helps..
September 10th, 2008 at 4:36 am
Is it possible to make TWO OR THREE scrollbars where each scrollbars would be on its on frame. I tried to make it work but with no result
I decided to e.g. duplicate the symbol (Scrollbar) to another frame and to bring it from library to stage and its on frame but it didn´t work..
Flashscaper, do you know yet how to solve this problem?
September 16th, 2008 at 8:04 pm
Great Scrollbar but I just cannot get it to work when nested in a second swf. I know several other people have had this problem and was wondering if anyone had found a solution?
September 24th, 2008 at 9:54 pm
good site whxdcz
September 26th, 2008 at 9:59 am
Is there a way to hide the scrolling bar and only use the up and down arrows?
September 29th, 2008 at 12:23 am
I use your scrollbar.
it’s work perferctly! (I’ve juste add the dynamic size of scroller)
Thanks for your job
October 8th, 2008 at 12:44 pm
Hi Flashscaper,
Great scrollbar, but I like so many others want to use it in a nested movieclip. Are there any solutions to getting it working in that regard?
October 9th, 2008 at 7:37 am
I posted the solution in the blog post “Scrollbar issue in child Movieclips”
October 9th, 2008 at 12:06 pm
Thanks, Flashscaper! I resolved most of my issues, but one remains:
When adding dynamically to the target movieclip, the scrollbar is unable to go all the way to the last item added. It stops short even when the height of the target movieclip is adjusted. Any idea why this might be? Thanks in advance.
October 15th, 2008 at 3:13 am
i’ve sussed it – didn’t add a listner! silly me. so ignore my previous post
October 23rd, 2008 at 9:33 pm
awesome stuff and nice effect! thanks for sharing the codes.
although i’ve got it working, there are 2 problems though.
1. i’ve tried to hyperlink some text but it doesn’t seem to work. any idea?
2. when the target gets too long, the bottom part of it would be cropped out. doesn’t help even adding extra paragraph breaks at the end. BUT there is a workaround. it works when i break a long text box into 2 short ones and make them into a single movieclip symbol. any real solution to this problem?
thanks a bunch!
October 26th, 2008 at 7:25 pm
Great scrollbar! Very easy to use even for a beginning developer.
Having a bit of trouble putting two instances of the bar in an app, though. I need two scroll bars for two different-sized windows, but wen I change the size of one it changes both (even with a new instance). Probably an easy work-around without changing the .as file to apply to a duplicate Scrollbar2 MC, right?
And, I would appreciate a copy of that modified file, Marshall. darla dot cameron at gmail dot com. Thanks!
November 3rd, 2008 at 2:27 pm
Hello. I am trying to load an external text file into the movie clip txt_mc but I find no way of doing so.
The code I am using is this one:
sb.init(txt_mc, “easeOutBack”,2,true,2);
var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest(“oceanRowStyle.css”);
cssLoader.addEventListener(Event.COMPLETE, cssLoaded);
cssLoader.load(cssRequest);
function cssLoaded(evt:Event):void{
var css:StyleSheet = new StyleSheet();
css.parseCSS(URLLoader(evt.target).data);
txt_mc.styleSheet = css;
//txt_mc.htmlText = pageContent;
}
var welcomeLoader:URLLoader = new URLLoader();
var welcomeRequest:URLRequest = new URLRequest(“welcome.txt”);
welcomeLoader.dataFormat = URLLoaderDataFormat.TEXT;
welcomeLoader.addEventListener(Event.COMPLETE, welcomeLoaded);
welcomeLoader.load(welcomeRequest);
function welcomeLoaded(evt:Event):void {
txt_mc.text = welcomeLoader.data;
}
I hope someone could help.
Regards, I like your scrollbar.
November 10th, 2008 at 11:00 am
Awesome scrollbar. Thanks
November 11th, 2008 at 3:30 pm
wicked little scroller!
very very very very useful indeed!!!, and works perfect with dynamic content!!
thanks so much
November 11th, 2008 at 3:57 pm
Hi Thanks for the scrollbar it is nice but I keep getting this error:
1067: Implicit coercion of a value of type Class to an unrelated type flash.display:MovieClip.
Can You Help?
November 11th, 2008 at 3:59 pm
Thanks anyway I solved it. I had the wrong instance name. LOL
November 11th, 2008 at 9:42 pm
Hi flashscraper,
thanks for the awesome scroll bar! iv had fun altering it to add a few bits of extra functionality. Its nice to finally have one out there with up and down arrows.
any chance of posting Marshall Salinger’s extra functionality?
cheers again, very impressed
November 11th, 2008 at 9:43 pm
whoops spelt your name wrong, my bad
November 19th, 2008 at 1:16 am
hi, terrific scroller from what i’m seeing on your attached files, yet I can’t get it to work.
right now i have the code nested inside the movieclip on a frame that pertains to my scroller interface and everytime i test the movie it gives me
TypeError: Error #1006: init is not a function.
at matejmatejnew2_fla::friends_7/matejmatejnew2_fla::frame22()
which does not make any sense because the “init” function works just fine inside your attached scroller. I have also copied the “caurina” and the “scrollbar.as” files into my folder where i keep my .fla and .swf files and nothing is working.
any help would be appreciated,
thanx,
Matej
November 19th, 2008 at 8:19 pm
Love the scrollbar.
ive been trying to add dynamic text within the ‘txt_mc’ movieclip itself from xml. when i do this though, the scollbar disappears from stage and the content does not scroll. the txt_mc does however resize to the scrollbar size.
is there a workaround for inputing dynamic text into this scrollbar?
thanks
November 25th, 2008 at 9:16 am
needless to say how good your scrollbar thank you to share it with us.
i have try to re-create the entire file following step by step your example but the scrollbar isn’t working . Still getting the message:
1120: Access of undefined property sb.
December 11th, 2008 at 1:52 pm
Hey there, great script. I’m with mark on this one though. Feeding in dynamic data from XML or a swfobject var prevents the script from reading the amount of data scrollable. I’ve tried everything, and still haven’t figured out what the issue is. Hopefully you can find some time to look into that!
December 18th, 2008 at 9:59 pm
Great scroll bar, thanks. Question… is there an easy way to add roll over links to the text? I’m also having a problem with the text justifying left (instead of fully justified) when I add a basic link to the text. Should the text box be converted to dynamic text? If so, what code needs to be changed? Thanks again…great work.
December 31st, 2008 at 12:32 am
Hello is thank you for this scrollbar I shall want to know how modified the height and the width of the mask I do not arrive has to understand(include) thank you for all!!
January 6th, 2009 at 8:10 am
Thanks so much!
January 22nd, 2009 at 8:38 pm
Hey I was trying to adapt this scroller to be independent of screen size, meaning I have it stretch… well sort of. I was able to stretch the mask so my content would be visible bit I’m having trouble stretching the limits of the bar.
Here is the part i changed.
var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0, 0, stage.stageWidth – 40, stage.stageHeight – 58);
parent.addChild(square);
target.mask = square;
stage.addEventListener(Event.RESIZE, stretchMask);
function stretchMask(e:Event):void
{
square.height = stage.stageHeight – 58;
square.width = stage.stageWidth – 30;
square.x = 10;
square.y = 48
}
}
here is the part that needs changing to stretch the scroll bars limits
upArrowHt = upArrow.height;
downArrowHt = downArrow.height;
if (isArrow) {
top = scroller.y;
dragBot = (scroller.y + (stage.stageHeight – 58)) – scroller.height;
bottom = (stage.stageHeight) – (scroller.height/sBuffer);
} else {
top = scroller.y;
dragBot = (scroller.y + (stage.stageHeight – 58)) – scroller.height;
bottom = (stage.stageHeight -58) – (scroller.height/sBuffer);
upArrowHt = 0;
downArrowHt = 0;
removeChild(upArrow);
removeChild(downArrow);
}
thanks
February 26th, 2009 at 8:39 am
Great scroller Flashscaper! I’ve found it to be very adaptable. I was wondering if Marshall is still listening to these comments and could send me the complete version of his code for the track? (trevor at madfatter dot com) or are there any plans to add it to the source download? Thanks!
February 27th, 2009 at 6:48 pm
hello,
for my project i’am this error :
TypeError: Error #1009: Il est impossible d’accéder à la propriété ou à la méthode d’une référence d’objet nul.
at Scrollbar()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at Container()
at Main/addContainer()
at Main()
TypeError: Error #1009: Il est impossible d’accéder à la propriété ou à la méthode d’une référence d’objet nul.
at Container()
at Main/addContainer()
at Main()
February 27th, 2009 at 8:13 pm
I found the TypeError: Error #1009
.
It’s because I have a main class and the object stage should be added to the list of events on the other class, so Scrollbar. (Sorry for the grammar I’m not English)
Here is the update :
Scrollbar.as
public function Scrollbar():void {
scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
this.addEventListener(Event.ADDED_TO_STAGE, addStage);
}
private function addStage(event:Event)
{
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);
}
Thank you for this class
March 2nd, 2009 at 7:49 pm
I get the TypeError: Error #1006: init is not a function error too – no one has talked about this error. What does this mean?
March 18th, 2009 at 8:28 pm
hi i implemented this scroller and when iam loading this movie into another movie iam getting the below error .please solve it
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at
flash.display::MovieClip$iinit()
at wireless_fla::MainTimeline$iinit()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at wireless_fla::MainTimeline/wireless_fla::frame1()
March 20th, 2009 at 6:03 pm
hi, i tryed to changed the code so i can scroll a horizontal movieclip, but im getting crashed evrytime ..i hope its just a change from y to x, i hope some 1 to find who can do it for me.
greets
March 29th, 2009 at 8:58 am
Hi everybody, I just would like to share a solution i got about “TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar/stopScroll()”.
I was having that message after i changed my player version from 9 to 10. What I did to disappear with this error, was to use the code “stage.removeEventListener(MouseEvent.MOUSE_UP, sb.stopScroll);” right after you quit the frame with the scroll.
Flashscaper, congratulations about the scroller.
April 10th, 2009 at 3:11 pm
If you’re getting the 1006 error, try changing the Linkage of the Scrollbar MC to Class:Scrollbar.
April 11th, 2009 at 10:30 pm
Hi,
Did anyone successfully implement the scrollTo(y) function to this scroll bar?
I could do partial work but didn’t work so precisely.
I want to send a child movieClip’s instance name to scrollTo function -
scrollTo(item5_mc)
and the scrollbar should scroll to show item5_mc on the top in the target mc.
Is that possible? Any help would be appreciated.
Thanks
April 14th, 2009 at 11:18 pm
Hi Bamiboef,
I’m in the same boat, if you (or anyone) knows of any horizontal scrolling/scrollbar movieClip tutorials it would be greatly appreciated.
Cheers
Marc.
May 6th, 2009 at 3:25 pm
I’am having the error 1056 problem when loading into another swf, meaning I have a main swf which loads several swfs, one of them has the scrollbar when testing this one alone it works just fine, when i test the main swf and load the one with the scrollbar it gets this error.. I have already looked for a solution. but no good. I read it is related to the option “automatically declare stage instances” in my main swf i can´t leave this option checked but this is the only way the sb works. Any help?
June 1st, 2009 at 7:51 am
I was wondering if anyone had the extra code that Marshal posted a while back??
if so can someone email it to me,
michael.bianchi [at] live.com
Thanks
June 2nd, 2009 at 1:44 pm
This is such a time saver! Thank you for sharing.
June 5th, 2009 at 8:34 am
Hello, how do I call this from document class method instead of timeline?
thanks
June 12th, 2009 at 3:29 am
Hi,
Great Scroller!
One thing that I would like to change, is the length of the text. It ‘fades out’ to quickly, how can I change that?
Thanks!
June 16th, 2009 at 12:22 am
[...] momento a utilizar outra classe, mais fácil de usar do que a anterior e que pode ser encontrada aqui (e que é vivamente aconselhada por nós caso venham a [...]
June 25th, 2009 at 12:54 pm
I’m having some trouble when target.height gets very high ( >3000) Then it won’t scroll all the way down..
Is there any limitations on that or can I adjust it somehow? Great stuff btw!!
July 14th, 2009 at 6:39 am
IF you want to use this scroller with a large amount of content, I found that adding the following code stopped the scroller clipping the bottom of the content:
public function startScroll():void {
ratio = (target.height – range)/(range*0.92);
sPos = (scroller.y * ratio)-ctrl;
Tweener.addTween(target, {y:-sPos, time:timing, transition:trans});
}
July 22nd, 2009 at 12:52 am
Hi,
I am successfully imported htmlText from an external file, but the hyperlinks do not work. Any ideas as to how i can get this working…much appreciated.
Great work by the way, thanks for sharing.
July 22nd, 2009 at 1:26 am
Ok,
I tried to put in a hyperlink directly without loading from external file, guess what, it works.
But if i load the hyperlink from an external file, it doesn’t.
Does it have something to do with event.target.data and its contentType? Let me know if there is a way to resolve this…thanks
July 22nd, 2009 at 1:28 am
forget it…there was an error in my html file…damn it…
thanks anyways, its working now.
July 22nd, 2009 at 2:45 am
guess what,
it still doesn’t work. Tried to put two images in the external file and that breaks the hyperlink. Any ideas,
No News Is Boring
Mauris posuere iaculis lectus. Maecenas fringilla viverra libero. Aenean adipiscing massa non orci.
Etiam quis lacus sed pede porttitor dignissim.
Do you like Flash Devils?
Nullam malesuada leo et turpis tincidunt eleifend.
Proin non eros et mauris suscipit fringilla.
In hac habitasse platea dictumst. Maecenas varius.
Duis ipsum nibh, varius a, aliquet nec, ornare ac, diam. Nam sollicitudin bibendum elit.
Sed pellentesque tincidunt mi.
posted by – Meta Vurt – 1.22.2006
No News Is Boring
Mauris posuere iaculis lectus. Maecenas fringilla viverra libero. Aenean adipiscing massa non orci.
Etiam quis lacus sed pede porttitor dignissim.
Do you like Flash Devils?
Nullam malesuada leo et turpis tincidunt eleifend.
Proin non eros et mauris suscipit fringilla.
In hac habitasse platea dictumst. Maecenas varius.
Duis ipsum nibh, varius a, aliquet nec, ornare ac, diam. Nam sollicitudin bibendum elit.
Sed pellentesque tincidunt mi.
posted by – Meta Vurt – 1.22.2006
July 22nd, 2009 at 2:46 am
hmm…thought so, the html tags won’t work…plz help me to figure out how this is supposed to work.
Thanks
July 28th, 2009 at 10:39 am
Ok man, great job!
I have made a scroll class too. Verify in http://blog.ramonfritsch.com/t/scroll
cheers
August 11th, 2009 at 7:03 am
Hi, I’ve tried to put the scrollbar on an external swf, and it didnt work. If I play it directly on the external swf, it works just fine. However if I load this external swf from main swf, it just doesnt work. Anyone know, what might goes wrong? Im guessing that I might have a public function that have the same name as the one on the scrollbar.as … however I cant find any. Any suggestion?
I love the scrollbar anyway, love the work!!
Thanks
August 27th, 2009 at 12:20 am
Hi, I’m always getting the following error:
———–
ReferenceError: Error #1056: Cannot create property track on Scrollbar.
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at Scrollbar()
———–
The scrollbar init-line is in a mc that’s placed on the stage – any ideas?
thanx in advance
Sebastian
August 27th, 2009 at 1:12 pm
hi Flashscaper
thanks for the great demo of the scrollbar. i’m new to flash and i just can’t seem to be able to copy it to my file. the first page works but if i use the scrollbar for another page it wouldn’t work.
would be nice if you could tell me how to.
thanks
August 30th, 2009 at 3:03 pm
I thought I wasnt going to like this blog but more I read the more I liked it.
September 12th, 2009 at 6:53 pm
FOR ANYONE WHO WANTS THE CODE MARSHALL POSTED:
I modified what he posted slightly, and got it functional.
Just add this code into your script in the proper places, and you will have the functionality to click the track and scroll.
private var track:MovieClip;
private var trackY:Number = 0;
private var trackIsDown:Boolean;
track.addEventListener(MouseEvent.MOUSE_DOWN, downTrackScroll);
track.addEventListener(MouseEvent.MOUSE_UP, upTrackScroll);
track.addEventListener(Event.ENTER_FRAME, trackScroll);
private function trackScroll(event:Event):void {
if (trackIsDown) {
var half:uint = dragHandleMC.height * 0.5;
var scrollerBottom:int = (dragHandleMC.height + dragHandleMC.y) + 2;
var scrollerTop:int = dragHandleMC.y – 2;
if (trackY >= scrollerBottom) {
isDown = true;
} else if (trackY <= scrollerTop) {
isUp = true;
} else {
trackIsDown = false;
isUp = false;
isDown = false;
}
}
}
private function downTrackScroll(event:MouseEvent):void {
trackIsDown = true;
trackY = event.localY;
}
private function upTrackScroll(event:MouseEvent):void {
trackIsDown = false;
}
September 12th, 2009 at 6:55 pm
REPOST (This code will work in with the instance names in this script)
FOR ANYONE WHO WANTS THE CODE MARSHALL POSTED:
I modified what he posted slightly, and got it functional.
Just add this code into your script in the proper places, and you will have the functionality to click the track and scroll.
private var track:MovieClip;
private var trackY:Number = 0;
private var trackIsDown:Boolean;
track.addEventListener(MouseEvent.MOUSE_DOWN, downTrackScroll);
track.addEventListener(MouseEvent.MOUSE_UP, upTrackScroll);
track.addEventListener(Event.ENTER_FRAME, trackScroll);
private function trackScroll(event:Event):void {
if (trackIsDown) {
var half:uint = scroller.height * 0.5;
var scrollerBottom:int = (scroller.height + scroller.y) + 2;
var scrollerTop:int = scroller.y – 2;
if (trackY >= scroller) {
isDown = true;
} else if (trackY <= scrollerTop) {
isUp = true;
} else {
trackIsDown = false;
isUp = false;
isDown = false;
}
}
}
private function downTrackScroll(event:MouseEvent):void {
trackIsDown = true;
trackY = event.localY;
}
private function upTrackScroll(event:MouseEvent):void {
trackIsDown = false;
}
September 16th, 2009 at 1:52 am
great work! its the best as3 scrollbar you can find. its a little bit buggy when you scroll big content, but its a good basis if you want to develop your own scrollbar.
September 24th, 2009 at 4:28 pm
I feel like a dum dum. Can someone post an example of how to change the mask size of the box ? Viewing area ? Making it wider or taller. It doesn’t seem to work for me by simply making adjustments on the mc timeline
October 19th, 2009 at 4:57 am
Hi there, u solved my great problem i made my whole web on flash cs4 ac 3.0, thanks…
October 26th, 2009 at 2:50 pm
Hey thanks for this scroller! I am having one issue though. Everything works fine when the scroller is alone in it’s own SWF, but once I load it externally into my master SWF I get this error:
//——————————————-//
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Scrollbar()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at home_fla::mc_scrollText_1()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at home_fla::MainTimeline()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at home_fla::mc_scrollText_1/frame1()
//——————————————//
Could/would you provide any help with this? I would very much like to use your scroller so any help would be AWESOME! Thanks!
November 23rd, 2009 at 2:55 am
ummmm, I will try to use this code
December 4th, 2009 at 1:28 am
I’m in the same boat as MarcB & Bamiboef
Please – anyone have any ideas about getting this scrollbar to move horizontally?
I’m going to try and set it to run that way myself, and will keep you guys posted if I can sort it myself.
Thanks.
B3NWHY
December 17th, 2009 at 2:04 am
hi
nice one
can we make that scroller as vertical??
December 17th, 2009 at 2:08 am
Apologies for my bad English.
sorry i want that scroll to be work horizontal instead of vertical directions.
January 8th, 2010 at 8:24 am
This is a great scroller and I wanted to contribute my little bit.
I was also having a lot of trouble getting “txt_mc” to display as more than the original “little window”. It took me about an hour to figure out what to do.
This is what worked for me:
1. open the new, wider version of “txt_mc” and align it LEFT (to the stage).
2. then go back to the main timeline and adjust the text layer to the left.
Hope this is helpful.
January 9th, 2010 at 2:28 pm
Hi,
Fantastic scrollbar. So easy to use.
I’m making the scroll area quite small, and I would like to make it so that the arrows cause it to scroll much less distance (decrease there sensitivity).
Is there somewhere in the code where I could do this?
January 9th, 2010 at 2:30 pm
Totally JUST figured it out:
edited line 80 (arrowMove = 10;) to a lower number.
January 12th, 2010 at 3:08 am
Your scrollbar rocks ! Thank you for sharing this
February 2nd, 2010 at 12:12 pm
Did anyone figure out a way to make the scroller move to a particular y position? I’m writing an MP3 player, and I would like it to move down a certain amount (or to a certain coordinate) when the “next” button is pressed.
Thanks!
February 3rd, 2010 at 8:59 am
Just to note, for usability purposes, the following code needs to be added after the first line of ActionScript in the .fla:
sb.upArrow.buttonMode = true;
sb.scroller.buttonMode = true;
sb.downArrow.buttonMode = true;
This makes the cursor change to a hand when it hovers over the various scrollbar elements.
It’s a simple way of making a MC appear to work as a button. And it certainly makes the user happy as well, as it is the way they’re used to buttons “behaving”.
February 5th, 2010 at 5:53 pm
doesnt work. i tryed to import txt instead of having the text in the txt_mc but it doesnt work. shit, allways this half done things. i am looking for a new scroller. i dont have time to serach for some hidden numbers somewhere…
February 11th, 2010 at 12:37 pm
WONDERFUL! Thank you so much.
With this technique I am able to dynamically feed the text box behind the movieClip with html text that is formatted with an external CSS style sheet.
I do have a couple little bugs to work out. I want the scroller to go “home” to the top when the dynamic text is refreshed. I’d also like it if the scroller was only there when the content of the movieClip was longer than the length of the scroller (like a TextArea component.)
You’re the best! Thanks again.
February 12th, 2010 at 8:00 am
By adding a public “resetsb” function in your AS file that returns the scroller to the top and a command in the host movie to return the target movie to its original position, I have my “home” function when I feed new dynamic content to the target movieClip.
February 12th, 2010 at 10:23 am
PLEASE HELP!! Anyone who can point me in the right direction to help solve this will make my day
I added the scroller to a page where I have a wide text area and it cuts the text in half, as if there were an invisible mask present.. (I got it to work great on my first page, where the text column was quite narrow.) I have read through this forum several times, tried left aligning everything, setting x and y to 0, but can’t find the solution. Are there some hidden parameters for the “scrollable” size somewhere??
I have made a mc of my text but using other names like “left_mc” which of course I have adapted in the script too, and it scrolls the text, but as I say, it’s chopped.
What might I be doing wrong?
Thanks!
February 23rd, 2010 at 6:13 pm
Hello there,
Amazing Script, thank you so much for posting…
So I am using it in my website where it is used several times each time associated with symbols all labeled text_mc , and it works fine except after a short while of clicking between the buttons the text area turns bright red!!!
’
is this weird or am I just completely clueless??
Can someone please help me out
Thanks in advance!
Alex
February 28th, 2010 at 1:25 pm
[...] Çok kullanışlı bir MovieClip ScrolBar klası. İçinde Caurina gömülü, dolayısıyla tween efektli. FlashScapes [...]
March 3rd, 2010 at 7:34 am
[...] Posted by tim in as3, oop, optimization. Leave a Comment Here’s a quick rewrite of a fun little basic scrollbar class written by Flashscaper. [...]
March 16th, 2010 at 9:47 am
Thank you very much Flashscaper for this fantastic scrollbar. Thanks also to Leif Ilvedson for the tip to reset the text back up again.
I was having the same problem as Alexandra because I was calling the class every time I changed the dynamic text inside my clip, but in fact you only need to call the class one time, if you change the text, the size automatically readjusts. Thanks again…
March 23rd, 2010 at 11:02 pm
Hi there
Your scrollbar component is awesome, but I’m having an issue where I have 2 frames, each frame has its own text field and scrollbar. The problem is that on the 2nd frame the text disappears. If I comment out the AS on the 2nd frame the text appears, but then obviously the scrollbar doesn’t work. Any idea what could be causing this?
Thanks
Alessandro
April 6th, 2010 at 5:26 am
Hi
The scrollbar is great, but I’m having a slight issue when I try use it on different frames. It works on the first frame, but hides all the text on all the other frames. I know I couple of people have said the same thing, but I don’t see any answers to the problem.
April 6th, 2010 at 9:21 pm
This was a Great write up, I will bookmark this in my Digg account. Have a good day.
May 4th, 2010 at 5:33 am
ReferenceError: Error #1056: Cannot create property track on Scrollbar.
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at Scrollbar$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at content_fla::MainTimeline$iinit()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at content_fla::MainTimeline/content_fla::frame1()
May 4th, 2010 at 5:35 am
When ever I switched to flash player it show me this error
ReferenceError: Error #1056: Cannot create property track on Scrollbar.
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at Scrollbar$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at content_fla::MainTimeline$iinit()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at content_fla::MainTimeline/content_fla::frame1()
help need…
thanks in advanced!
May 13th, 2010 at 10:39 pm
Hey,
so im trying to apply the scroll bar to two separate movie clips with separate content but no matter what i do the second one always screws up with the first one and if i line up the second one, the first one becomes screwed up
can you help?
May 24th, 2010 at 5:56 pm
Hey guys, I ran into an issue: I have a swf file that is a loadee from a loader “index.swf”.
The scrollbar wont work on the loadee because it sb.init looks for stage for listening to somemouse events. So what I did was exchange ‘stage’ to ‘this’. So it works in both cases.
Just to let you know
June 7th, 2010 at 10:41 pm
thnks a lot:-)
June 9th, 2010 at 8:15 am
I love this wonderful little scrollbar, but I am experiencing one significant problem… When the user clicks to drag the scroller it jumps to the left about 10 pixels so it drags along the side of the track instead of down the center. I checked the as file and didn’t see anywhere where I could change a setting for it I was guessing it was something in the startscroll(); or dragscroll(); function. I’m clueless here, help! (Thanks)
June 9th, 2010 at 9:08 am
So I will contribute my findings in hope of an answer to the above mentioned scroller issue. I managed to get my wondows size wider by changing line 93 in the Scrollbar.as file.
square.graphics.drawRect(target.x, target.y, target.width+200, (track.height+upArrowHt+downArrowHt));
I changed the target.width+
until everything looked right.
Also to make the window taller, I added some height onto the downArrow movie clip. It is calculating the height by adding the track and arrows, so just make one of those clips taller.
I also had the same prob as Amos, with the 1006 error code. You have to attach the Scrollbar.as file. Select the scrollbar movieclip in your library. Click on the info button, click on advanced, and click the export for actionscript checkbox. Add Scrollbar.as or just Scrollbar in the class field.
June 19th, 2010 at 2:06 am
Hi there!
Great scrollbar!!!
One question though.
How do you prepare this scrollbar for garbage collection. You’re adding several listeners in your class – does this mean that they will remain open once you for example unload a loaded swf containing the scroller?
Niklas
June 27th, 2010 at 10:51 pm
Hey, great scollbar! Just a question if anyone can help. I thought it might be good if the scroller (thumb) height would adjust according to the amount of content in relation to the mask. It would be like the scroller thumb’s height on your browsers scrollbar which adjusts according to the height of the website. How would I go about doing this? Thanks.
June 27th, 2010 at 11:29 pm
sorry false alarm. I just figured it out. To do this, add the following line in the init function right after the key vars are defined:
scroller.height = track.height*(track.height/target.height);
June 28th, 2010 at 10:01 am
The code Marshall posted didn’t work for me, so I rewrote it and it works. its a little simpler as well. I am using this in a movieclip I removed all “public/private”.
track.addEventListener(MouseEvent.MOUSE_DOWN, trackScroll);
function trackScroll(event:Event):void {
if (mouseY top) {
scroller.y = mouseY;
if (scroller.y (scroller.y + scroller.height)) {
if (scroller.y dragBot) {
scroller.y = dragBot;
}
startScroll();
}
}
}
June 28th, 2010 at 10:06 am
I think I know why Marshalls code didn’t work. This blog removes code between the “less than” and “greater than” characters. If anyone wants the code, feel free to PM me (MadDog-555) on Ultrashock.com.
June 28th, 2010 at 10:11 am
My version of marshalls scroll track code:
Replace [greaterThan] and [lessThan] with their respective characters as this blog removes code between these characters.
function trackScroll(event:Event):void {
if (mouseY [lessThan] scroller.y) {
if (scroller.y [greaterThan] top) {
scroller.y = mouseY;
if (scroller.y [lessThan] top) {
scroller.y = top;
}
startScroll();
}
}
if (mouseY [greaterThan] (scroller.y + scroller.height)) {
if (scroller.y [lessThan] dragBot) {
scroller.y = mouseY – scroller.height;
if (scroller.y [greaterThan] dragBot) {
scroller.y = dragBot;
}
startScroll();
}
}
}
June 28th, 2010 at 10:40 am
I am trying to find a way to add a slight motion blur to txt_mc as I scroll. Any ideas?
June 29th, 2010 at 10:54 pm
Great work, I was also able to learn from this not just use it. Thanks
July 19th, 2010 at 9:49 pm
# Austin Says:
June 27th, 2010 at 11:29 pm
sorry false alarm. I just figured it out. To do this, add the following line in the init function right after the key vars are defined:
scroller.height = track.height*(track.height/target.height);
Sorry wot do you mean by “after the key vars are defined”? Cld you post the full code? Thanks a million.
July 19th, 2010 at 10:06 pm
My text are not being masked properly. The text extends beyond the box. How should I go about masking it properly? Thanks a lot.
July 24th, 2010 at 7:49 am
Does anyone know how I can put a 2nd scroll bar on another frame? I tried giving the 2nd txt content and scroll bar different names. But somehow the 2nd scrollbar doesnt seem to work. Help!