Creating Horizonal Scroll from Verticle Example

programming flash
1

Hi Guys

I have just gone through the site tutorial on creating a **Simple **Custom Scrollbar here…
http://www.kirupa.com/developer/flash8/scrollbar3.htm

However I am making a pdf viewer with zoom in and so will need a horizontal scroll aswell.
I have re wrote the code to get this, but I think my conversation is wrong somewhere.
If anyone can see where or help at all i would be ever so gratefull!


scrollingx = function () {
 var scrollWidth:Number = scrollTrackX._width;
 var contentWidth:Number = viewport._width;
 var scrollFaceXWidth:Number = scrollFaceX._width;
 var maskWidth:Number = maskedView._width;
 var initPosition:Number = scrollFaceX._x=scrollTrackX._x;
 var initContentPos:Number = viewport._x;
 var finalContentPos:Number = maskWidth-contentWidth+initContentPos;
 var left:Number = scrollTrackX._x;
 var top:Number = scrollTrackX._y;
 var right:Number = scrollTrackX._x;
 var bottom:Number = scrollTrackX._width-scrollFaceXWidth+scrollTrackX._x;
 var dy:Number = 0;
 var speed:Number = 10;
 var moveVal:Number = (contentHeight-maskHeight)/(scrollWidth-scrollFaceXWidth);
 
 scrollFaceX.onPress = function() {
  var currPos:Number = this._x;
  startDrag(this, false, left, top, right, bottom);
  this.onMouseMove = function() {
   dy = Math.abs(initPosition-this._x);
   viewport._x = Math.round(dy*-1*moveVal+initContentPos);
  };
 };
 scrollFaceX.onMouseUp = function() {
  stopDrag();
  delete this.onMouseMove;
 };
 btnUp.onPress = function() {
  this.onEnterFrame = function() {
   if (viewport._x+speed<maskedView._x) {
    if (scrollFaceX._x<=top) {
     scrollFaceX._x = top;
    } else {
     scrollFaceX._x -= speed/moveVal;
    }
    viewport._x += speed;
   } else {
    scrollFaceX._x = top;
    viewport._x = maskedView._x;
    delete this.onEnterFrame;
   }
  };
 };
 btnUp.onDragOut = function() {
  delete this.onEnterFrame;
 };
 btnUp.onRelease = function() {
  delete this.onEnterFrame;
 };
 btnDown.onPress = function() {
  this.onEnterFrame = function() {
   if (viewport._x-speed>finalContentPos) {
    if (scrollFaceX._x>=bottom) {
     scrollFaceX._x = bottom;
    } else {
     scrollFaceX._x += speed/moveVal;
    }
    viewport._x -= speed;
   } else {
    scrollFaceX._x = bottom;
    viewport._x = finalContentPos;
    delete this.onEnterFrame;
   }
  };
 };
 btnDown.onRelease = function() {
  delete this.onEnterFrame;
 };
 btnDown.onDragOut = function() {
  delete this.onEnterFrame;
 };
 
 if (contentWidth<maskWidth) {
  scrollFaceX._visible = false;
  btnUp.enabled = false;
  btnDown.enabled = false;
 } else {
  scrollFaceX._visible = true;
  btnUp.enabled = true;
  btnDown.enabled = true;
 }
 
 
};

I renamed the horizontal bar symbols scrollTrackX and scrollFaceX at the moment when i click the horizontal button it just disappears. I have also attached the FLV if it helps.

Thanks again for anyones input, I can not believe this issue or need for a zoomable area and 2 way scroll is not everywhere on the web!