AS3 Scrollbar component for MovieClip
Posted by: Yogesh Puri on: September 15, 2008
Here is a ScrollBar component class. The class takes a movieClip as a parameter and then attach the scrollbar to it. Following is the snapshot of same
Scrollbar component
You can download the sources from here
24 Responses to "AS3 Scrollbar component for MovieClip"
November 12, 2008 at 11:55 am
Thx, but it needed a few tweaks before i ´ve used it 
Best regards
January 5, 2009 at 9:37 am
Thank you for this!
Works perfect and very easy to apply, nice work!
January 8, 2009 at 11:29 pm
which thing do i adjust so that i can adjust the height of the scrolling area? i cant seem to figure it out. i know anything in the textMC clip will adjust the overall scrolling areas width, but the height, i cant find where to change it, thanks for this easy item..
January 14, 2009 at 10:51 pm
This works great. Thank you!
I would also like to know how you set the height of the area that you want to scroll. I assume it has to do with the mask but I haven’t figured it out yet. Thanks again!
January 15, 2009 at 3:14 pm
Hi,
You can disregard my last comment. I figured out how to extend the scroll area by elongating the track.
Thanks!
February 6, 2009 at 9:42 pm
Does anybody know how you’d add mouse wheel scrolling to something like this?
April 25, 2009 at 2:06 am
First, I want to thank you for the scrollbar component, it works great. I also wanted to add mouse wheel support for it so I added it into the Scrollbar.as file. The code is included below:
In the init() method add this right after targetMC = target
targetMC.addEventListener(MouseEvent.MOUSE_WHEEL, wheelScroll);
Then somewhere below add this method:
public function wheelScroll( event:MouseEvent ):void{
var delta:Number = event.delta;
if ( delta dragBot ){
dragHandleMC.y = dragBot;
}
}else if ( delta > 0 ){
dragHandleMC.y -= arrowMove;
if ( dragHandleMC.y < top ){
dragHandleMC.y = top;
}
}
ratio = (targetMC.height – range)/range;
sPos = (dragHandleMC.y * ratio) – ctrl;
targetMC.y = -sPos;
}
Thanks again!
-andy
April 25, 2009 at 2:19 am
Sorry, my post got mangled! Trying again:
Here is the eventlistener method:
public function wheelScroll( event:MouseEvent ):void{
var delta:Number = event.delta;
if ( delta dragBot ){
dragHandleMC.y = dragBot;
}
}else if ( delta > 0 ){
dragHandleMC.y -= arrowMove;
if ( dragHandleMC.y < top ){
dragHandleMC.y = top;
}
}
ratio = (targetMC.height - range)/range;
sPos = (dragHandleMC.y * ratio) - ctrl;
targetMC.y = -sPos;
}
May 30, 2009 at 2:36 pm
andrew, your post got mangled again!
please read posting FAQ or something,
and post correct code 
May 30, 2009 at 2:45 pm
here’ a link for you, andrew:
http://support.wordpress.com/code/
I suggest you mean’t something like that:
private function wheelScroll(event:MouseEvent):void
{
var delta:Number = event.delta;
if (delta < 0){
dragHandleMC.y += arrowMove;
if (dragHandleMC.y > dragBot)
{
dragHandleMC.y = dragBot;
}
}else if (delta > 0){
dragHandleMC.y -= arrowMove;
if (dragHandleMC.y < top)
{
dragHandleMC.y = top;
}
}
ratio = (targetMC.height - range)/range;
sPos = (dragHandleMC.y * ratio) - ctrl;
targetMC.y = -sPos;
}
May 5, 2009 at 10:43 pm
FYI:
Another way is to use ScrollPane component that already available in Flash CS3 IDE.
Here’s how…
1. Create a MovieClip (I made it 400×400 pix) and name it to whatever you like, for instance, I name it “ScrollableMC”. Then delete it from stage.
2.In the library, find your newly crated MovieClip symbol, right click on it, and choose “Linkage…”. Check a box called “Export for ActionScript”. The name of Class will autometically say “ScrollableMC”. Click “OK” to finish. If there’s a warning about Flash will automatically create class for you, just click OK to that.
3. Drag a component called “ScrollPane” to the stage, and then delete it from stage.
4. Add the code below…. That’s it!
// * import necessary classes
import flash.display.MovieClip;
import fl.containers.ScrollPane;
import fl.events.ScrollEvent;
// * createScrollPane
function createScrollPane(target:Object, xPos:Number, yPos:Number, wSize:Number, hSize:Number):void
{
var sp:ScrollPane = new ScrollPane();
sp.move(xPos,yPos);
sp.setSize(wSize,hSize);
sp.source = target;
sp.scrollDrag = true;
addChild(sp);
}
// * add ScrollPane to a movieclip linkage name “ScrollableMC” from library, then place it on stage
createScrollPane(ScrollableMC, 10, 10, 400, 250);
May 24, 2009 at 1:33 pm
i did what you told.. and it works.. but i want to remove it when going back to frame 1… the scrollbar is in frame 10…
i made the code:
function myname(e:MouseEvent):void {
this.gotoAndStop(1);
}
at this certain point it dont remove, but it still existing there..
the problem is that scrollpane doesnt got a instance name and i dont know how to give it and instance name when its in the liberary.
May 7, 2009 at 10:42 pm
great component! easy to use, well written, easy to customize the ui too.
May 30, 2009 at 10:51 pm
i don’t konow why, but Andrew posted function don’t work for me. So i have written my own in wery simple way:
add this line to init method: targetMC.addEventListener(MouseEvent.MOUSE_WHEEL, wheelScroll);
and place this function somewhere:
public function wheelScroll( event:MouseEvent ):void{
if(event.delta > 0){
if (dragHandleMC.y > top) {
dragHandleMC.y-=arrowMove*Math.abs(event.delta);
if (dragHandleMC.y < top) {
dragHandleMC.y = top;
}
startScroll();
}
}else{
if (dragHandleMC.y dragBot) {
dragHandleMC.y = dragBot;
}
startScroll();
}
}
}
June 9, 2009 at 12:11 pm
nice scrollbar, I have 2 issues on exploring it,
1. On hold of up or down arrow and release it outside, the scroll continues.
2. I have changed the height of track, On using the mouseWheel getting to bottom and pressing the top arrow or drag handler the scroll finishes to the end but the content has one line left to be scrolled.
Have anyone faced it, pls help me.
June 9, 2009 at 12:40 pm
sorry, the first one is fixed.
upScrollControl.addEventListener(MouseEvent.MOUSE_OUT, stopScroll);
downScrollControl.addEventListener(MouseEvent.MOUSE_OUT, stopScroll);
if added.
June 23, 2009 at 2:45 am
thank you thank you!!! this component totally save my life, I lost so much time trying to get the scrollbar to work, this is just what I needed!
September 17, 2008 at 4:30 am
Awesome. Definitely will come in handy… You should continue working on it and add other features too.