ScrollPane

Comments

Niklas
2008.05.08

How do I add easing to exampel no. 2?

Really like the possibilities of this scrollbar pane…

All the best, Niklas

matthew
2008.05.09

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.

Niklas
2008.05.10

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.

matthew
2008.05.10

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!

Niklas
2008.05.20

Hey!

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

Niklas

Oddmachine
2008.06.19

Thanks so much, came together nicely!

-Oddmachine

Niklas
2008.08.29

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

matthew
2008.08.29

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.

Niklas
2008.09.22

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

mike
2008.11.26

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?

matthew
2008.12.04

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

Marc
2009.02.24

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.

matthew
2009.04.22

@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).

ejewels
2009.06.11

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!

Jason
2009.10.22

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?

matthew
2009.10.23

@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.

J
2009.11.16

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

Nico
2009.11.27

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);
}

Nico
2009.11.27

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…

andrei
2010.09.04

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