scrollbar math

Filed under Lab Work, Programming | Tags:,,,

This is something i have done lots, and can never remember how i did it. Worse, i think everytime i do this, it’s different…which is fine, but it would be nice to just type it out without having to think about it…or worse, go to the white board and draw it out. I will say right off that my scrolling textboxes seem to be more of a work around. I am not a fan of the scroll method, native to the TextField Object…i find them (for now) unintuitive. My resolution, and again, not great, is to make a text field, and throw over it, a dynamic mask.

Anyway, today’s dynamic scrolling challenge was achieved like so:

  1. add shell movie clip to hold everything
  2. add background (using bitmap/bitmapdata)
  3. add a text field
  4. add a mask to the text field (repurpose the bitmap object)
  5. add text to the text field
  6. add a custom scrollbar if the text field if the text field is greater than the mask height

i am not going into points 1-5…but i will talk now about the math i created the scrollbar, and how i calculate the math to shift the text box in relation the the dragger. For ease, this scroll bar will be only a dragger, locked to its x-axis. It will be 20×20, and ride on the far right of the shell mc:

Now, the code:

private static function addScrollBar():void
{
var d=dragger();
d.x=_container.width-(d.width)
_container.addEventListener(MouseEvent.MOUSE_DOWN,mousedown);
_container.addChild(d)
}
private static function dragger():MovieClip
{
var mc:MovieClip=new MovieClip()
mc.buttonMode=true;
_scroller=mc;
var g=mc.graphics;
g.beginFill(0xffffff);
g.drawRect(0,0,_draggerWidth,_draggerHeight)
g.endFill()
mc.alpha=.5
return mc;
}

that’s the dragger….plain simple graphics

/*-----------------------------------------------------
//MOUSE EVENTS
-----------------------------------------------------*/
private static function mousedown(e:MouseEvent):void
{
var d=_scroller;
_container.addEventListener(MouseEvent.MOUSE_MOVE,dragging);
_container.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
_landing.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
}
private static function stopdrag(e:MouseEvent):void
{
_container.removeEventListener(MouseEvent.MOUSE_MOVE,dragging);
}
private static function dragging(e:MouseEvent):void
{
var txHeight=_textbox.height;
var d_pos=(_scroller.y+_scroller.height);    //dragger posiion
var ratio=txHeight/_virtualHeight;
var sc=Math.floor((d_pos-20)*ratio)         //20 is from the dragger dimensions
_textbox.y=-(sc-91)
_scroller.y=_instance.mouseY;
 
}

Not so bad- the actual drag is based on a mouse move event handler….and now the math:

i am first getting the absolute height of the text box and all its contents= txHeight. This is the longest part in terms of height. I then look for the ratio of this very long instance vs the viewable portion from the mask (_virtualHeight). Once i have that raio, as i slide the dragger, i set a variable that takes that position and multiplies it by the ratio. That “-20″ you see  is the offset from the dragger height. Finally, i set the textbox’s y axis to that variable, and subtract 91. Why 91??? i have not idea…For some unexplanable reason, i had to explore for an offset. i turn that unknown to you guys…in fact, that’s the whole point of this post. As i’ve said, this etire site is dedicated to understanding code. It may be that my entire approach here is wrong…it seems to work, but lets tear this math apart and make it better. If you see a problem or have a better way, let me know