AS3: PullOutMenu

Posted on
2/15/2008 in AS3 • My Classes

View Example
View Documentation
Download Class & Example Files

The PullOutMenu class creates a menu like the classic dropdown menu with the options to direct it up, down, left, or right depending on values set. It also has a bunch of other customizable options.

This is a direct port of my AS2 PullOutMenu. The documentation is pretty much the same for both versions except that in the AS3 version the $root parameter was renamed to $timeline. If you take a look at the source you'll see I threw the rollover/rollout/release code for the option items directly on the timeline just for the sake of brevity. I don't normally condone this but it was just to give you an idea of how it could be done/look.

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

, ,

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

3 Comments
Comment by Vlad on July 28, 2008 @ 9:27 AM

i have tried some variations of the code to adjust it to match my movie but whit no succes :( For example when i try to load the .swf via URLloader and Loader into another movie , the menu gets fucked up , probably couse of it timeline specifics... i have tried to set parent on the timeline object, and in the .as file itself but again no succes .... can somebody tell me how can i nest this .swf into another and still get it to work ?

Comment by Matt Przybylski on July 28, 2008 @ 10:12 AM

Vlad, it's probably a scoping issue somewhere in your code. Unfortunately nobody will be able to help you without seeing the code.

My suggestion would be to isolate the problem into a file all by itself (or two if you have to since youre loading it externally) and trace out everything you can to track where the problem is. if you've still got nothing, you can send me the isolated file and i can take a look at it as a last resort but please ONLY do this if you have done all of the above and still can't solve it as I'm very busy right now.

Comment by Melody on November 12, 2008 @ 3:51 PM

If I am using external xml file's data on text_mc, how should I rewrite your array for "option"? and how can I add more items on the menu and length of the mask with actionscript, so it will change depending on the xml.data? Please help! Thank you so much.

Leave a comment

(required)

(required)