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
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Shane Johnson
Facebook Graph API Development with Flash
Follow Activetuts+ editor Michael James Williams as he walks you through integrating Flash with Facebook! Learn to develop apps for the Facebook website and harness the Graph API in your external projects.
Join our newsletter!
XML Flip Book / AS3 only $30.00 
XML Photography Template V2 only $40.00 
Gughi Fassino Photojournalism - More
Active Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
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
When I tried to open flash file and test movie I get “1037: Packages cannot be nested.” and it’s not working. Can you someone tell me why it’s doing that.
I can’t make it work in flash cs4 as3.0
When I tried to open flash file and test movie I get “1037: Packages cannot be nested.” and it’s not working. Can you someone tell me why it’s doing that.
I can’t make it work in flash cs4 as3.0. The flash file that came with files working great, but when you try test flash movie without changing anything it’s not working. :(
Hey nice tut but I have a porblem
well first I have no tween
so I have´nd but it in but I get an 1114error and I dont get it??
NEED HELP thanks!!!
packege
{
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);
srollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
startX = srollHandle.x;
contentX = srollingContent.x;
bounds = new Rectangle(srollHandle.x, srollHandle.y, srollBar.width – (srollHandle.width + 4), 0);
}
private function drag(e:MotionEvent):void
{
srollHandle.startDrag(false, bounds);
srollHandle.gotoAndStop(2);
srollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
addEventListener(Event.ENTER_FRAME, moveBox);
}
private function stopdrag(e:Event):void
{
srollHandle.stopDrag();
srollHandle.gotoAndStop(1);
srollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
removeEventListener(Event.ENTER_FRAME, moveBox);
}
private function moveBox(e:Event):void
{
srollingContent.x = -((contentX – startX) + srollHandle.x) * ((srollingConten.width – masker.width) / (srollBar.width – srollHandle.width));
}
}
}
Thanks =)
IT is the “public class Main extends MovieClip” what is the problem at that thing and I cant remove it
Hi,
Really nice Tut!
however, I am trying to change it so the scroller and content is vertical instead. Have been at it for hours now, and I would appreciate some help greatly!
My code currently looks like this, but nothing happens when I test!!:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import gs.TweenMax;
public class Main extends MovieClip
{
private var bounds:Rectangle;
private var startY:Number;
private var contentY: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);
scrollBar.addEventListener(MouseEvent.CLICK, tween);
addEventListener(Event.ENTER_FRAME, moveBox);
startY = scrollHandle.y;
contentY = scrollingContent.y;
bounds = new Rectangle(scrollHandle.y, scrollHandle.x, scrollBar.length – (scrollHandle.length + 4), 0);
}
private function tween(e:MouseEvent):void
{
var mousePos:Number = mouseY;
if(mousePos > (scrollBar.y + scrollBar.length) – (scrollHandle.length + 4)){
mousePos = (scrollBar.y + scrollBar.length) – (scrollHandle.length + 4);
}
TweenMax.to(scrollHandle, 1, {y: mousePos});
}
private function drag(e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
private function moveBox(e:Event):void
{
TweenMax.to(scrollingContent, 2, {y: -((contentY – startY) + scrollHandle.y) * ((scrollingContent.length – masker.length) / (scrollBar.length – scrollHandle.length))});
//scrollingContent.x = -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width));
}
}
}
Help??
Thanks
Finally figured the vertical aspect out. Can’t believe it took me so long…must be retarded.
First, change where you have “length” to “height”.
And your line:
bounds = new Rectangle(scrollHandle.y, scrollHandle.x, scrollBar.length – (scrollHandle.length + 4), 0);
change to:
bounds = new Rectangle(scrollHandle.x, scrollHandle.y, 0, scrollBar.height – (scrollHandle.height + 4));
should run smoothly…vertically.
Also, thanx Shane for such a cool tutorial.
I liked this tutorail, but it gives me these error messages.
If I open your files in CS4, they dont run, so I am not so
sure what is happening with both of them.
I also copied the content of your MAIN.as to replace the
one I followed to make sure I did not have something typed
wrong.
1120: Access of undefined property Tweener.
1120: Access of undefined property TweenMax.
1172: Definition caurina.transitions:Tweener could not be found.
1172: Definition gs:TweenMax could not be found.
Thanks – Tim
very thanks
Yea how do you add the Mouse_Leave? Where would you put that in the code? Also, I want to use a scroll bar vertically too. Would you just change all the x’s to y’s and y’s to x’s in the code?
hey this was a really good tut, but I keep coming up with Syntax Errors, I tired to copy and paste the code from the site but I get the same errors what the?
this is my code:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class main extends MovieClip
{
private var boundsX: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.widht + 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 = -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width);
}
}
}
if anyone could help me out it would be awesome ’cause I’m going nuts over here!
hey shane. ive accidentally thought this was used with as2.0.. n now that ive completed everything(except the as),do you have any solutions for as2?
looks nice, but does not work at all ((((((((((((((
1120: Access of undefined property Tweener.
1120: Access of undefined property TweenMax.
1172: Definition caurina.transitions:Tweener could not be found.
1172: Definition gs:TweenMax could not be found.
any comments, Shane?
Yes you need to have the tweener library set up in you library path…..
Hi Shane, do you think you can tell me how to add them to the library path? I downloaded the caurina tween, but can´t fin the tweenmax. maybe you can tell me where to download it or what can I do. I`m still getting the same 1120 and 1172 than user Ol has.
Thanks much!
hello
I have a problem too.
Everything was fine until I added the code for the tween and the Listener for the Bar. Now nothing is moving anymore and I can drag the Handle all over my swf.
Can maybe someone figure out where the mistake lies?
My Compiler shows no misktakes at all only my OutPut say that something with the “init” function is wrong… and that addEventListener isn´t a function?
here´s a screenshot of my code (just ignore the german comments): https://dl.getdropbox.com/u/1619370/code-screen.jpg
and my swf: https://dl.getdropbox.com/u/1619370/ScrollingBar.swf
I am a noob trying to learn as3 – I know some baiscs but I just can´t see any problem…
on line 25 you have a typo…….
addEventListner ???
Shane
Great!!!
Hey Shane many thanks for the tutorial, it was great. i am very very new to flash but it worked fantastically! i wondered though, would it be possible to use the same code for a vertical scroll bar rather than the horizontal one?
also, i tried putting this in the center of a larger flash stage, and it won’t work, is this because the registration points on all the movieclips are on the top left?
Mr Johnson,
I really liked the tutorial. It was easy to follow and you were very clear. The problem I’m having is that I do not know how to rite code. I try to follow along with code tutorials and I’m surviving but there is so much I’m loosing out on. Do you know of any places or tutorials that can feed me code in small doses so I can improve my skills?
THANKS FOR EVERYTHING
Again….good job
Will this tutorial (code) work with AS2?
Thank you very much!
Shane :
How i going to hav a tweener library set up in you library path ?
Thanks …
Thats a great tutorial in deed, but i think it makes it too complicated when the AS is in the external file and I really can’t see what is the point of that?!? Writing the actionscript on the layer above everything will save a lot of typing and errors also it is a lot easier! This is just my point of view of course! Nice tutorial I’ve learned a lot of it! :)
so,is really that necessary to import outside tweeners?
Life is already hard to everyone who starting with OOP and people like you just don’t make that life any easier.
If this “so called” tutorial is aimed for beginners….it’s crap because is to complicated.
If is aimed for experts,there is no point because they allready know that.
So ask yourself next time:what I’m trying to do?Advertise myself,teach somebody something or just acting smart boy in my street?
Cheers!
This is by far the dumbest comment I’ve ever seen period.
Shane I need your help, I am getting these errors
1120: Access of undefined property moveBox.
Hey Shane Awesome Tut. Kudos.
I was trying to use your tutorial for a custom scrollbar for dynamic text component. Any input on how that would work. I get the gist of the scrollbar, but for dynamic text I do not believe changing the x coordinate will work.
Let me know if you have any inputs. Thanks
can someone help me with the tweeners please? =D
44 MINUTES FOR A SCROLL BAR???????
Thank you even tho I didnt manage to get it working ^^
but nice tutorial
Well I couldn’t import the tweener, actually, when I import it, it says that I must identify the property before import but I don’t know how to do it. but it doesn’t happen with the tweenmax.
http://code.google.com/p/tweener/downloads/detail?name=tweener_1_33_74_as3.zip&can=2&q=
^ download the tweener.
http://www.greensock.com/get-started-tweening/#installing
^ download and install / import the tweenmax.
Great tut, got stuck on the tween importbit, but hay-ho. liked the mix of design (effects) and script…
I have a problem when i try to calculate the scroll position if i update all the text container…
here is my code
private function updateScrollThumb():Void {
// m_scrollWidth is by default 12
var targetH:Number = m_itemContainer_mc._height;
var viewH:Number = m_scroll_mc._height – m_scrollWidth * 2;
var thumbH:Number;
var thumbY:Number;
var ratio:Number;
if(m_scroll_mc._height >= m_itemContainer_mc._height) {
thumbH = 0;
thumbY = 0;
}
else {
thumbH = (viewH * viewH) / targetH;
ratio = -m_itemContainer_mc._y / (viewH);
thumbY = (viewH – thumbH) * ratio;
}
m_scrollThumb_mc._y = thumbY + m_scrollWidth;
m_scrollThumb_mc._height = thumbH;
}
thank you for your help
I can’t stand tutorials that rely too much on look and not what matters to people that want to learn.
Thanks for the code. Had to find the whole caurina class and stuff online (which was giving me some trouble for quite some time until I finally figured it out) and for some reason the parameters that you set up for the scrollbar handle to go wouldn’t work for me (I had to change them up to make them stay within the scrollbar area). Other than that, very useful tutorial and I greatly appreciate it. :)
Very good tutorial, Well done!
really great tutorial, and thanks for scrollingFormula.
i have only 1 problem….
what if you want to scroll content as if the width is equal to width + extraSpace?
if i try setting the content width to some other number it scalesX which is not what i want.
i could add some sprite to the end with width = extraSpace but that doesn’t seem like a good sollution to me.
basically all i want is to update the forumula but really have no clue how to do it.
Great tutorial, I learned a lot, thank you! Once I got the Tweener thing worked out, everything worked perfectly. My only problem has come in trying to switch it to a vertical scroll. I switched the X+Y’s and the width+heights and everything is fine EXCEPT when I test the movie and it first comes up, no mouse even in the frame, it tweens up about the scrollHandle height, then the scrollingContent remains about a scrollHandle height too high in relation to the scrollBar.
I think it might a problem in the TweenMax statement at the bottom, but I and kind of a noob and can’t figure it out. Can anyone please help me? (Code Below)
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import caurina.transitions.Tweener;
import com.greensock.TweenMax;
public class artist extends MovieClip
{
private var bounds:Rectangle;
private var startY:Number;
private var contentY:Number;
public function artist():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);
scrollBar.addEventListener(MouseEvent.CLICK, tween);
addEventListener(Event.ENTER_FRAME, moveBox);
startY = scrollHandle.y;
contentY = scrollingContent.y;
bounds = new Rectangle(scrollHandle.x, scrollHandle.y, 0, scrollBar.height – (scrollHandle.height));
}
private function tween(e:MouseEvent):void
{
var mousePos:Number = mouseY;
if(mousePos > (scrollBar.y + scrollBar.height) – scrollHandle.height){
mousePos = (scrollBar.y + scrollBar.height) – scrollHandle.height;
}
Tweener.addTween(scrollHandle, {y: mousePos, time: 1});
}
private function drag(e:MouseEvent):void
{
scrollHandle.startDrag(false, bounds);
scrollHandle.gotoAndStop(2);
scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
addEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
private function moveBox(e:Event):void
{
TweenMax.to(scrollingContent, 2, {y: -((contentY – startY) + scrollHandle.y) * ((scrollingContent.height – masker.height) / (scrollBar.height – scrollHandle.height))});
//scrollingContent.x = -((contentX – startX) + scrollHandle.x) * ((scrollingContent.width – masker.width) / (scrollBar.width – scrollHandle.width));
}
}
}
Did anyone ever figure out how to make this work vertically? I switched all x’s to y’s and width’s to height’s. (No need to post all the code, it’s the same as the tutorial and a few of the previous posts).
Ultimately it all works except the dragging of the handle itself. It still scrolls horizontally. Weird. It seems to be in the line of code declaring the “bounds” :
bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.height – (scrollHandle.height + 2), 0);
It seems this should work, but it does not. If I delete or block comment this line of code, I then have dragging, but it drags all over the screen without limits.
Can some one please fill in what I’m missing.
Thanx
Great tutorial, detailed explained, thanx for it. I made a thumbnail buttons of this images in “scrollingContent” to start a bigger “movie image” image on top. Over the “bar”, “handle” and “mask” layer I made a “movie” layer with keyframe on each frame with label name of each movie clip that I converted from jpeg ( each movie have tween and stop(); action layer) and in main timeline (over the “bar”, “handle” and “mask” layer) I made a action layer with this command:
stop();
scrollingContent.btn1.addEventListener(MouseEvent.CLICK,play1);
function play1(event:MouseEvent):void{
gotoAndStop (“Img1″)
}
I’m a begginer in AS3 and something is going wrong with it: In output I get an error: TypeError: Error #1010: A term is undefined and has no properties.
at Main/frame1()
Where is problem?
Hi,
I’ve followed the tutorial. When testing at the end it works fine until I let go of the mouse, then I cant scroll again. Have I missed something?
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, stopdrag);
addEventListener(Event.ENTER_FRAME, moveBox);
}
private function stopdrag(e:MouseEvent):void
{
scrollHandle.stopDrag();
scrollHandle.gotoAndStop(1);
scrollHandle.removeEventListener(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));
}
}
}