AS2: PullOutMenu

View Example
View Documentation
Download Class & Example Files

Creates a menu like the classic dropdown menu with the options to direct it up, down, left, or right depending on values set.

Actionscript:
  1. import mx.transitions.easing.*;
  2. import mx.transitions.Tween;
  3. import mx.utils.Delegate;
  4.  
  5. /**
  6. * Creates a menu like the classic dropdown menu with the options to direct it up, down, left, or right depending on values set.
  7. *
  8. * @usage
  9. * <code>
  10. * <pre>
  11. import com.reintroducing.ui.PullOutMenu;
  12. import mx.transitions.easing.*;
  13. var optionalObj:Object = new Object({openSpeed: .25, closeSpeed: .25, axis: "y", easeFunc: Regular.easeOut, eventType: "rollover"});
  14. var pomDown:PullOutMenu = new PullOutMenu(this, downMenu_mc.button_mc, downMenu_mc.options_mc, downMenu_mc.mask_mc, -129, 26, optionalObj);
  15. * </pre>
  16. * </code>
  17. *
  18. * @author Matt Przybylski [http://www.reintroducing.com]
  19. * @version 1.0
  20. */
  21.  
  22. class com.reintroducing.ui.PullOutMenu
  23. {
  24.     /*
  25.      * ====================================================================================================
  26.      * PRIVATE VARIABLES
  27.      * ====================================================================================================
  28.      */
  29.    
  30.     private var _checkInterval:Number;
  31.     private var _rootRef:Object;
  32.     private var _hitButton:MovieClip;
  33.     private var _menu:MovieClip;
  34.     private var _mask:MovieClip;
  35.     private var _startHeight:Number;
  36.     private var _endHeight:Number;
  37.     private var _tween:Tween;
  38.     private var _openSpeed:Number;
  39.     private var _closeSpeed:Number;
  40.     private var _axis:String;
  41.     private var _easeFunc:Function;
  42.     private var _eventType:String;
  43.    
  44.     /**
  45.      * Creates a new instance of the PullOutMenu class.
  46.      *
  47.      * <p>
  48.      * The $optionalParams parameter takes in a couple of values.
  49.      * <ul>
  50.      * <li>openSpeed: An integer representing the speed you want your menu to open, in seconds (default: .25)</li>
  51.      * <li>closeSpeed: An integer representing the speed you want your menu to close, in seconds (default: .25)</li>
  52.      * <li>axis: A string representing the axis that the menu opens on, "x" or "y" (default: "y")</li>
  53.      * <li>easeFunc: A function representing the ease type you'd like to use, as per the Tween class easing functions (default: Regular.easeOut)</li>
  54.      * <li>eventType: A string representing when to trigger the showing of the menu, "rollover", "press", or "release" (default: "rollover")</li>
  55.      * </ul>
  56.      * </p>
  57.      *
  58.      * @usage <pre><code>var pomDown:PullOutMenu = new PullOutMenu($root, $hitButton, $menu, $mask, $startHeight, $endHeight, $optionalParams);</code></pre>
  59.      *
  60.      * @param $root A reference to the _root of the timeline that the menu is contained in
  61.      * @param $hitButton The MovieClip used as the button you initially roll over or press to see the menu
  62.      * @param $menu The MovieClip where the menu items are housed
  63.      * @param $mask The MovieClip acting as the mask for the menu
  64.      * @param $startHeight A number that represents the initial position of the menu (its resting state)
  65.      * @param $endHeight A number that represents the final position of the menu (after you have opened it)
  66.      * @param $optionalParams See above
  67.      */
  68.    
  69.     public function PullOutMenu($root:Object, $hitButton:MovieClip, $menu:MovieClip, $mask:MovieClip, $startHeight:Number, $endHeight:Number, $optionalParams:Object)
  70.     {
  71.         _rootRef = $root;
  72.         _hitButton = $hitButton;
  73.         _menu = $menu;
  74.         _mask = $mask;
  75.         _startHeight = $startHeight;
  76.         _endHeight = $endHeight;
  77.        
  78.         _openSpeed = ($optionalParams.openSpeed == undefined) ? .25 : $optionalParams.openSpeed;
  79.         _closeSpeed = ($optionalParams.closeSpeed == undefined) ? .25 : $optionalParams.closeSpeed;
  80.         _axis = ($optionalParams.axis == undefined) ? "_y" : "_" + $optionalParams.axis;
  81.         _easeFunc = ($optionalParams.easeFunc == undefined) ? Regular.easeOut : $optionalParams.easeFunc;
  82.         _eventType = ($optionalParams.eventType == undefined) ? "rollover" : $optionalParams.eventType;
  83.        
  84.         _init();
  85.     }
  86.    
  87.     /*
  88.      * ====================================================================================================
  89.      * PRIVATE FUNCTIONS
  90.      * ====================================================================================================
  91.      */
  92.    
  93.     private function _openMenu():Void
  94.     {
  95.         _tween = new Tween(_menu, _axis, _easeFunc, _menu[_axis], _endHeight, _openSpeed, true);
  96.         _checkInterval = setInterval(this, "_checkOpen", 100);
  97.     }
  98.    
  99.     private function _checkOpen():Void
  100.     {
  101.         var mx:Number = _rootRef._xmouse;
  102.         var my:Number = _rootRef._ymouse;
  103.         var isHitting:Boolean = _mask.hitTest(mx, my);
  104.        
  105.         if (!isHitting) closeMenu();
  106.     }
  107.    
  108.     private function _init():Void
  109.     {
  110.         switch (_eventType)
  111.         {
  112.             case "rollover":
  113.                 _hitButton.onRollOver = Delegate.create(this, _openMenu);
  114.                 break;
  115.            
  116.             case "press":
  117.                 _hitButton.onPress = Delegate.create(this, _openMenu);
  118.                 break;
  119.            
  120.             case "release":
  121.                 _hitButton.onRelease = Delegate.create(this, _openMenu);
  122.                 break;
  123.         }
  124.     }
  125.    
  126.     /*
  127.      * ====================================================================================================
  128.      * PUBLIC FUNCTIONS
  129.      * ====================================================================================================
  130.      */
  131.    
  132.     /**
  133.      * Closes the menu and puts it in the initial position. Used also when a button inside the menu is pressed and the need to close the menu right then arises.
  134.      *
  135.      * @usage <pre><code>pomDown.closeMenu();</code></pre>
  136.      *
  137.      * @return Nothing
  138.      */
  139.    
  140.     public function closeMenu():Void
  141.     {
  142.         _tween = new Tween(_menu, _axis, _easeFunc, _menu[_axis], _startHeight, _closeSpeed, true);
  143.         clearInterval(_checkInterval);
  144.     }
  145.    
  146.     /*
  147.      * ====================================================================================================
  148.      * CLOSE CLASS
  149.      * ====================================================================================================
  150.      */
  151. }

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

No Comments

No comments yet.

Leave a comment

(required)

(required)