Seems I see folks ask about this effect fairly often, so I converted an AS2 version I did to AS3
Necessary classes:
ScrollBar
[AS]package com.onebyonedesign.utils {
import flash.geom.ColorTransform;
import flash.geom.Transform;
import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.display.DisplayObjectContainer;
import flash.events.MouseEvent;
import flash.events.Event;
import com.onebyonedesign.utils.events.ScrollBarEvent;
public class OBO_FullScrollBar extends Sprite {
private static var OBO_FSB:OBO_FullScrollBar;
public static const RIGHT:String = "right";
public static const LEFT:String = "left";
private var _addedToStage:Boolean = false;
private var _pressed:Boolean = false;
private var _content:DisplayObjectContainer;
private var _scrollValue:Number;
private var _easeAmount:int;
private var _scrollBar:Sprite;
private var _scroller:Sprite;
private var _scrollTrack:Sprite;
private var _trackColor:uint;
private var _scrollerColor:uint;
private var _position:String;
private var _useScrollWheel:Boolean;
/**
*
* @author Devon O. Wolfgang
* @date 5/26/2007
* @description creates a full screen scroll bar for use with full browser flash applications
*
* @param trackColor uint hexadecimal color of scrollbar track
* @param scrollerColor uint hexadecimal color of scrollbar scroller
* @param content DisplayObjectContainer the content that will be scrolled - Sprite, MovieClip, or Shape
* @param easeAmount Number how much easing applied to scrolled content (1 = no ease, Number.POSITIVE_INFINITY = way too much ease) - default is 1
* @param position String OBO_FullScrollBar.LEFT or OBO_FullScrollBar.RIGHT - determines which side of browser scrollbar appears on - default is RIGHT
* @param useScrollWheel Boolean specifies whether or not scrollbar is mouse wheel enabled - default is false
*
* @usage var myScrollBar:OBO_FullScrollBar = OBO_FullScrollBar.createScrollBar(0x000000, 0x535353, scrollContent, 1, OBO_FullScrollBar.RIGHT, true);
*/
function OBO_FullScrollBar(creator:CreatorClass, tc:uint, sc:uint, c:DisplayObjectContainer, e:int = 1, pos:String = RIGHT, sw:Boolean = false) {
if (pos != "right" && pos != "left") throw new Error("OBO_FullScrollBar error: constructor method position argument requires either \"left\" (OBO_FullScrollBar.LEFT) or \"right\" (OBO_FullScrollBar.RIGHT).");
_trackColor = tc;
_scrollerColor = sc;
_content = c;
_easeAmount = (e > 0) ? Math.ceil(e) : 1;
_position = pos;
_useScrollWheel = sw;
initScroller();
}
private function initScroller():void {
makeScrollBar();
addChild(_scrollBar);
_scrollBar.addEventListener(Event.ADDED_TO_STAGE, addedListener);
_scroller.buttonMode = true;
_scroller.useHandCursor = false;
}
private function addedListener(e:Event):void {
_scrollBar.removeEventListener(Event.ADDED_TO_STAGE, adjustSize);
_addedToStage = true;
if (_useScrollWheel) stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelListener);
_scroller.addEventListener(MouseEvent.MOUSE_DOWN, onDownListener);
stage.addEventListener(MouseEvent.MOUSE_UP, onUpListener);
adjustSize();
}
private function onDownListener(me:MouseEvent):void {
_pressed = true;
dispatchEvent(new ScrollBarEvent(ScrollBarEvent.SCROLL_DOWN));
_scroller.startDrag(false, new Rectangle(0, 0, 0, stage.stageHeight - _scroller.height));
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
}
private function onUpListener(me:MouseEvent):void {
if (_pressed) {
_pressed = false;
dispatchEvent(new ScrollBarEvent(ScrollBarEvent.SCROLL_UP));
_scroller.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
}
}
private function mouseWheelListener(me:MouseEvent):void {
var d:Number = me.delta;
if (d > 0) {
if ((_scroller.y - (d * 4)) >= 0){
_scroller.y -= d * 4;
} else {
_scroller.y = 0;
}
if (!_scroller.willTrigger(Event.ENTER_FRAME)) _scroller.addEventListener(Event.ENTER_FRAME, scrollContent);
} else {
if (((_scroller.y + _scroller.height) + (Math.abs(d) * 4)) <= stage.stageHeight){
_scroller.y += Math.abs(d) * 4;
} else {
_scroller.y = stage.stageHeight - _scroller.height;
}
if (!_scroller.willTrigger(Event.ENTER_FRAME)) _scroller.addEventListener(Event.ENTER_FRAME, scrollContent);
}
}
private function mouseMoveListener(me:MouseEvent):void {
me.updateAfterEvent();
if (!_scroller.willTrigger(Event.ENTER_FRAME)) _scroller.addEventListener(Event.ENTER_FRAME, scrollContent);
}
private function scrollContent(e:Event):void {
var ty:Number = -((_content.height - stage.stageHeight) * (_scroller.y / _scrollValue));
var dist:Number = ty - _content.y;
var moveAmount:Number = dist / _easeAmount;
_content.y += moveAmount;
if (Math.abs(_content.y - ty) < .5) {
_scroller.removeEventListener(Event.ENTER_FRAME, scrollContent);
_content.y = Math.round(ty);
}
}
private function makeScrollBar():void {
_scrollBar = new Sprite();
_scrollTrack = createTrack();
_scroller = createScroller();
_scrollBar.addChild(_scrollTrack);
_scrollBar.addChild(_scroller);
}
private function createTrack():Sprite {
var t:Sprite = new Sprite();
t.graphics.beginFill(_trackColor);
t.graphics.drawRect(0, 0, 16, 16);
t.graphics.endFill();
return t;
}
private function createScroller():Sprite {
var s:Sprite = new Sprite();
s.graphics.beginFill(_scrollerColor);
s.graphics.drawRect(0, 0, 16, 16);
s.graphics.endFill();
return s;
}
/*
*
* public methods
*
*/
// singleton instantiation
public static function createScrollBar(trackColor:uint, scrollerColor:uint, content:DisplayObjectContainer, easeAmount:int = 1, position:String = RIGHT, useMouseWheel:Boolean = false):OBO_FullScrollBar {
if (OBO_FSB == null) OBO_FSB = new OBO_FullScrollBar(new CreatorClass(), trackColor, scrollerColor, content, easeAmount, position, useMouseWheel);
return OBO_FSB;
}
// Adusts and repositions scrollbar. Call this when stage or content object is resized.
public function adjustSize():void {
if (_addedToStage) {
_scrollBar.x = (_position == LEFT) ? 0 : stage.stageWidth - 16;
_scrollTrack.height = stage.stageHeight;
_scroller.height = Math.ceil((stage.stageHeight / _content.height) * stage.stageHeight);
if ((_scroller.y + _scroller.height) > stage.stageHeight) _scroller.y = stage.stageHeight - _scroller.height;
_scroller.y = (_content.height < stage.stageHeight) ? 0 : _scroller.y;
_scrollBar.visible = (_content.height > stage.stageHeight);
_scrollValue = stage.stageHeight - _scroller.height;
_content.y = -((_content.height - stage.stageHeight) * (_scroller.y / _scrollValue));
}
}
// allows or disallows mouse wheel scrolling
public function set useScrollWheel(b:Boolean):void {
if (b && _addedToStage && !stage.willTrigger(MouseEvent.MOUSE_WHEEL)) {
stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelListener);
} else if (stage.willTrigger(MouseEvent.MOUSE_WHEEL)) {
stage.removeEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelListener);
}
}
public function get useScrollWheel():Boolean {
return _useScrollWheel;
}
// sets the display object that will be scrolled
public function set scrollTarget(targ:DisplayObjectContainer):void {
_content = targ;
adjustSize();
}
public function get scrollTarget():DisplayObjectContainer {
return _content;
}
// sets the amout of ease to use
public function set easeAmount(e:int):void {
_easeAmount = (e <=0 ) ? 1 : Math.ceil(e);
}
public function get easeAmount():int {
return _easeAmount;
}
// sets the color of the scrollbar track
public function set trackColor(col:uint):void {
var tColor_cxf:ColorTransform = new ColorTransform();
_trackColor = col;
tColor_cxf.color = _trackColor;
_scrollTrack.transform.colorTransform = tColor_cxf;
}
public function get trackColor():uint {
return _trackColor;
}
// sets the color of the scrollbar scroller
public function set scrollerColor(col:Number):void {
var sColor_cxf:ColorTransform = new ColorTransform();
_scrollerColor = col;
sColor_cxf.color = _scrollerColor;
_scroller.transform.colorTransform = sColor_cxf;
}
public function get scrollerColor():Number {
return _scrollerColor;
}
}
}
internal class CreatorClass {};[/AS]
Event
[AS]package com.onebyonedesign.utils.events {
import flash.events.Event;
public class ScrollBarEvent extends Event {
public static const SCROLL_DOWN:String = "onDown";
public static const SCROLL_UP:String = "onUp";
public function ScrollBarEvent(dir:String) {
super(dir);
}
}
}[/AS]
And to test it out:
something to scroll
[AS]package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
public class ScrollContent extends Sprite {
private var _gibberish:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pellentesque volutpat est. Donec dolor elit, vestibulum ac, porttitor at, gravida at, justo. Nam eu nibh. Etiam sed nisl vel urna lobortis pellentesque. Aenean fermentum. Integer sem pede, convallis sit amet, volutpat sed, ultrices eu, tortor. Sed non velit eu lectus suscipit eleifend. Donec ac ipsum in lorem varius venenatis. Phasellus est ante, rutrum id, rutrum id, auctor ac, dolor. Nam risus nunc, bibendum sed, mattis nec, tempor ac, ante. Nunc dapibus erat vehicula diam.
Vivamus vehicula aliquet erat. Praesent sed justo a metus vestibulum adipiscing. Curabitur sit amet erat ut felis fringilla varius. Aenean sollicitudin. Donec pede. Aliquam venenatis. Nullam faucibus quam eu tellus. Aliquam dapibus mauris eget massa. In orci nibh, eleifend a, pulvinar in, lobortis interdum, lacus. Aenean faucibus. Vivamus eu ante. Etiam ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque nec felis nec augue placerat scelerisque. Sed tincidunt eros vel metus laoreet molestie. Aliquam adipiscing. Morbi euismod elit ac ipsum.
Quisque scelerisque molestie velit. Sed lobortis tincidunt sapien. Sed sit amet nulla in ante dignissim varius. Quisque ultricies purus ac est. Duis est. Nulla facilisi. Curabitur eleifend quam ac purus. Quisque dapibus purus vitae lectus. Praesent nec orci. Curabitur cursus, erat sit amet aliquam faucibus, mi nibh tincidunt libero, eu accumsan est elit sit amet neque.
Pellentesque urna. Curabitur sagittis condimentum est. Fusce blandit, ligula sit amet vulputate sollicitudin, augue mauris pulvinar eros, et fringilla justo diam eget felis. Sed augue. Pellentesque sit amet odio. Nam sollicitudin vestibulum tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam libero ante, aliquet at, blandit at, suscipit quis, tortor. Curabitur et odio ac erat fermentum porttitor. Pellentesque id mauris vitae nisl sagittis tempor. Aliquam aliquet ultrices lorem.
Mauris commodo blandit nisi. Nulla lorem mauris, sodales ac, fringilla non, tincidunt placerat, purus. Maecenas orci massa, aliquam ut, tempus eget, commodo at, elit. Cras tristique velit in purus. Proin sed elit. Etiam varius. Etiam eget dui. Fusce mollis purus in metus. Curabitur et turpis at neque pulvinar volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec cursus accumsan enim. Mauris posuere dictum dolor. Sed ullamcorper. Donec felis eros, dictum sed, ornare ac, fermentum nec, felis. Pellentesque lectus elit, imperdiet quis, pellentesque at, sodales nec, neque. Curabitur nonummy. Cras ultricies laoreet tortor. Nullam sit amet risus. Phasellus laoreet. Praesent pharetra lectus sed felis malesuada rutrum. Nullam enim eros, suscipit eu, malesuada quis, ornare sed, libero.
Proin metus nulla, euismod vitae, lacinia quis, rutrum at, ante. Vestibulum convallis augue ut metus. Integer in nisi lacinia erat vulputate porttitor. Ut dictum elementum orci. Morbi congue, magna eu laoreet sollicitudin, elit felis dignissim leo, sed posuere orci nibh a velit. Suspendisse dapibus orci eget neque. Proin faucibus, lacus vitae venenatis porta, magna est varius est, eget posuere mauris nisi sed nibh. Duis faucibus iaculis magna. Vivamus sit amet augue. In ac arcu. Morbi ac odio. Nulla facilisi. Pellentesque auctor tellus non risus. Aliquam bibendum ligula nec purus. Integer sem. Nullam malesuada. Praesent gravida sagittis enim.
Integer cursus mauris vel pede. Fusce pulvinar, lorem nec tempor semper, nisi metus consequat nisi, in tincidunt dui nisi in elit. Duis id risus. Aenean fringilla, libero ut pharetra iaculis, nisl enim scelerisque orci, vitae placerat velit leo et urna. Maecenas tempus consequat nibh. Morbi dui sapien, semper eget, sagittis vel, mollis id, libero. Proin eget turpis. Nulla facilisi. Pellentesque id velit id justo suscipit ultrices. Pellentesque felis lacus, molestie a, rutrum a, dignissim ut, urna. Nulla facilisi. Ut leo arcu, molestie vitae, sollicitudin id, viverra eget, sapien. Nullam id ipsum. Duis leo elit, molestie eget, pharetra sed, cursus vitae, leo. Nunc tristique dui et nulla. Praesent dolor. Aenean eu mi at felis blandit aliquam. Cras felis. Duis suscipit ullamcorper quam. Proin condimentum.";
private var _tf:TextField;
private var _fmt:TextFormat;
public function ScrollContent() {
_fmt = new TextFormat("_sans", 12, 0x999999);
_tf = new TextField();
_tf.defaultTextFormat = _fmt;
_tf.autoSize = TextFieldAutoSize.LEFT;
_tf.multiline = true;
_tf.wordWrap = true;
_tf.background = true;
_tf.backgroundColor = 0x333333;
_tf.width = 300;
_tf.text = _gibberish;
addChild(_tf);
}
}
}[/AS]
and document class
[AS]package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import com.onebyonedesign.utils.OBO_FullScrollBar;
import com.onebyonedesign.utils.events.ScrollBarEvent;
public class ScrollExample extends Sprite {
private var _scrollContent:ScrollContent;
private var _myScrollBar:OBO_FullScrollBar;
private var _speedo:Speedometer;
public function ScrollExample() {
initStage();
_scrollContent = new ScrollContent();
addChild(_scrollContent);
_myScrollBar = OBO_FullScrollBar.createScrollBar(0x000000, 0x999999, _scrollContent, 5, OBO_FullScrollBar.RIGHT, true);
_myScrollBar.addEventListener(ScrollBarEvent.SCROLL_DOWN, downListener);
_myScrollBar.addEventListener(ScrollBarEvent.SCROLL_UP, upListener);
addChild(_myScrollBar);
stageListener();
}
private function downListener(evt:ScrollBarEvent):void {
_myScrollBar.scrollerColor = 0x993333;
}
private function upListener(evt:ScrollBarEvent):void {
_myScrollBar.scrollerColor = 0x999999;
}
private function initStage() {
stage.frameRate = 60;
stage.showDefaultContextMenu = false;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, stageListener);
}
private function stageListener(e:Event = null) {
_scrollContent.x = stage.stageWidth / 2 - _scrollContent.width / 2;
_myScrollBar.adjustSize();
}
}
}[/AS]
EXAMPLE:
All that hoo-ha will get you this: http://www.onebyonedesign.com/flash/fullscreenscroll/
