-
import mx.utils.Delegate;
-
import mx.transitions.easing.*;
-
import mx.transitions.Tween;
-
-
/**
-
* 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 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: true,
-
easeFunc: Regular.easeOut,
-
duration: .25,
-
arrowMove: 50,
-
scaleScroller: true,
-
autoHideControls: true
-
});
-
var scroller:AxisScroller = new AxisScroller(content_mc, content_mc.scroller_mc, content_mc.movie_mc, content_mc.track_mc, content_mc.mask_mc, "y", optionalObj);
-
* </pre>
-
* </code>
-
*
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 2.0
-
*/
-
-
class com.reintroducing.ui.AxisScroller
-
{
-
//- PRIVATE VARIABLES -------------------------------------------------------------------------------------
-
-
private var _changeProp:String;
-
private var _mouseAxis:String;
-
private var _changeScale:String;
-
private var _nextPosition:Number;
-
private var _arrowMove:Number;
-
private var _scaleScroller:Boolean;
-
private var _autoHideControls:Boolean;
-
private var _mouseIsPressedDown:Boolean;
-
private var _trackOffset:Number;
-
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:Number;
-
private var _arrowPressed:String;
-
-
//- PUBLIC VARIABLES --------------------------------------------------------------------------------------
-
-
public static var 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($holder, $scroller, $toBeScrolled, $track, $mask, $axis, $optionalParams);</code></pre>
-
*
-
* @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($holder:MovieClip, $scroller:MovieClip, $toBeScrolled:MovieClip, $track:MovieClip, $mask:MovieClip, $axis:String, $optionalParams:Object)
-
{
-
this._holder = $holder;
-
this._scroller = $scroller;
-
this._toBeScrolled = $toBeScrolled;
-
this._track = $track;
-
this._mask = $mask;
-
this._axis = "_" + $axis;
-
-
this._scrollType = ($optionalParams.scrollType == undefined) ? "easing" : $optionalParams.scrollType;
-
this._isTrackClickable = ($optionalParams.isTrackClickable == undefined) ? true : $optionalParams.isTrackClickable;
-
this._arrows = ($optionalParams.useArrows == undefined) ? false : $optionalParams.useArrows;
-
this._upArrow = ($optionalParams.upArrow == undefined) ? null : $optionalParams.upArrow;
-
this._downArrow = ($optionalParams.downArrow == undefined) ? null : $optionalParams.downArrow;
-
this._continuousScroll = ($optionalParams.continuousScroll == undefined) ? false : $optionalParams.continuousScroll;
-
this._easeFunc = ($optionalParams.easeFunc == undefined) ? Regular.easeOut : $optionalParams.easeFunc;
-
this._duration = ($optionalParams.duration == undefined) ? .25 : $optionalParams.duration;
-
this._arrowMove = ($optionalParams.arrowMove == undefined) ? 100 : $optionalParams.arrowMove;
-
this._autoHideControls = ($optionalParams.autoHideControls == undefined) ? false : $optionalParams.autoHideControls;
-
this._scaleScroller = ($optionalParams.scaleScroller == undefined) ? false : $optionalParams.scaleScroller;
-
-
this.manageAxis(this._axis);
-
this.init();
-
}
-
-
//- PRIVATE METHODS ---------------------------------------------------------------------------------------
-
-
// initiates listeners and other events
-
private function init():Void
-
{
-
Mouse.addListener(this);
-
Key.addListener(this);
-
-
this._holder.onEnterFrame = Delegate.create(this, manageScrolling);
-
-
this.activateButtonEvents();
-
}
-
-
// re-activates the button events
-
private function activateButtonEvents():Void
-
{
-
this._scroller.onPress = Delegate.create(this, manageMouseDown);
-
-
this._scroller.onRelease = this._scroller.onReleaseOutside = Delegate.create(this, manageMouseUp);
-
this._scroller.useHandCursor = true;
-
-
if (this._isTrackClickable)
-
{
-
this._track.onRelease = Delegate.create(this, manageTrack);
-
this._track.useHandCursor = true;
-
}
-
-
if (this._arrows)
-
{
-
this._upArrow.onPress = Delegate.create(this, manageUpArrow);
-
this._upArrow.onRelease = Delegate.create(this, resetArrowTimer);
-
-
this._downArrow.onPress = Delegate.create(this, manageDownArrow);
-
this._downArrow.onRelease = Delegate.create(this, resetArrowTimer);
-
-
this._downArrow.useHandCursor = this._upArrow.useHandCursor = true;
-
}
-
}
-
-
// destroys the events on the buttons
-
private function killButtonEvents():Void
-
{
-
this._scroller.onPress = this._scroller.onRelease = this._scroller.onReleaseOutside = null;
-
this._scroller.useHandCursor = false;
-
-
if (this._isTrackClickable)
-
{
-
this._track.onRelease = null;
-
this._track.useHandCursor = false;
-
}
-
-
if (this._arrows)
-
{
-
this._upArrow.onPress = this._downArrow.onPress = null;
-
this._upArrow.onRelease = this._downArrow.onRelease = null;
-
this._upArrow.useHandCursor = this._downArrow.useHandCursor = 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 = "_xmouse";
-
this._changeScale = "_xscale";
-
}
-
else if ($axis == "_y")
-
{
-
this._changeProp = "_height";
-
this._mouseAxis = "_ymouse";
-
this._changeScale = "_yscale";
-
}
-
-
this._trackOffset = - (this._scroller[this._changeProp] / 2);
-
}
-
-
// calculates values and responds to changes by the scroller
-
private function manageScrolling():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:Number = Math.round(((this._scroller[this._axis] - trackStart) / trackRange) * 100);
-
var targetPosition:Number = 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():Void
-
{
-
this._mouseIsPressedDown = true;
-
}
-
-
// regulates mouse released
-
private function manageMouseUp():Void
-
{
-
this._mouseIsPressedDown = false;
-
}
-
-
// moves the scroller up when the up arrow is clicked
-
private function moveUp():Void
-
{
-
if (this._scrollType == "instant")
-
{
-
this._nextPosition = Math.round(this._scroller[this._axis] - this._arrowMove);
-
-
if (this._nextPosition <this._trackStart)
-
{
-
this._scroller[this._axis] = this._trackStart;
-
}
-
else
-
{
-
this._scroller[this._axis] = this._nextPosition;
-
}
-
}
-
else if (this._scrollType == "easing")
-
{
-
this._nextPosition = Math.round(this._scroller[this._axis] - this._arrowMove);
-
-
if (this._nextPosition <this._trackStart)
-
{
-
this._tween = new Tween(this._scroller, this._axis, this._easeFunc, this._scroller[this._axis], this._trackStart, this._duration, true);
-
}
-
else
-
{
-
this._tween = new Tween(this._scroller, this._axis, this._easeFunc, this._scroller[this._axis], this._nextPosition, this._duration, true);
-
}
-
}
-
}
-
-
// moves the scroller down when the down arrow is clicked
-
private function moveDown():Void
-
{
-
if (this._scrollType == "instant")
-
{
-
this._nextPosition = Math.round(this._scroller[this._axis] + this._arrowMove);
-
-
if (this._nextPosition> this._trackEnd)
-
{
-
this._scroller[this._axis] = this._trackEnd;
-
}
-
else
-
{
-
this._scroller[this._axis] = this._nextPosition;
-
}
-
}
-
else if (this._scrollType == "easing")
-
{
-
this._nextPosition = Math.round(this._scroller[this._axis] + this._arrowMove);
-
-
if (this._nextPosition> this._trackEnd)
-
{
-
this._tween = new Tween(this._scroller, this._axis, this._easeFunc, this._scroller[this._axis], this._trackEnd, this._duration, true);
-
}
-
else
-
{
-
this._tween = new Tween(this._scroller, this._axis, this._easeFunc, this._scroller[this._axis],