Advanced text scrolling?

[stompwampa]

Any know of any tutorials or starting points to make scroll bars for text fields?
I can make them with the up/down arrows, but I'd like to learn how to make them with a bar that the user can drag to scroll through the text and I'd like it so the size if the bar grows/shrinks dynamically based on how much text is in the textField.length(); property...

any good places to start?
Thanks :-)

[matbury]

I went deep into the 'create your own scrolling text bar' thing a while back in AS 2.0.

After working out all the maths, set the masks right, getting everything to work nicely, I ended up with a poor copy of the scroll bar component.

What I couldn't take into account while I was making the thing was the differences between Mac and PC or the accessibility of the damn thing (I'm pretty keen on accessibility too, since I think people with disabilities are the ones who stand to benefit the most from access to IT). The scrollbar component has everything you need and loads of things you've never thought of included. It's an impressive little bit of usability design!

It was a great learning experience and I'd recommend it just for that. Now, I either use the scroll bar component or I find some other way of presenting the text.

I adapted some code from Lee Brimelow's video player tutorials (there's a series of 8 of them for AS 2.0) - the video scrubber bar does essentially the same thing as a text scroll bar, you just have to reverse the direction.

[Sleeve]

Here is an example of a text area component that uses a custom scrollbar component that happens to recognize what you are trying to scroll. In the case of a textfield, the viewport is the textfield's total visible lines before maxScrollV becomes greater than 1 and the target is the textfield's maxScrollV value.

I have to say, scrollBars are one of the more complex components I have had to code. I think most people underestimate what goes into a well rounded, robust scrollBar.

If you want to look at the code that goes into sizing the scrollTab based on content, It's easy once you think about it. **this example is best visualized using a non textfield object as the viewPort and target**:

// Assuming a vertical scrollBar
var multiplier : Number = viewPort.height // Height of your 'viewPort'
var c : Number = target.height// Height of your target or the content you want to scroll
var st : Number = scrollTrack.height// Height of the scrolltrack the tab slides inside of
var scrollTabHeight : Number = (st / c) * mult;

The math that scrolls your content based on the scrollTab position is a bit more tricky. This is just a starting place...there is a lot more to it.
////////////////////////////////////////
// ScrollTab / Content relationship
var differential : Number = target.height - viewPort.height // This gives us the size of the actual scrollable height.
// Calc the number of pixels your content needs to move for every
// 1 pixel that your scrollTab moves
var ratio : Number = differential / scrollTrack.height;
// Apply math to find the target's position
target.y = -(scrollTab.y * ratio) + viewport.height;

Anyways. I hope this helps to get you started.