I know a lot of work has gone into the Flash CS3 components and skinning them is much easier than it was with earlier versions, but doesn't it seem like they're still just too finicky? Well, it does to me. My simple ScrollPane class does everything you'd expect, but (unlike the component) leave the layout up to you. The result is a ScrollPane that's much more flexible and easily adapted to your pushing-the-boundaries-of-what-a-scroll-pane-can-look-like design. Don't want an up arrow? Don't include it. No thumb? No problem. Best of all, com.exanimo.containers.ScrollPane and com.exanimo.controls.ScrollBarare modeled after fl.containers.ScrollPane and fl.controls.ScrollBar, so you don't have to waste time learning new APIs. Better than best of all, I've put together six examples that demonstrate all the different ways to use the ScrollPane, and how easy it is to extend it.

Download the source code and example files as a ZIP or get them from my subversion repository.

Features

  1. Simple to skin
  2. API based on fl.containers.ScrollPane
  3. Doesn't muck with your layout
  4. Optional Thumb scaling
  5. Support for disabled ScrollBars
  6. Easy-to-implement easing
  7. Mouse wheel support (Windows only, for now)
  8. Thumb and arrow buttons are optional
  9. Accessors for setting the size of a line and page
  10. Accessors for setting the scrolling repeat interval and delay
  11. Uses interfaces in case you want to create your own implementation from scratch

Comments

Gravatar Niklas

How do I add easing to exampel no. 2?

Really like the possibilities of this scrollbar pane…

All the best, Niklas

Gravatar matthew

Simple! Just change the linkage base class from "com.exanimo.containers.BaseScrollPane" to "EasingScrollPane" and put the EasingScrollPane class included with Example 6 in the same directory as your FLA. If you take a look at the contents of the EasingScrollPane class, it should be clear how to make your own custom easing. All you have to do is extend BaseScrollPane and override a method.

Gravatar Niklas

Thanks for your answer.
Hmmm…
When I change the base class to EasingScrollPane and put the class in the same folder I get this error:
EasingScrollPane.as Line 4 1046: Type was not found or was not a compile-time constant: TextField.
Not quite sure why this is happening… Do I have to import some import somewhere?
Line 4 is the refering to the import of the BaseScrollPane class but in that class, as far as I can see there is an import flash.text.TextField;

Niklas

P.S Some great stuff here on your site.

Gravatar matthew

Yeah, when a class is linked to a symbol in the library, it must import the classes of its children. Since the ScrollPane in example 2 contains a TextField, you'll have to import flash.text.TextField in the EasingScrollPane class. It doesn't matter that the superclass (BaseScrollPane) already imports it, Flash adds the children to the definition of the linked class.

I'm glad you're finding the site useful!

Gravatar Niklas

Hey!

Thanks for your help. Now it works perfectly – awesome!!

Niklas

Gravatar Oddmachine

Thanks so much, came together nicely!

-Oddmachine

Gravatar Niklas

Hi there again!

I have actually have two questions:

Is there a way to use the scroll but without the mask – kind of like on this page: http://emehmedovic.com/xmca/toobplayer/#/download/ ?

My second question is this: Is there a way to have the size of the mask change dynamically? I've tried to make a movie clip out of the mask so that I can name it with an instance name but the scroll stopped working…

All the best, Niklas

Gravatar matthew

Hi again, Niklas! Yes, there is a way to scroll without the mask.. what you would do is just use the scroll bar (BaseScrollBar) by itself, listen for its scroll events, and move your content in the handler. As to your second question, you can make the mask a MovieClip. From the documentation of BaseScrollPane:

If [the BaseScrollPane] has a child named "_mask", it will be used as the mask; otherwise the Shape object of the highest index in the display list will be used.

So just name your MovieClip "_mask", and you should be good to go.

Gravatar Niklas

Hi Mathew!

Sorry for my late reply. I've been very busy. So far I've tried to make a movieclip out of the mask and noticed that in the EasingScrollPane.as you needed to add import flash.display.MovieClip;. Works like a charm – thanks again for taking some of your time to help me out!!

Niklas

Gravatar mike

Hi Matthew, this scrollbar works great with text i love the ease control. I'm a bit of a newbie though and was wondering if I could load a MovieClip with live buttons rather than text?

Gravatar matthew

Yeah, mike. You can substitute MovieClips for the TextFields in the examples and everything will work fine.

Gravatar Marc

Is it possible to stop the bulk of the scroll pane exporting into frame 1?

I have tried setting the component paramaters of the BaseScrollPane to export in frame 2, but this doesn't appear to change where the majority of the data is placed.

I also have the BaseScrollPane set to Export for Actionscript with the Export in Frame 1 turned off and an instance of the BaseScrollPane on frame 2 of my flash.

Gravatar matthew

@Marc Yeah, you can stop all of it from exporting in frame 1 using the usual techniques. It's just a bunch of library symbols with linkage classes so there's nothing special you have to do. Just make sure that you set all of the symbols to export on frame two (not just BaseScrollPane).

Gravatar ejewels

Is there a way to dynamically position the scroll bar x position depending on the width of the mask? I have variable width content that I load in, so I need to be able to position the scrollbar…

thanks in advance, and great work!

Gravatar Jason

Hey,

Nice component, thanks for sharing.

I'm trying to use the setSize method from the original ScrollPane class, but you haven't included it in your Interface. When I try and set the width and the height of the scrollpane, all of the content including the scrollbars actually scales. Any suggestions for how to set the size of the component at runtime?

Gravatar matthew

@ejewels @Jason Hey guys. The component doesn't do any layout. The reasoning is that no layout process works for all designs. In fact, this is one of the reasons I decided to make the component in the first place: fl.containers.ScrollPane's ideas about layout were conflicting with the designs I was trying to achieve.

Now this isn't to say that you're out of luck. It just means that in order to get this functionality, you'll have to extend BaseScrollPane and add it. My recommendation (and something that I've done before) is to have your subclass override the width and height setters. (Alternatively, you could add a setSize method.) Whenever one of these is called, recalculate the layout (size of the mask, position of the scrollbar, etc.). If the layout changes the size of the scrollbar (as in your case, Jason), repeat the same thing for your ScrollBar class (in order to prevent the scaling).

A new version of the scrolling classes should be available soon to make this easier but, until then, I hope this isn't too bad.

Gravatar J

Hi,

is it possible to include a thumb "groove" graphic that doesn't scale whilst the thumb itself does?

(a similar layout to what I want to achieve is here: http://www.flashtuning.net/components/Advanced-Scroll-Bar-AS-2.0_3.html)

thanks
J

Gravatar Nico

Well i've been working a bit on the set width / Height methods…
in BaseScrollBar.as
public function setWidth(h:Number):void {

trace("SET WIDTH " +h);
/*
__track;
__upArrow;
__downArrow;
__thumb;
*/
scaleY = scaleX = 1;
// FOR VERTICAL SCROLL BAR
__track.x = h- __upArrow.width;
__track.scaleX = __track.scaleY = 1
__track.height = h – (__upArrow.height)*2;;

__downArrow.x = h-__downArrow.height;
this._minScrollPosition = __upArrow.x + __upArrow.width;
this._maxScrollPosition = __downArrow.x;
__thumb.x = this._minScrollPosition;

}

public function setHeight(h:Number):void {
//scaleX = scaleY = 1;
trace("SET HEIGHT");

/*
__track;
__upArrow;
__downArrow;
__thumb;
*/

// FOR VERTICAL SCROLL BAR
__track.height = h – (__upArrow.height)*2;
__track.y = __upArrow.height;
__downArrow.y = __track.height + __track.y;
this._minScrollPosition = __track.y;
this._maxScrollPosition = __track.height;
__thumb.y = this._minScrollPosition;

}
in BaseScrollPane.as
/**
Set width and height of scrollpane obj
**/
public function setWidth(l:Number):void{
this.__mask.width = l;
this.verticalScrollBar.x = l;
this.horizontalScrollBar.setWidth(l);
}

public function setHeight(l:Number):void{
this.__mask.height = l;

this.horizontalScrollBar.y = l;
this.verticalScrollBar.setHeight(l);
}

Gravatar Nico

well it's working for the Pane/Masking and the vertical Scrollbar…
i'm actually tryin to figure out what went wrong with the horizontal scroll bar…
seems that __track in baseScrollbar instead of resizing simply… it scales in awkward way…

mmmm…. maybe some other day i'll find myself the reason… for now i'm quite satisfied sinc ei need only Vscrolling…

Gravatar andrei

hay,

could anyone tell me how can i make scrollpanel width throu all stage width (stage.stageWidth).
If i wanc change width, content width change (is possible to make noScale = true?)

Thank you

Gravatar Mohamed

Hello

I like to know how to do with flash as3. can u help me to understand. any links.. any tutorial links.. reply to me. its really help to me. thank you. i saw your scroll pane its very interesting. but i dont know how to use and where to put. i hope u wil help me