Custom scrollbar AS

programming flash
1

Normally I would use the scrollbar component and skin it to suit my needs but today I needed to make a custom scrollbar because I didn’t want the slider part to expand or contract.

So… I went ahead and did it and it works just fine :stuck_out_tongue: It didn’t even take me very long to do so I must be improving a bit.

But it’s times like these, where I’m proud of myself for making a breakthrough that I need to humble myself and try to expand my understanding of AS even further.

So I ask myself, “What would one of the real AS hotshots at Kirupa.com do?” And things like AS 2.0 and prototypes and other things I don’t understand at all start flashing through my head.

To start here’s what I wrote to operate my scrollbar:

slidePerc = 0;
newsScroll.upArrow.onPress = function() {
	newsScroll.upArrow.gotoAndStop(2);
	arrowScroll("up");
};
newsScroll.upArrow.onRelease = newsScroll.upArrow.onReleaseOutside = function() {
	newsScroll.upArrow.gotoAndStop(1);
	arrowScroll("none");
};
newsScroll.downArrow.onPress = function() {
	newsScroll.downArrow.gotoAndStop(2);
	arrowScroll("down");
};
newsScroll.downArrow.onRelease = newsScroll.downArrow.onReleaseOutside = function() {
	newsScroll.downArrow.gotoAndStop(1);
	arrowScroll("none");
};
function arrowScroll(dir) {
	this.onEnterFrame = function() {
		slidePerc = ((newsBox.scroll-1)/(newsBox.maxscroll-1));
		newsScroll.scrollArea.scroller._y = (newsScroll.scrollArea._height-newsScroll.scrollArea.scroller._height)*slidePerc;
		if (dir == "up") {
			newsBox.scroll--;
		} else if (dir == "down") {
			newsBox.scroll++;
		} else if (dir == "none") {
			delete onEnterFrame;
		}
	};
}
newsScroll.scrollArea.scroller.onPress = function() {
	newsScroll.scrollArea.scroller.startDrag(false, 0, 0, 0, newsScroll.scrollArea._height-newsScroll.scrollArea.scroller._height);
	arrowDrag(true);
};
newsScroll.scrollArea.scroller.onRelease = newsScroll.scrollArea.scroller.onReleaseOutside=function () {
	newsScroll.scrollArea.scroller.stopDrag();
	arrowDrag(false);
};
function arrowDrag (cond){
	this.onEnterFrame = function(){
		if(cond){
			slidePerc = newsScroll.scrollArea.scroller._y/(newsScroll.scrollArea._height-newsScroll.scrollArea.scroller._height);
			newsBox.scroll = (newsBox.maxscroll*slidePerc)+1;
		}else{
			delete onEnterFrame;
		}
	}
}

Now what would you do to make it smaller/better/smarter/whatever?