I just finished uploading a new tutorial to gotoAndLearn() which shows you how to create a smooth-scrolling scrollbar prototype on the timeline. This is part one of a two-part series. The next tutorial will take this timeline prototype and abstract it into several ActionScript 3 classes. This type of animated scroll behavior is very popular on Flash sites nowadays and is a good tool to have in your arsenal.
Enjoy the tutorial!
Lee
Good video, thanks, one more tool for my collection, thanks Lee. Best Regards!!
Great new tutorial, lee, can´t wait for the second part.
Best tutorial ever!
Nice to see how you can do this in 30 and all of this type of scrolls i saw, allways have like 100 ehehe
Thanks!
Great tutorial as usual Lee – looking forward to part two!
Hi There, Thank you for all your great tutorials lee.
but in this one why you are not using startDrag?
hey! that was smooth! no more 5 fps tutorials.
looking forward to part 2!!
startDrag is imo deprecated for the usage in scrollbars, it often can cause hick ups if you use the mouse too fast, or whatever reasons (at least thats my humble experience)
Also due to the tweener class you can set up the time and easing method so that creates this wide range of ways to make this work in a dedicated project.
The scrollbar isn’t so hard to make, even in oop,
but what is very nice to see is how this example has been coded, 30 lines. Now that alone is a standout achievement imo.
very nice Lee!
Grate tutorial Lee. I have a suggestion for the second part of this tutorial. Whay don’t you build scrollBar component in this way you could make 2 tutorials in one and it will be much easer to drag a scrollBar for the component panel and see its content to a movieClip on the stage.
@Guro:
It’s seems that you didn’t watch the tutorial, Lee mentioned because startDrag don’t have the updateEvent
I know you mentioned it earlier in this tuturiol, but I wonder if you can make it as 3 part tutorial where the third part is about loading the dynamic content (text or graphic) within content movieclip?
Thanks a lot for usual great generousity.
Cool tutorial. Bring on the next one
@Guro: He explains why he doesn’t use startDrag() in the tutorial.
Like guro i’ll said : Why not use a startDrag() on the mouse_down event ? With a bounder you don’t have to make all those conditions in the thumbMove function ^^.
great tutorial
I love it. I am waiting for the next part.
thank you very much for everything.
Hi,
. Nice one, and I think Lees drag solution spits out more accurate Numbers, you read some weird things about the drag class.
you should have done this a lot sooner! Scrollbars almost brought me to stop scripting
Great tutorial. I’d love to see this expanded with mouse wheel scrolling ability!
Just to recap on why not to use startDrag(). The AS3 implementation does not use updateAfterEvent so the behavior is very sluggish. It was something that I first read about in the ActionScript 3.0 Cookbook. You should avoid using this method.
wasup lee
love this tutorial, im learning about AS so basically im a newbie at all this but im learning quick so i hope to see part2 soon. thanks alot Lee, im really owning you all i knwo about AS. you the best
not working for me :\ flash dont recognise import caurina.transitions.*; code line . what can i do to fix it ?
Hello Lee, thanks for this great tutorial. And I’ve add a “MOUSE_WHEEL” event:
stage.addEventListener(MouseEvent.MOUSE_WHEEL, rodaMouse);
function rodaMouse(gira:MouseEvent):void {
sb.thumb.y -= gira.delta * 6;
if (sb.thumb.y = yMax) {
sb.thumb.y = yMax;
}
var sp:Number = sb.thumb.y / yMax;
Tweener.addTween(content, {y:(-sp*(content.height-masker.height)), time:1});
gira.updateAfterEvent();
}
Just add this action….
But I have problem to see the swf file. When I decompile inside the flash cs3, they works fine, very fine. And when I open the swf file, they dont work. I add the class caurina to the same folder of .fla file, and set the path class to in the publish setings. But my swf only works inside the flash cs3. I think the flash dont recognise to the caurina.transitions.
Help please…
And thanks in advance
I dont know why but when I publish my swf file they works…But in my local machine not…
Anyway…if you want to see my swf and fla file here is:
http://www.spdez.com.br/daniel/scroll.swf
http://www.spdez.com.br/daniel/scroll.zip
hi i did the tutorial, but it didnt work i kept keeping the same error codes
1084: Syntax error: expecting identifier before leftbrace.
1084: Syntax error: expecting rightparen before leftbrace.
1084: Syntax error: expecting rightbrace before leftbrace.
1083: Syntax error: rightparen is unexpected.
and its talking about this line
Tweener.addTween(content. {y:(-sp*content.height-masker .height)).
can anybody please help me out?
i would verry appriciate it!
{y:(-sp*content.height-masker .height)).
I think the problem is the “.”:
See: …height)).
I think the correct is:
…height)),
Tweener.addTween(content, {y:(-sp*(content.height-masker.height)), time:1});
Hi there, I have done everthing like you said in the video but my scrollbar wont work and than I have downloaded all sample files and again same problem hapend. Do yu know what is the problem, thanks
Daniel,
Thanks for posting the correct code. I copy/pasted it and compared the two. I tried ‘everything’ before seeing your post. Lee’s tutorial is great but the QT resolution on my computer cannot tell a period from a comma.
Also, an earlier problem taught me to change the Publish Settings to output to AS 3, even though I had chosen to create a the file as an AS 3.
Kindest Regards
Hi, can anybody help me? I have this compiler errors:
Line: 1 1172: Definition caurina.transitions could not be found.
Line:29 1120: Access of undefined property Tweener.
Thanks
Hello Geo,
You have the Tweener class?
if you dont here is the link:
http://code.google.com/p/tweener/
Just install and set path to class. If still not working try copy a caurina folder to the same folder of your fla…
Stanko, try to publish in a web site your swf file. I dont know why but to me works inside the flash CS3 or inside a published web site…
Great tutorial. Only problem I’m having is that the scrollbar pulls the clip in about 100 px too far on the right, then cuts off the left edge by the same amount when pulled back to the left. It seems like the width (on a horizontal version) of the “content” clip isn’t being calculated right. I tried several variations, including sticking with a vertical scroll and copying and pasting the tutorial AS as is, and I get the same problem. I’ve made sure the sb and masker are the same height(vertical)/width(hor), etc. Anyone else come across this, or know if there’s a fundamental error I’m making that would cause this? Thanks.
Hy, can you post a fla file? Maybe could be a registration point…
Hi there! Great tutorial, but I like others am getting the error:
1120: Access of undefined property Tweener.
Aaaw… I can`t see the video
when i open the link it says:
Page Not Found!
Hello Simon, you need a Tweener Class.
http://code.google.com/p/tweener/
Then compile again
Hi! Love your scrollbar. Do you have any tutorials for a horizontal one or is there a simple tweak I could do to the vertical to make it scroll vertically?
Thanks!
Hey lee small problem when i click on the link above its saying server error.
Lee, thanks for another great tutorial! I have gone through a number of scrollbar tutorials which were much more complicated but did not even achieve what you have accomplished in these 32 lines of code. Nice job.
[Note: the link to this tutorial is wrong. It should point to http://www.gotoandlearn.com/play?id=71.
Best!
Hi!
Thank you very match for tutorial.
It is amazing.
But some thing is not working.
your SWF file working perfect.
But when I publish my swf file don’t work.
I did it in CS3 & CS4 with 2 & 3 screepting.
Can enybody Help.
Thank you very match.