AS2: MousePositionPanel
View Example
View Documentation
Download Class & Example Files
Creates a scrolling panel that allows for scrolling in the x or y axis depending on where the mouse pointer is within the panel.
Actionscript:
-
/**
-
* Creates a scrolling panel that allows for scrolling in the x or y axis depending on where the mouse pointer is within the panel.
-
*
-
* @usage
-
* <code>
-
* <pre>
-
import com.reintroducing.ui.MousePositionPanel;
-
var mpp:MousePositionPanel = new MousePositionPanel(holder_mc, holder_mc.content_mc, holder_mc.mask_mc, "x", "withMouse", 10);
-
holder_mc.mask_mc.onRollOver = function():Void
-
{
-
mpp.startPanel();
-
};
-
holder_mc.mask_mc.onRollOut = function():Void
-
{
-
mpp.stopPanel();
-
};
-
* </pre>
-
* </code>
-
*
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
class com.reintroducing.ui.MousePositionPanel
-
{
-
//- PRIVATE VARIABLES -------------------------------------------------------------------------------------
-
-
private var _holder:MovieClip;
-
private var _mc:MovieClip;
-
private var _mask:MovieClip;
-
private var _axis:String;
-
private var _moveType:String;
-
private var _moveDir:Number;
-
private var _mouseAxis:String;
-
private var _changeProp:String;
-
private var _speed:Number;
-
private var _end:Number;
-
-
//- PUBLIC VARIABLES --------------------------------------------------------------------------------------
-
-
public static var DEFAULT_NAME:String = "com.reintroducing.ui.MousePositionPanel";
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
/**
-
* Creates a new instance of the MousePositionPanel class.
-
*
-
* @usage <pre><code>var mpp:MousePositionPanel = new MousePositionPanel($holder, $mc, $mask, $axis, $moveType, $speed);</code></pre>
-
*
-
* @param $holder The movie clip (or timeline) that holds the content and mask clips
-
* @param $mc The movie clip to be scrolled
-
* @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 $moveType A string, "withMouse" (moves with the mouse) or "againstMouse" (moves away from the mouse)
-
* @param $speed A number that represents how fast to scroll the clip
-
*/
-
-
public function MousePositionPanel($holder:MovieClip, $mc:MovieClip, $mask:MovieClip, $axis:String, $moveType:String, $speed:Number)
-
{
-
this._holder = $holder;
-
this._mc = $mc;
-
this._mask = $mask;
-
this._axis = "_" + $axis;
-
this._moveType = $moveType;
-
this._speed = $speed;
-
-
this.manageAxis(this._axis);
-
this.manageMoveType();
-
}
-
-
//- PRIVATE METHODS ---------------------------------------------------------------------------------------
-
-
private function manageAxis($axis:String):Void
-
{
-
if ($axis == "_x")
-
{
-
this._changeProp = "_width";
-
this._mouseAxis = "_xmouse";
-
}
-
else if ($axis == "_y")
-
{
-
this._changeProp = "_height";
-
this._mouseAxis = "_ymouse";
-
}
-
}
-
-
private function manageMoveType():Void
-
{
-
if (this._moveType == "withMouse")
-
{
-
this._moveDir = 1;
-
}
-
else if (this._moveType == "againstMouse")
-
{
-
this._moveDir = -1;
-
}
-
else
-
{
-
this._moveDir = 1;
-
}
-
}
-
-
private function movePanel(dir:Number):Void
-
{
-
var owner:MousePositionPanel = this;
-
var mousePercent:Number = (this._holder[this._mouseAxis] / this._mask[this._changeProp]);
-
var mSpeed:Number;
-
-
if (dir == 1)
-
{
-
mSpeed = 1 - mousePercent;
-
}
-
else
-
{
-
mSpeed = mousePercent;
-
}
-
-
this._end = Math.round(-((this._mc[this._changeProp] - this._mask[this._changeProp]) * mSpeed));
-
-
this._mc.onEnterFrame = function():Void
-
{
-
if (this[owner._axis] == owner._end)
-
{
-
delete this.onEnterFrame;
-
}
-
else if (this[owner._axis]> owner._end)
-
{
-
this[owner._axis] -= Math.ceil((this[owner._axis] - owner._end) * (owner._speed / 100));
-
}
-
else if (this[owner._axis] <owner._end)
-
{
-
this[owner._axis] += Math.ceil((owner._end - this[owner._axis]) * (owner._speed / 100));
-
}
-
};
-
}
-
-
//- PUBLIC METHODS ----------------------------------------------------------------------------------------
-
-
/**
-
* Starts the panel scrolling in the proper direction.
-
*
-
* @usage <pre><code>mpp.startPanel();</code></pre>
-
*
-
* @return Nothing
-
*/
-
-
public function startPanel():Void
-
{
-
var owner:MousePositionPanel = this;
-
-
_level0.onMouseMove = function():Void
-
{
-
owner.movePanel(owner._moveDir);
-
};
-
}
-
-
/**
-
* Stops the panel from scrolling any further.
-
*
-
* @usage <pre><code>mpp.stopPanel();</code></pre>
-
*
-
* @return Nothing
-
*/
-
-
public function stopPanel():Void
-
{
-
_level0.onMouseMove = null;
-
}
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
public function toString():String
-
{
-
return "com.reintroducing.ui.MousePositionPanel";
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
(No Ratings Yet)
Loading ...
Should'nt the content go opposite of the mouse..?
concider having a range of products.. how would u choose the last one.. if the mouse keeps following the first?
Again, you're not looking at the classes closely enough. There is a $moveType parameter that you can pass in which takes the argument "withMouse" or "againstMouse". not everyone wants it to move the way you do so I've allowed people to choose. All it takes is changing that parameter.
Sorry, my apologies, judged it purely from the online example.
I love this class. Very smooth! I've managed to create a couple of scrolling movie clips by by setting the var for the second target as mpp2. Is there any way to target two movie clips by rolling over a single mask. This is what my code looks like:
/*
import com.reintroducing.ui.MousePositionPanel;
var mpp:MousePositionPanel = new MousePositionPanel(holder_mc, holder_mc.content_mc, holder_mc.mask_mc, "x", "againstMouse", 10);
var mpp2:MousePositionPanel = new MousePositionPanel(holder2_mc, holder2_mc.content_mc, holder2_mc.mask_mc, "x", "againstMouse", 10);
holder_mc.mask_mc.onRollOver = function():Void
{
mpp.startPanel();
mpp2.startPanel();
};
holder_mc.mask_mc.onRollOut = function():Void
{
mpp.stopPanel();
mpp2.stopPanel();
};
*/
The second function always overwrite the second. Is there any way to stop it from doing that? Thanks!
manaf.al,
i'll have to look into this at a later time as i am very busy at the moment. my apologies :\