AS3 Scrollbar component for MovieClip
Posted on: September 15, 2008
- In: Actionscript 3.0 | AIR | Flash Components | Flash CS3 | Flash Player | Flex | Flex Components
- 51 Comments
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
51 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:
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;
}
[/sourcecode]
November 6, 2009 at 3:02 pm
I’ve added the code above and put the event listener where Andrew suggested above but mouse wheel scrolling isn’t working. Has anybody managed to successfully add this functionality?
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.
June 28, 2010 at 2:51 pm
in function:
sp.name = “SomeName”;
…
SomeName.visible = false;
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();
}
}
}
January 20, 2011 at 7:42 pm
The correct version:
add this line to init method:
targetMC.addEventListener(MouseEvent.MOUSE_WHEEL, wheelScroll);
And this function to the class
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 bottom) {
dragHandleMC.y = bottom;
}
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!
July 19, 2009 at 12:54 pm
@raj
If u have a problem with disappearing first line try changing this line
scrollPos = (scrollFaceMC.y * ratio) – contentY;
to
scrollPos = ((scrollFaceMC.y – scrollUpMC.height ) * ratio) – contentY;
this is the case when u have your scrolled content on the same level as scroll up arrow.
August 1, 2009 at 5:41 am
Wonderful! very straightforward and clean code.
Do you thing I can use your code in my flash projects?
September 7, 2009 at 9:20 am
Heys, just wanted to thank you, this has always been something i needed, most of the time ending up making my own wich then just doesnt cut it.
Thanks again!
September 12, 2009 at 10:44 pm
Just wanted to say thanks for the AS code, reading your code allowed me to understand how to create my own custom scrollbar. It will make a nice addition to my code library.
October 12, 2009 at 10:48 am
Hi,
Have any one added more functionality to it, like scrolling by clciking anywhere on the track, the scroll happens when we click on the track.
November 4, 2009 at 5:17 pm
Hi Everybody,
Does anyone have any idea how to adjust the position of the drag handle if I move the target MC manually?
I’m trying to have the ability to jump further down the page using a button at the top but when I move the target MC the drag box on the scrollbar remains at the top and if you try to scroll the target MC jumps back to the top and scrolls from there.
I’d appreciate any advice. Thanks!
November 23, 2009 at 11:11 am
thanks, it’s so easy and helpful
but can I make it horizontal way ?
December 16, 2009 at 10:09 pm
How in the hell would the left blue border be connected to the scroll bar. When I delete the border, there’s no longer a scroll bar.
[…] che ti risparmi un bel po' di lavoro "inutile". Ne ho trovata una anche gratuita: AS3 Scrollbar component for MovieClip Flexcomps’s Weblog VIDEO CORSI ACTIONSCRIPT 3.0 creati da FlepStudio I recommend: Essential Actionscript 3.0 TRY […]
March 11, 2010 at 2:42 pm
Thanks man,
This saved me a lot of time.
keep up the great work.
April 7, 2010 at 1:51 pm
Congratulations, your scrollBar component arrived in Brazil, thanks !
May 11, 2010 at 11:43 pm
does anyone know how to add “click jump” functionality to the bar itself? meaning when you click the bar that the “grabber” will jump to where your mouse is and scroll accordingly.
thanks!
[…] […]
February 21, 2011 at 9:41 pm
j’essaye de l’utilisé apres chargement de png ds un clip
que je drag la hauteur des png varie
je n’arrive pas a l’automatisé sur la hauteur quelqu’un a une idée
pourque ca s’arrette pile poil a la fin du png a la fin du masque??
sinon super bien fait
bravo
j’aurai kiffé le code .as +commenté
on en veut tjrs + dsl c’ést deja exellent
February 21, 2011 at 9:47 pm
I support multiple png seriatim in a movieclip
they vary in size I can not do that all the images stop at the bottom of the mask
very fine and clear work
I loved having the code.’ve commented more
we always want more good work sorry
if you just helped me thank you in advance
Flexcomps's Weblog 
September 17, 2008 at 4:30 am
Awesome. Definitely will come in handy… You should continue working on it and add other features too.