Using MinimalComps’ Scrollbar

Dec 20 2010 Published by under ActionScript, Components

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]

6 responses so far

  • So back to flash 🙂 thanks for the explanation….

  • Robert says:

    @senthil

    Why do people continually give Keith crap for trying out new technologies? I guess if it’s a running gag, that’s fine. However, if you don’t see fit to try out new technologies in your own programming career, you probably won’t be programming long.

    • @ Robert

      Hey, I am also working in other technologies…. I started my carrier with flash and always I love flash…also having the eager to know other technologies… Its good to see a blog which explains all RIA technologies….

  • Xavier says:

    Hi

    what would be the proper way to detect other events than onScroll.

    For instance, I would like to find out that the mouse button was released.

    I did
    myHSlider.addEventListener(MouseEvent.MOUSE_UP, onSliderRelease);

    which works, but I wonder how to access those protected onDrop, onDrag

    thanks

    • keith says:

      I don’t know an easy way around that other than changing the source and exposing those elements. At least it’s open source!

  • Roman says:

    Hello!
    Firstly thank you for your great job making thoose components.
    I got a question about how to set some components heigh. For exsample using scroll bar and check box I cant components height.
    I tries to use as component.setSize(w,h) , as component.height = x; But bothing works for me.
    Any suggestions?