Create a Fully Customizable Scrollbar in Flash
In this tutorial you’ll learn how to create a customizable scrollbar in Flash. The scrollbar will move targeted assets from left to right smoothly and would integrate well with a simple image gallery. Shane uses Flash CS4 but the technique is also compatible with CS3.
Preview
View Screencast
Get the Flash Player to see this player.
Tags: Videos
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Shane Johnson
Originally from a fine art background, it took me a while to get in to the world of digital media, but now that I have, Flash has become my tool of choice. I currently work as a freelance flash designer developer, amongst other things, and strive to create engaging and creative applications for the web.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice!! ;)
First!!!! :D
Where to see this video Online….
No Blip.tv for Flashtuts!
What happened? :(
Most annoying user on tutsplus.. ever..
thanks pou!
great tutorial !
and I want you icon set ! :D
your*
add easing?
Excactly what i was looking for. Thanks! ;)
second
Magnífico!!!
Segundo!!!
;)
Nice Tut.
Argh Second :(
Nice tutorial !
Thanks Shane.
You should probably add an event listener for MOUSE_LEAVE (or possibly MOUSE_UP) on the stage so if you release the mouse outside the flash area, the scrollbar won’t be stuck to the x coord of the mouse cursor.
Otherwise, decent tut.
l this..
private function drag(e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
Nice tutorial !
Thanks shane, hope to see more coming !
How do add easing effects with this scroll bar?
its good bubby.
can i show some first five lines in my site linking/redirect to your full tutorial page.i like to spread the word, i already tweet this.and cos , i cant clearly understand this:
Copyright & Usage: :) -> You cannot copy whole tutorials, either in English or translated to another language
can i , i need your permission., cos i dont want to ruin anything. i like this site.
reply me, or any one outside-can we do like this, i have seen many blog tping some text and linkng to the original site. so i also like to spread the word.
You neglected to include an AS3 alternative for the AS2 [b]onReleaseOutside[/b]!!
Otherwise, nicely done.
I hope I can find some time to create some tutorials, because this is my area of expertise.
A scrollbar! There’s a lot of tuts of scrollbars, but this one is with a perfect design. Congratulations!
Very clean and simple. Great tut!
Nice, but you need to add the MOUSE_UP listener to the stage, not to the scrollbar itself. Some easing would also be nice. Nice tut though :)
I see that one of the images were removed from the final product that was in the movie… hahaha. This is a great tutorial – I’m excited to be learning Flash!
Pretty Cool.
Slow tut…
Still nice…but slow
Could you guys offer a text tut, or low quality tut…not all of us have speeds capable of streaming 258MB Video files..
Otherwise a fantastic quality tut…shame I need to wait so long to do it..[approx 45-50 mins..]
Me too! ;)
There is no easing, why ?
With a tweening engine you could really enhance the “smoothness” of the scroll.
you can actually FULLY costumize the built in components for action script 3 – very easy just dubble click on them and change the graphics
great tut keep up the great work!!!
Please next time include the FLA for download. Yeah, little improvement could be done like easing and mouse up function that limits the contril within the scrollbar.
Great tut.
thanx alot mate.
now u’r getting serious guys :) … keep up
anyone any idea what would need to be added/changed for easing with TweenMax, please?
good tutorial !!!
Thanks in advance…
Hey guys,
First of all, thanks for the great comments. This was my first ever video tutorial so there are def a few things I will do a but differently next time and with regards to the MOUSE_LEAVE listener, true could of been done and very easy to implement. As for the easing and in reply to noonoo, in the moveBox – enter_frame function you would change the script I have put to:
TweenMax.to(scrollingContent, 1, {x: -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width))});
You could then apply any easing that you wish, to the TweenMax tween.
Thanks and happy Flashing! ;-)
Shane
Thanks so much Shane.
why i can’t watch full tutorial. i just can watch less than 30s…
Nice tut, 2Bad it doesn’t work with the scrollwheel.
ty!
I’m getting a few errors in my compiler “1013:The private attribute may be used only on class property definitions.”
any ideas? – bit of a novice/intermediate, but i promise I’ve looked through my code for spelling mistakes :D
not so nice bcz when u rollout the scrollbar not release
I followed this tutorial, but i get an error. im not sure what i did wrong.
it would be great if you posted the code already typed out, i was hard to follow it in the video.
other than that good video, im new to using action script’s with flash and came here to learn.
I did send the source files to Flash.tutsplus when I submitted the tute, so I’ll ask Skellie to post it here like I thought he would.
Shane
please do post the code!
the video is 258MB
plz post the code. not working here…
OK as Skellie hasn’t replied to me and Flash.tutsplus have not posted my source files here is a link to the files on my server:
http://blog.ultravisual.co.uk/sourceFiles/video_src_files.zip
Shane
You will need to have TweenMax in your library paths as I have not included it with the source and I am assuming that you guys already know how to do this, if not look it up on google. The files are also in CS3 so that all can see.
Shane
As you can now see, |Skellie has posted the source also.
Shane
When I compile the source fla in flash CS3 it gives a few errors.
‘Acces of undefined property Tweener’
‘Acces of undefined property Tweenmax’
‘Definition caurina.transitions:Tweener could not be found.’
‘Definition gs:Tweenmax coulc not be found’
Do I really need Flash CS4 to do this tutorial?
No …..but you definitely Need Tweener and TweenMax !
Great tutorial thanks
nice tutorial mine din’t move at all tho
package
(
import flash.display.MovieClip;
import flash.events.events;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class main extends MovieClip
(
)
private bound:Rectangle
private var start:X Number;
private var content:Namespace;
public function main() :void
(
)
addEventListener(event.ADDED_TO_STAGE init );
)
private function init(e:Event):void
)
removeEventListener(event.ADDED_TO_STAGE init);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = scrollHandle.x;
contentX = scrollingContent.x;
bounds = new Rectangle(scrollHandle.x. scrollHandle.y,scrollBar.width – (scrollHandle.width. +4),0);
)
private function drag(e:MouseEvent);void
(
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoandstop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
addEventListener (Event.ENTER_FRAME, movebox);
)
private function stopdrag(e:MouseEvent):void
(
scrollHandle.stopDrag();
scrollHandle.gotoandstop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener (Event.ENTER_FRAME, movebox);
)
private function moveBox(e:Event):void
(
scrollingContent.x = -1 (contentx -startX) + scrollHandle.x) * ((scrollingContent.x.width – masker.width /scrollBar.width – scrollHandle.width));
)
)
)
……………. can anyone help tell me what im doing wrong new to flash
Thanks Shane, I really enjoyed this tutorial and found watching you make mistakes and then correct them was excellent, because I learn’t from them! Would this work for the new mobile phone touch screens eg Nokia 5800 and could you use your finger to flick to next page?
Hi
laurie…..what are your error messages?
lou……thanks….errors are part of the game, you can’t type everything perfectly ;-)….with regards to the Nokia 5800 – no as the flash player on that phone is flash lite 3.0 which doesn’t support actionscript 3.0
Thanks
Shane
Actually laurie….I can see a lot of errors……
You’ve closed your class braces at the beginning, bound isn’t declared as a variable, startX is declared incorrectly, your constructor is closed so that nothing else can happen…….also you are using parenthesis () instead of braces {}……check your source against mine in the source files and see where you have gone wrong……
Shane
Thanks Shane!!
Hey I really thought that your tutorial was interesting, but it won’t work and to be honest i know sod all about flash, im currently in my second year at uni and our brief was to design a portfolio for a chosen artist/designer, and i’ve been looking at the screen for too long and i can’t tell what i’ve done wrong for my file not to work :’(. You said about tweener and tweenermax but i have no idea about any of them. I’d be really grateful if you could help, if you could dumb it down because i really am a noob when it comes to flash xD.
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class Main extends MovieClip
{
private var bounds:Rectangle;
private var startX:Number;
private var contentX:Number;
public function Main ():void
{
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e;Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = scrollHandle.x;
contentX = scrollingContent.x;
bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.width – (scrollHandle.width + 4), 0);
}
private function drag(e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, drag);
addEventListener(Event.ENTER_FRAME, movebox);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener(Event.ENTER_FRAME, moveBox);
}
private function moveBox(e:Event)void
{
scrollingContent.x = – ((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width / (scrollBar.width – scrollHandle.width));
}
}
Thank you! :)
how do you add, MOUSE_LEAVE?