Using MinimalComps’ Scrollbar

The scrollbar component in minimalcomps was never really meant to be used as a standalone component. This is not to say that it can’t be, it’s just that the interface doesn’t really have the same simplicity and ease of use as the other components. However, a few people have asked about it, so here’s an example of how to use it.

First we’ll need something to scroll. We’ll create a sprite with a bunch of random lines and give it a scrollrect so that it has more content than it can show.

[code lang=”as3″]
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xeeeeee);
sprite.graphics.drawRect(0, 0, 100, 500);
sprite.graphics.endFill();
sprite.graphics.lineStyle(0);
sprite.graphics.lineStyle(0);
for(var i:int = 0; i < 100; i++) { sprite.graphics.lineTo(Math.random() * 100, Math.random() * 500); } sprite.scrollRect = new Rectangle(0, 0, 100, 100); addChild(sprite); [/code] I'm omitting all the imports. If you're attempting this, I assume you know how to import classes. If not, stop now and learn some AS3. 🙂 OK, now we'll create our scrollbar and put it just to the right of the sprite, and give it an event handler for the scroll event. [code lang="as3"] var scrollbar:VScrollBar = new VScrollBar(this, 100, 0, onScroll); function onScroll(event:Event):void { } [/code] This should look right, but won't do anything. We need to do 4 things to make it functional: 1. Set the thumb percent - i.e. how big the sliding button is, as a percentage of how big it could possibly be. By default it's 1.0, meaning it fills the whole area. You'll need to calculate this yourself, and it's generally the visible area of the thing you're scrolling, divided by the total size of it. In our case, we can see 100 pixels of the sprite, but it's height is 500. So we can say: [code lang="as3"] scrollbar.setThumbPercent(100 / sprite.height); [/code] 2. Set the maximum value of the slider. This is the most you want the object to scroll. Again, this takes come calculation. Generally, it's the total size minus the visible area. The sprite is 500 pixels high and we can see 100 pixels. So 500 - 100 = 400. [code lang="as3"] scrollbar.maximum = sprite.height - 100; [/code] 3. Customize how much you want the scrollbar to move when you click on the buttons or the back. The lineSize property controls how much it will move when you click on the up or down buttons, and the pageSize controls how much it moves when you click on the back. Generally lineSize is fine at 1, but you can bump it up to make things scroll more. And pageSize is usually the same as the visual area, so 100 in this case. In some cases you might want to make pageSize a bit less, so you have some overlap. This is up to you. [code lang="as3"] scrollbar.pageSize = 100; scrollbar.lineSize = 1; [/code] 4. Finally, you have to implement the event handler for the scroll event to make use of the new scroll value. In this case, we're changing the scrollrect to make it's top value equal the value of the scrollbar: [code lang="as3"] function onScroll(event:Event):void { sprite.scrollRect = new Rectangle(0, scrollbar.value, 100, 100); } [/code] See what I mean? Not exactly rocket science, but not exactly "minimal" either. But there you have it. If you need to use it, go for it. Here's all the code together: [code lang="as3"] import flash.display.Sprite; import flash.geom.Rectangle; import com.bit101.components.VScrollBar; import flash.events.Event; var sprite:Sprite = new Sprite(); sprite.graphics.beginFill(0xeeeeee); sprite.graphics.drawRect(0, 0, 100, 500); sprite.graphics.endFill(); sprite.graphics.lineStyle(0); for(var i:int = 0; i < 100; i++) { sprite.graphics.lineTo(Math.random() * 100, Math.random() * 500); } sprite.scrollRect = new Rectangle(0, 0, 100, 100); addChild(sprite); var scrollbar:VScrollBar = new VScrollBar(this, 100, 0, onScroll); scrollbar.setThumbPercent(100 / sprite.height); scrollbar.maximum = sprite.height - 100; scrollbar.pageSize = 100; scrollbar.lineSize = 1; function onScroll(event:Event):void { sprite.scrollRect = new Rectangle(0, scrollbar.value, 100, 100); } [/code]