Here’s a little flash scrollbar that will be working in most major browsers and is compatible with both Windows and Mac osx. It’s configured to be resizable and reused, as always. I have tested it on various major browsers, but obviously not all of them, so if there’s any bugs out there kindly leave us a comment and I will try to get a fix on that.
The Mac compatible mousewheel scroll is courtesy of SWFwheel from Spark Project. For full documentation on the protocol (including a list of browser that will be working) click here.
Alas, the scrollbar itself can be seen by clicking here (shadowbox preview).
I am please to say that this scrollbar does all the basics of a html scrollbar, including clickable and dragable functions. The only apparent set back is that it wouldn’t react to a cursor that is not in the flash area, this could be somewhat annoying when the user is dragging the scroll face and rolled his mouse outside the stage. Once again, this is one of many flash flaws. Depending on the usage, it might not be significant, even so, this is why we don’t generally use a full screen flash scrollbar; We recommend using javascript to resize the HTML scrollbar. A great source could be found in Duncan Reid’s website.
We needed a fullscreen flash scrollbar for a very specific reason, so I might as well share what we did with you.
Sourcecode Scroller.as: (download at the end of post)
import flash.display.Sprite;
import flash.events.*;
import flash.geom.*;
import flash.display.MovieClip;
import flash.display.Stage;
public class Scroller extends Sprite {
private static var scroller:MovieClip = new MovieClip();
private static var stageHeight:Number;
private static var previousHeight:Number = 0;
private static var bgCount:uint = 0;
private static var scrollFace:iScrollface = new iScrollface();
public static var containerHeight:Number = 0;
private static var savedHeight:Number = 0;
private static var top:Number;
private static var bottom:Number;
private static var dragBot:Number;
private static var range:Number;
private static var sRect:Rectangle = new Rectangle(0,0,0,1);
private static var sPos:Number;
private static var ratio:Number;
private static var allowScroll:Boolean;
private static var stage:Stage;
public function Scroller(s:Stage) {
stage = s
addChild(scroller);
addChild(scrollFace);
scrollFace.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
s.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
}
public static function adjustHeightBg (num:Number) {
//duplicating scrollbar background
stageHeight = num;
if(previousHeight < stageHeight) {
var scrollBg:iScrollbg = new iScrollbg();
scroller.addChild(scrollBg);
scrollBg.y = bgCount*scrollBg.height;
bgCount++;
previousHeight += scrollBg.height;
adjustHeightBg(num);
}
}
public static function init() {
savedHeight = containerHeight;
if(savedHeight < stageHeight) {
scrollFace.alpha = 0;
allowScroll = false;
scroller.removeEventListener(MouseEvent.MOUSE_DOWN, clickScroll);
} else {
scrollFace.alpha = 1;
allowScroll = true;
scroller.addEventListener(MouseEvent.MOUSE_DOWN, clickScroll);
}
top = 0;
dragBot = (0 + stageHeight) - scrollFace.height;
bottom = stageHeight - (scrollFace.height);
range = bottom - top;
// CONTAINER MOVEMENT, change to refer to anything you want to scroll
Main.container.y = 0;
// CONTAINER MOVEMENT END
scrollFace.y = 0;
sRect.height = dragBot;
}
private static function dragScroll(e:MouseEvent):void {
scrollFace.startDrag(false, sRect);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
public static function mouseWheelHandler(event:MouseEvent):void {
if(allowScroll == true) {
if (event.delta < 0) {
if (scrollFace.y < dragBot) {
scrollFace.y-=(event.delta*2);
if (scrollFace.y > dragBot) {
scrollFace.y = dragBot;
}
startScroll();
}
} else {
if (scrollFace.y > top) {
scrollFace.y-=(event.delta*2);
if (scrollFace.y < top) {
scrollFace.y = top;
}
startScroll();
}
}
}
}
private static function clickScroll(event:MouseEvent):void {
scrollFace.y = scroller.mouseY - scrollFace.height;
if(scrollFace.y < 0) {
scrollFace.y = 0;
}
startScroll();
}
private static function stopScroll(event:MouseEvent):void {
scrollFace.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
private static function moveScroll(event:MouseEvent):void {
startScroll();
}
private static function startScroll():void {
ratio = (savedHeight - range)/range;
sPos = (scrollFace.y * ratio);
// CONTAINER MOVEMENT, change to refer to anything you want to scroll
Main.container.y = -sPos;
// CONTAINER MOVEMENT END
}
}
}
