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:
  1. /**
  2. * Creates a scrolling panel that allows for scrolling in the x or y axis depending on where the mouse pointer is within the panel.
  3. *
  4. * @usage
  5. * <code>
  6. * <pre>
  7. import com.reintroducing.ui.MousePositionPanel;
  8. var mpp:MousePositionPanel = new MousePositionPanel(holder_mc, holder_mc.content_mc, holder_mc.mask_mc, "x", "withMouse", 10);
  9. holder_mc.mask_mc.onRollOver = function():Void
  10. {
  11.     mpp.startPanel();
  12. };
  13. holder_mc.mask_mc.onRollOut = function():Void
  14. {
  15.     mpp.stopPanel();
  16. };
  17. * </pre>
  18. * </code>
  19. *
  20. * @author Matt Przybylski [http://www.reintroducing.com]
  21. * @version 1.0
  22. */
  23.  
  24. class com.reintroducing.ui.MousePositionPanel
  25. {
  26. //- PRIVATE VARIABLES -------------------------------------------------------------------------------------
  27.    
  28.     private var _holder:MovieClip;
  29.     private var _mc:MovieClip;
  30.     private var _mask:MovieClip;
  31.     private var _axis:String;
  32.     private var _moveType:String;
  33.     private var _moveDir:Number;
  34.     private var _mouseAxis:String;
  35.     private var _changeProp:String;
  36.     private var _speed:Number;
  37.     private var _end:Number;
  38.     
  39. //- PUBLIC VARIABLES --------------------------------------------------------------------------------------
  40.    
  41.     public static var DEFAULT_NAME:String = "com.reintroducing.ui.MousePositionPanel";
  42.    
  43. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  44.    
  45.     /**
  46.      * Creates a new instance of the MousePositionPanel class.
  47.      *
  48.      * @usage <pre><code>var mpp:MousePositionPanel = new MousePositionPanel($holder, $mc, $mask, $axis, $moveType, $speed);</code></pre>
  49.      *
  50.      * @param $holder The movie clip (or timeline) that holds the content and mask clips
  51.      * @param $mc The movie clip to be scrolled
  52.      * @param $mask The movie clip that is used as the mask for the scrollable content area
  53.      * @param $axis A string value of either "x" or "y" that determines what axis the content is scrolled along
  54.      * @param $moveType A string, "withMouse" (moves with the mouse) or "againstMouse" (moves away from the mouse)
  55.      * @param $speed A number that represents how fast to scroll the clip
  56.      */
  57.    
  58.     public function MousePositionPanel($holder:MovieClip, $mc:MovieClip, $mask:MovieClip, $axis:String, $moveType:String, $speed:Number)
  59.     {
  60.         this._holder                    = $holder;
  61.         this._mc                        = $mc;
  62.         this._mask            = $mask;
  63.         this._axis       = "_" + $axis;
  64.         this._moveType          = $moveType;
  65.         this._speed      = $speed;
  66.        
  67.         this.manageAxis(this._axis);
  68.         this.manageMoveType();
  69.     }
  70.    
  71. //- PRIVATE METHODS ---------------------------------------------------------------------------------------
  72.    
  73.     private function manageAxis($axis:String):Void
  74.     {
  75.         if ($axis == "_x")
  76.         {
  77.             this._changeProp          = "_width";
  78.             this._mouseAxis             = "_xmouse";
  79.         }
  80.         else if ($axis == "_y")
  81.         {
  82.             this._changeProp          = "_height";
  83.             this._mouseAxis             = "_ymouse";
  84.         }
  85.     }
  86.    
  87.     private function manageMoveType():Void
  88.     {
  89.         if (this._moveType == "withMouse")
  90.         {
  91.             this._moveDir = 1;
  92.         }
  93.         else if (this._moveType == "againstMouse")
  94.         {
  95.             this._moveDir = -1;
  96.         }
  97.         else
  98.         {
  99.             this._moveDir = 1;
  100.         }
  101.     }
  102.    
  103.     private function movePanel(dir:Number):Void
  104.     {
  105.         var owner:MousePositionPanel = this;
  106.         var mousePercent:Number = (this._holder[this._mouseAxis] / this._mask[this._changeProp]);
  107.         var mSpeed:Number;
  108.        
  109.         if (dir == 1)
  110.         {
  111.             mSpeed = 1 - mousePercent;
  112.         }
  113.         else
  114.         {
  115.             mSpeed = mousePercent;
  116.         }
  117.        
  118.         this._end = Math.round(-((this._mc[this._changeProp] - this._mask[this._changeProp]) * mSpeed));
  119.        
  120.         this._mc.onEnterFrame = function():Void
  121.         {
  122.             if (this[owner._axis] == owner._end)
  123.             {
  124.                 delete this.onEnterFrame;
  125.             }
  126.             else if (this[owner._axis]> owner._end)
  127.             {
  128.                 this[owner._axis] -= Math.ceil((this[owner._axis] - owner._end) * (owner._speed / 100));
  129.             }
  130.             else if (this[owner._axis] <owner._end)
  131.             {
  132.                 this[owner._axis] += Math.ceil((owner._end - this[owner._axis]) * (owner._speed / 100));
  133.             }
  134.         };
  135.     }
  136.    
  137. //- PUBLIC METHODS ----------------------------------------------------------------------------------------
  138.    
  139.     /**
  140.      * Starts the panel scrolling in the proper direction.
  141.      *
  142.      * @usage <pre><code>mpp.startPanel();</code></pre>
  143.      *
  144.      * @return Nothing
  145.      */
  146.    
  147.     public function startPanel():Void
  148.     {
  149.         var owner:MousePositionPanel = this;
  150.        
  151.         _level0.onMouseMove = function():Void
  152.         {
  153.             owner.movePanel(owner._moveDir);
  154.         };
  155.     }
  156.    
  157.     /**
  158.      * Stops the panel from scrolling any further.
  159.      *
  160.      * @usage <pre><code>mpp.stopPanel();</code></pre>
  161.      *
  162.      * @return Nothing
  163.      */
  164.    
  165.     public function stopPanel():Void
  166.     {
  167.         _level0.onMouseMove = null;
  168.     }
  169.    
  170. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  171.    
  172.    
  173.    
  174. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  175.    
  176.    
  177.    
  178. //- HELPERS -----------------------------------------------------------------------------------------------
  179.    
  180.     public function toString():String
  181.     {
  182.         return "com.reintroducing.ui.MousePositionPanel";
  183.     }
  184.    
  185. //- END CLASS ---------------------------------------------------------------------------------------------
  186. }

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

5 Comments

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 :\

Leave a comment

(required)

(required)