-
/**
-
* Creates a scroller that allows for scrolling in the x or y axis, using the mouse wheel/arrow keys, different easing functions and types, and some other miscellaneous cool things.
-
*
-
* @usage
-
* <code>
-
* <pre>
-
import flash.events.MouseEvent;
-
import fl.transitions.Tween;
-
import fl.transitions.easing.*;
-
import com.reintroducing.ui.AxisScroller;
-
stop();
-
var optionalObj:Object = new Object(
-
{
-
scrollType: "easing",
-
isTrackClickable: true,
-
useArrows: true,
-
upArrow: content_mc.up_btn,
-
downArrow: content_mc.down_btn,
-
continuousScroll: false,
-
easeFunc: Regular.easeOut,
-
duration: .25,
-
arrowMove: 50,
-
scaleScroller: true,
-
autoHideControls: true
-
});
-
var scroller:AxisScroller = new AxisScroller(stage, content_mc, content_mc.scroller_mc, content_mc.movie_mc, content_mc.track_mc, content_mc.mask_mc, "y", optionalObj);
-
reset_btn.addEventListener(MouseEvent.MOUSE_DOWN, resetScroller);
-
function resetScroller($evt:MouseEvent):void
-
{
-
scroller.reset();
-
}
-
* </pre>
-
* </code>
-
*
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
package com.reintroducing.ui
-
{
-
import flash.display.MovieClip;
-
import flash.display.Stage;
-
import flash.events.Event;
-
import flash.events.KeyboardEvent;
-
import flash.events.MouseEvent;
-
import flash.events.TimerEvent;
-
import flash.utils.Timer;
-
-
import fl.transitions.Tween;
-
import fl.transitions.easing.*;
-
-
public class AxisScroller
-
{
-
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
-
-
private var _stage:Stage;
-
private var _changeProp:String;
-
private var _mouseAxis:String;
-
private var _changeScale:String;
-
private var _nextPosition:int;
-
private var _arrowMove:Number;
-
private var _scaleScroller:Boolean;
-
private var _autoHideControls:Boolean;
-
private var _mouseIsPressedDown:Boolean;
-
private var _trackStart:Number;
-
private var _trackEnd:Number;
-
private var _tween:Tween;
-
private var _arrow1Tween:Tween;
-
private var _arrow2Tween:Tween;
-
private var _scrollerTween:Tween;
-
private var _trackTween:Tween;
-
private var _easeFunc:Function;
-
private var _duration:Number;
-
private var _holder:MovieClip;
-
private var _scroller:MovieClip;
-
private var _toBeScrolled:MovieClip;
-
private var _track:MovieClip;
-
private var _mask:MovieClip;
-
private var _axis:String;
-
private var _scrollType:String;
-
private var _isTrackClickable:Boolean;
-
private var _arrows:Boolean;
-
private var _upArrow:MovieClip;
-
private var _downArrow:MovieClip;
-
private var _continuousScroll:Boolean;
-
private var _arrowTimer:Timer;
-
private var _arrowPressed:String;
-
-
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
-
-
public static const DEFAULT_NAME:String = "com.reintroducing.ui.AxisScroller";
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
/**
-
* Creates a new instance of the AxisScroller class.
-
*
-
* <p>
-
* The $optionalParams parameter takes in a couple of values.
-
* <ul>
-
* <li>scrollType: A string representing the scroll type, "instant" or "easing" (default: "easing")</li>
-
* <li>isTrackClickable: A boolean value that makes the track clickable so that you can scroll directly to a certain spot (default: true)</li>
-
* <li>useArrows: A boolean value that allows the use of arrow buttons (default: false)</li>
-
* <li>upArrow: If useArrows, a movie clip that represents the up arrow button (default: null)</li>
-
* <li>downArrow: If useArrows, a movie clip that represents the down arrow button (default: null)</li>
-
* <li>continuousScroll: If useArrows, a boolean that specifies if when pressing the arrows the scrolling should happen continuously or not (default: false)</li>
-
* <li>easeFunc: A function representing the ease type you'd like to use, as per the Tween class easing functions (default: Regular.easeOut)</li>
-
* <li>duration: An integer (in seconds) representing the time that the scrollable content will take to move when easing is used (default: .25)</li>
-
* <li>arrowMove: An integer (in pixels) that the scrollable content will move onMouseWheel/Key/Arrow movement (default: 100)</li>
-
* <li>autoHideControls: A boolean value that hides the scroller/track/arrows (if applicable) if the scroll content is too small to scroll (default: false)</li>
-
* <li>scaleScroller *: A boolean value that allows automatic scaling of the scroll bar (default: false)</li>
-
* </ul>
-
* * If you use the scaleScroller optional parameter, please make the size of the scroll bar the same size as the track and this will take care of
-
* scaling it automatically for you. If you AREN'T using this parameter, please size your scroll bar accordingly manually.
-
* </p>
-
*
-
* @usage <pre><code>var scroller:AxisScroller = new AxisScroller($stage, $holder, $scroller, $toBeScrolled, $track, $mask, $axis, $optionalParams);</code></pre>
-
*
-
* @param $stage The stage object to use for keyboard input
-
* @param $holder The movie clip (or timeline) that holds all of the other clips corresponding to the scroller
-
* @param $scroller The movie clip to be used as the scroller
-
* @param $toBeScrolled The movie clip where the scrollable content resides
-
* @param $track The movie clip that is used as the track (measures extremes)
-
* @param $mask The movie clip that is used as the mask for the scrollable content area
-
* @param $axis A string value of either "x" or "y" that determines what axis the content is scrolled along
-
* @param $optionalParams Optional parameters to further control the scroller
-
*/
-
-
public function AxisScroller($stage:Stage, $holder:MovieClip, $scroller:MovieClip, $toBeScrolled:MovieClip, $track:MovieClip, $mask:MovieClip, $axis:String, $optionalParams:Object)
-
{
-
this._stage = $stage;
-
this._holder = $holder;
-
this._scroller = $scroller;
-
this._toBeScrolled = $toBeScrolled;
-
this._track = $track;
-
this._mask = $mask;
-
this._axis = $axis;
-
-
this._scrollType = ($optionalParams.scrollType == null) ? "easing" : $optionalParams.scrollType;
-
this._isTrackClickable = ($optionalParams.isTrackClickable == null) ? true : $optionalParams.isTrackClickable;
-
this._arrows = ($optionalParams.useArrows == null) ? false : $optionalParams.useArrows;
-
this._upArrow = ($optionalParams.upArrow == null) ? null : $optionalParams.upArrow;
-
this._downArrow = ($optionalParams.downArrow == null) ? null : $optionalParams.downArrow;
-
this._continuousScroll = ($optionalParams.continuousScroll == null) ? false : $optionalParams.continuousScroll;
-
this._easeFunc = ($optionalParams.easeFunc == null) ? Regular.easeOut : $optionalParams.easeFunc;
-
this._duration = ($optionalParams.duration == null) ? .25 : $optionalParams.duration;
-
this._arrowMove = ($optionalParams.arrowMove == null) ? 100 : $optionalParams.arrowMove;
-
this._autoHideControls = ($optionalParams.autoHideControls == null) ? false : $optionalParams.autoHideControls;
-
this._scaleScroller = ($optionalParams.scaleScroller == null) ? false : $optionalParams.scaleScroller;
-
-
this.manageAxis(this._axis);
-
this.init();
-
}
-
-
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
-
-
// initiates listeners and other events
-
private function init():void
-
{
-
this._holder.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
-
this._holder.addEventListener(Event.ENTER_FRAME, manageScrolling);
-
this._stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
-
-
if (this._continuousScroll)
-
{
-
this._arrowTimer = new Timer(80);
-
this._arrowTimer.addEventListener(TimerEvent.TIMER, manageContinuousScroll);
-
}
-
-
this.activateButtonEvents();
-
}
-
-
// re-activates the button events
-
private function activateButtonEvents():void
-
{
-
this._scroller.addEventListener(MouseEvent.MOUSE_DOWN, manageMouseDown);
-
this._scroller.buttonMode = true;
-
-
if (this._isTrackClickable)
-
{
-
this._track.addEventListener(MouseEvent.MOUSE_UP, manageTrack);
-
this._track.buttonMode = true;
-
}
-
-
if (this._arrows)
-
{
-
this._upArrow.addEventListener(MouseEvent.MOUSE_DOWN, manageUpArrow);
-
this._upArrow.addEventListener(MouseEvent.MOUSE_UP, resetArrowTimer);
-
-
this._downArrow.addEventListener(MouseEvent.MOUSE_DOWN, manageDownArrow);
-
this._downArrow.addEventListener(MouseEvent.MOUSE_UP, resetArrowTimer);
-
-
this._downArrow.buttonMode = this._upArrow.buttonMode = true;
-
}
-
}
-
-
// destroys the events on the buttons
-
private function killButtonEvents():void
-
{
-
this._scroller.removeEventListener(MouseEvent.MOUSE_DOWN, manageMouseDown);
-
this._scroller.buttonMode = false;
-
-
if (this._isTrackClickable)
-
{
-
this._track.removeEventListener(MouseEvent.MOUSE_UP, manageTrack);
-
this._track.buttonMode = false;
-
}
-
-
if (this._arrows)
-
{
-
this._upArrow.removeEventListener(MouseEvent.MOUSE_UP, manageUpArrow);
-
this._upArrow.removeEventListener(MouseEvent.MOUSE_DOWN, manageUpArrow);
-
-
this._downArrow.removeEventListener(MouseEvent.MOUSE_UP, manageDownArrow);
-
this._downArrow.removeEventListener(MouseEvent.MOUSE_DOWN, manageDownArrow);
-
-
this._downArrow.buttonMode = this._upArrow.buttonMode = false;
-
}
-
}
-
-
// sets the axis at which the scroller will function against
-
private function manageAxis($axis:String):void
-
{
-
if ($axis == "x")
-
{
-
this._changeProp = "width";
-
this._mouseAxis = "mouseX";
-
this._changeScale = "scaleX";
-
}
-
else if ($axis == "y")
-
{
-
this._changeProp = "height";
-
this._mouseAxis = "mouseY";
-
this._changeScale = "scaleY";
-
}
-
}
-
-
// calculates values and responds to changes by the scroller
-
private function manageScrolling($evt:Event):void
-
{
-
var trackSize:Number = this._track[this._changeProp];
-
var trackStart:Number = this._track[this._axis];
-
var trackEnd:Number = this._track[this._axis] + trackSize - (this._scroller[this._changeProp]);
-
var trackRange:Number = trackEnd - trackStart;
-
var maskSize:Number = this._mask[this._changeProp];
-
var movieSize:Number = this._toBeScrolled[this._changeProp];
-
var minPosition:Number = this._mask[this._axis] + 2;
-
var maxPosition:Number = minPosition + movieSize - maskSize + 4;
-
var onePercentChange:Number = (maxPosition - minPosition) / 100;
-
var percent:int = Math.round(((this._scroller[this._axis] - trackStart) / trackRange) * 100);
-
var targetPosition:int = Math.round(minPosition - (onePercentChange * percent));
-
-
this._trackStart = trackStart;
-
this._trackEnd = trackEnd;
-
-
if (this._scrollType == "instant")
-
{
-
this._toBeScrolled[this._axis] = targetPosition;
-
}
-
else if (this._scrollType == "easing")
-
{
-
this._toBeScrolled[this._axis] += Math.round((targetPosition - this._toBeScrolled[this._axis]) / 5);
-
}
-
-
if (movieSize <maskSize)
-
{
-
onePercentChange = 0;
-
}
-
-
if (this._mouseIsPressedDown)
-
{
-
this._scroller[this._axis] = Math.round(this._holder[this._mouseAxis] - (this._scroller[this._changeProp] / 2));
-
}
-
-
if (this._scroller[this._axis] <trackStart)
-
{
-
this._scroller[this._axis] = Math.round(trackStart);
-
}
-
else if (this._scroller[this._axis]> trackEnd)
-
{
-
this._scroller[this._axis] = Math.round(trackEnd);
-
}
-
-
if (this._scaleScroller) this.manageScrollScaling(movieSize, maskSize);
-
-
this.manageControls(this._autoHideControls, movieSize, maskSize);
-
}
-
-
// regulates mouse pressed down
-
private function manageMouseDown($evt:MouseEvent):void
-
{
-
this._mouseIsPressedDown = true;