Creating Horizonal Scroll from Verticle Example

[scotchegg]

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!

[scotchegg]

I have nearly go it! I was been dumb and copied some code from another example i was working on so had teh varible names wrong.
anyway side to side buttons work now, just need to get the drag scroll bar going...



scrollingx = function () {
var scrollWidth:Number = scrollTrackX._width;
var contentWidth:Number = contentMain._width;
var scrollFaceXWidth:Number = scrollFaceX._width;
var maskWidth:Number = maskedView._width;
var initPosition:Number = scrollFaceX._x=scrollTrackX._x;
var initContentPos:Number = contentMain._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 = (contentWidth-maskWidth)/(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);
contentMain._x = Math.round(dy*-1*moveVal+initContentPos);
};
};
scrollFaceX.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnLeft.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._x+speed<maskedView._x) {
if (scrollFaceX._x<=left) {
scrollFaceX._x = left;
} else {
scrollFaceX._x -= speed/moveVal;
}
contentMain._x += speed;
} else {
scrollFaceX._x = left;
contentMain._x = maskedView._x;
delete this.onEnterFrame;
}
};
};
btnLeft.onDragOut = function() {
delete this.onEnterFrame;
};
btnLeft.onRelease = function() {
delete this.onEnterFrame;
};
btnRight.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._x-speed>finalContentPos) {

if (scrollFaceX._x>=right) {
scrollFaceX._x = right;
} else {
scrollFaceX._x += speed/moveVal;
}
contentMain._x -= speed;
} else {
scrollFaceX._x = right;
contentMain._x = finalContentPos;
delete this.onEnterFrame;
}
};
};
btnRight.onRelease = function() {
delete this.onEnterFrame;
};
btnRight.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;
}


};
scrolling();
scrollingx();

[scotchegg]

It is something here, likely the math thats wrong...


ActionScript Code:

</p>
<p>var scrollWidth:Number = scrollTrackX._width;</p>
<p>var contentWidth:Number = contentMain._width;</p>
<p>var scrollFaceXWidth:Number = scrollFaceX._width;</p>
<p>var maskWidth:Number = maskedView._width;</p>
<p>var initPosition:Number = scrollFaceX._x=scrollTrackX._x;</p>
<p>var initContentPos:Number = contentMain._x;</p>
<p>var finalContentPos:Number = maskWidth-contentWidth+initContentPos;</p>
<p>var left:Number = scrollTrackX._x;</p>
<p>var top:Number = scrollTrackX._y;</p>
<p>var right:Number = scrollTrackX._x;</p>
<p>var bottom:Number = scrollTrackX._width-scrollFaceXWidth+scrollTrackX._x;</p>
<p>var dy:Number = 0;</p>
<p>var speed:Number = 10;</p>
<p>var moveVal:Number = (contentWidth-maskWidth)/(scrollWidth-scrollFaceXWidth);</p>
<p>&nbsp;</p>
<p>scrollFaceX.onPress = function() {</p>
<p>var currPos:Number = this._x;</p>
<p>startDrag(this, false, left, top, right, bottom);</p>
<p>this.onMouseMove = function() {</p>
<p>dy = Math.abs(initPosition-this._x);</p>
<p>contentMain._x = Math.round(dy*-1*moveVal+initContentPos);</p>
<p>};</p>
<p>};</p>
<p>&nbsp;</p>
<p>




in particular this bit??



dy = Math.abs(initPosition-this._x);
contentMain._x = Math.round(dy*-1*moveVal+initContentPos);

[ayumilove]

use this tag [ as ] [ /as ]
and remove the spaces in between []

[scotchegg]

Thanks, I am really close now!

it sort of works just the box disappears!



var scrollWidth:Number = scrollTrackX._width;
var contentWidth:Number = contentMain._width;
var scrollFaceXWidth:Number = scrollFaceX._width;
var maskWidth:Number = maskedView._width;
var initPosition:Number = scrollFaceX._x=scrollTrackX._x;
var initContentPos:Number = contentMain._x;
var finalContentPos:Number = maskWidth-contentWidth+initContentPos;
var left:Number = scrollTrackX._x;
var top:Number = scrollTrackX._y;
//var right:Number = scrollTrackX._x;
var right:Number = scrollTrackX._width-scrollFaceXWidth+scrollTrackX._x;
var bottom:Number = scrollTrackX._y;
//var bottom:Number = scrollTrackX._width-scrollFaceXWidth+scrollTrackX._x;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentWidth-maskWidth)/(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);
contentMain._x = Math.round(dy*-1*moveVal+initContentPos);
};
};
scrollFaceX.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};

[scotchegg]

I think its my startDrag(this, false,left,top,right, bottom); and the values...
nearly got it...

[scotchegg]

FIXED IT.

I had the bottom drag as an instance of the right one, and not of the graphic, so i guess some values were been picked up or something?

[ayumilove]

scrollY = function () {

var scrollHeightY:Number = scrollTrackY._height;
var contentHeightY:Number = contentMain._height;
var scrollFaceHeightY:Number = scrollFaceY._height;
var maskHeightY:Number = maskedView._height;
var initPositionY:Number = scrollFaceY._y=scrollTrackY._y;
var initContentPosY:Number = contentMain._y;
var finalContentPosY:Number = maskHeightY-contentHeightY+initContentPosY;
var leftY:Number = scrollTrackY._x;
var topY:Number = scrollTrackY._y;
var rightY:Number = scrollTrackY._x;
var bottomY:Number = scrollTrackY._height-scrollFaceHeightY+scrollTrackY._y;
var dy:Number = 0;
var speedY:Number = 10;
var moveValY:Number = (contentHeightY-maskHeightY)/(scrollHeightY-scrollFaceHeightY);

scrollFaceY.onPress = function() {
//var currPosY:Number = this._y;
startDrag(this, false, leftY, topY, rightY, bottomY);
this.onMouseMove = function() {
dy = Math.abs(initPositionY-this._y);
contentMain._y = Math.round(dy*-1*moveValY+initContentPosY);
};
};
scrollFaceY.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnUp.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y+speedY<maskedView._y) {
if (scrollFaceY._y<=topY) {
scrollFaceY._y = topY;
} else {
scrollFaceY._y -= speedY/moveValY;
}
contentMain._y += speedY;
} else {
scrollFaceY._y = topY;
contentMain._y = maskedView._y;
delete this.onEnterFrame;
}
};
};
btnUp.onDragOut = function() {
delete this.onEnterFrame;
};
btnUp.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y-speedY>finalContentPosY) {
if (scrollFaceY._y>=bottomY) {
scrollFaceY._y = bottomY;
} else {
scrollFaceY._y += speedY/moveValY;
}
contentMain._y -= speedY;
} else {
scrollFaceY._y = bottomY;
contentMain._y = finalContentPosY;
delete this.onEnterFrame;
}
};
};
btnDown.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onDragOut = function() {
delete this.onEnterFrame;
};

if (contentHeightY<maskHeightY) {
scrollFaceY._visible = false;
btnUp.enabled = false;
btnDown.enabled = false;
} else {
scrollFaceY._visible = true;
btnUp.enabled = true;
btnDown.enabled = true;
}
};

/////////////////////////////////////////////////////////////////////////////////////////////////////////


scrollX = function () {

var scrollHeightX:Number = scrollTrackX._width; //ok
var contentHeightX:Number = contentMain._width;
var scrollFaceHeightX:Number = scrollFaceX._width;
var maskHeightX:Number = maskedView._height;
var initPositionX:Number = scrollFaceX._x=scrollTrackX._x; //working
var initContentPosX:Number = contentMain._x;
var finalContentPosX:Number = maskHeightX-contentHeightX+initContentPosX;
var leftX:Number = scrollTrackX._width - scrollFaceX._width/2;//scrollTrackX._y + 40;//ok
trace(leftX);
var topX:Number = maskHeightX - 20;
var rightX:Number = scrollTrackX._x;//ok
// trace(rightX);
var bottomX:Number = maskHeightX - 20; //scrollTrackX._width-scrollFaceHeightX+scrollTrackX._x;
var dx:Number = 0;
var speedX:Number = 5; //ok
var moveValX:Number = (contentHeightX-maskHeightX)/(scrollHeightX-scrollFaceHeightX);

scrollFaceX.onPress = function() {
//var currPosX:Number = this._x;
startDrag(this, false, leftX, topX, rightX, bottomX);

this.onMouseMove = function() {
dx = Math.abs(initPositionX -this._x);
contentMain._x = Math.round(dx*-1*moveValX+initContentPosX);

};
};
scrollFaceX.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnLeft.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._x+speedX<maskedView._x) {
if (scrollFaceX._x<=topX) {
scrollFaceX._x = topX;
} else {
scrollFaceX._x -= speedX/moveValX;
}
contentMain._x += speedX;
} else {
scrollFaceX._x = topX;
contentMain._x = maskedView._x;
delete this.onEnterFrame;
}
};
};
btnLeft.onDragOut = function() {
delete this.onEnterFrame;
};
btnLeft.onRelease = function() {
delete this.onEnterFrame;
};
btnRight.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._x-speedX>finalContentPosX) {
if (scrollFaceX._x>=bottomX) {
scrollFaceX._x = bottomX;
} else {
scrollFaceX._x += speedX/moveValX;
}
contentMain._x -= speedX;
} else {
scrollFaceX._x = bottomX;
contentMain._x = finalContentPosX;
delete this.onEnterFrame;
}
};
};
btnRight.onRelease = function() {
delete this.onEnterFrame;
};
btnRight.onDragOut = function() {
delete this.onEnterFrame;
};

if (contentHeightX<maskHeightX) {
scrollFaceX._visible = false;
btnLeft.enabled = false;
btnRight.enabled = false;
} else {
scrollFaceX._visible = true;
btnLeft.enabled = true;
btnRight.enabled = true;
}
};


//This code must be placed below, and not up there, else it will not work.
scrollX();
scrollY();