AS2: PullOutMenu

Posted on

10/10/2007 in AS2 • My Classes

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.

PLAIN TEXT

Actionscript:

import mx.transitions.easing.*;
import mx.transitions.Tween;
import mx.utils.Delegate;
/**
* Creates a menu like the classic dropdown menu with the options to direct it up, down, left, or right depending on values set.
*
* @usage
* <code>
* <pre>
import com.reintroducing.ui.PullOutMenu;
import mx.transitions.easing.*;
var optionalObj:Object = new Object({openSpeed: .25, closeSpeed: .25, axis: "y", easeFunc: Regular.easeOut, eventType: "rollover"});
var pomDown:PullOutMenu = new PullOutMenu(this, downMenu_mc.button_mc, downMenu_mc.options_mc, downMenu_mc.mask_mc, -129, 26, optionalObj);
* </pre>
* </code>
*
* @author Matt Przybylski [http://www.reintroducing.com]
* @version 1.0
*/
class com.reintroducing.ui.PullOutMenu
{
/*
* ====================================================================================================
* PRIVATE VARIABLES
* ====================================================================================================
*/
private var _checkInterval:Number;
private var _rootRef:Object;
private var _hitButton:MovieClip;
private var _menu:MovieClip;
private var _mask:MovieClip;
private var _startHeight:Number;
private var _endHeight:Number;
private var _tween:Tween;
private var _openSpeed:Number;
private var _closeSpeed:Number;
private var _axis:String;
private var _easeFunc:Function;
private var _eventType:String;
/**
* Creates a new instance of the PullOutMenu class.
*
* <p>
* The $optionalParams parameter takes in a couple of values.
* <ul>
* <li>openSpeed: An integer representing the speed you want your menu to open, in seconds (default: .25)</li>
* <li>closeSpeed: An integer representing the speed you want your menu to close, in seconds (default: .25)</li>
* <li>axis: A string representing the axis that the menu opens on, "x" or "y" (default: "y")</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>eventType: A string representing when to trigger the showing of the menu, "rollover", "press", or "release" (default: "rollover")</li>
* </ul>
* </p>
*
* @usage <pre><code>var pomDown:PullOutMenu = new PullOutMenu($root, $hitButton, $menu, $mask, $startHeight, $endHeight, $optionalParams);</code></pre>
*
* @param $root A reference to the _root of the timeline that the menu is contained in
* @param $hitButton The MovieClip used as the button you initially roll over or press to see the menu
* @param $menu The MovieClip where the menu items are housed
* @param $mask The MovieClip acting as the mask for the menu
* @param $startHeight A number that represents the initial position of the menu (its resting state)
* @param $endHeight A number that represents the final position of the menu (after you have opened it)
* @param $optionalParams See above
*/
public function PullOutMenu($root:Object, $hitButton:MovieClip, $menu:MovieClip, $mask:MovieClip, $startHeight:Number, $endHeight:Number, $optionalParams:Object)
{
_rootRef = $root;
_hitButton = $hitButton;
_menu = $menu;
_mask = $mask;
_startHeight = $startHeight;
_endHeight = $endHeight;
_openSpeed = ($optionalParams.openSpeed == undefined) ? .25 : $optionalParams.openSpeed;
_closeSpeed = ($optionalParams.closeSpeed == undefined) ? .25 : $optionalParams.closeSpeed;
_axis = ($optionalParams.axis == undefined) ? "_y" : "_" + $optionalParams.axis;
_easeFunc = ($optionalParams.easeFunc == undefined) ? Regular.easeOut : $optionalParams.easeFunc;
_eventType = ($optionalParams.eventType == undefined) ? "rollover" : $optionalParams.eventType;
_init();
}
/*
* ====================================================================================================
* PRIVATE FUNCTIONS
* ====================================================================================================
*/
private function _openMenu():Void
{
_tween = new Tween(_menu, _axis, _easeFunc, _menu[_axis], _endHeight, _openSpeed, true);
_checkInterval = setInterval(this, "_checkOpen", 100);
}
private function _checkOpen():Void
{
var mx:Number = _rootRef._xmouse;
var my:Number = _rootRef._ymouse;
var isHitting:Boolean = _mask.hitTest(mx, my);
if (!isHitting) closeMenu();
}
private function _init():Void
{
switch (_eventType)
{
case "rollover":
_hitButton.onRollOver = Delegate.create(this, _openMenu);
break;
case "press":
_hitButton.onPress = Delegate.create(this, _openMenu);
break;
case "release":
_hitButton.onRelease = Delegate.create(this, _openMenu);
break;
}
}
/*
* ====================================================================================================
* PUBLIC FUNCTIONS
* ====================================================================================================
*/
/**
* 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.
*
* @usage <pre><code>pomDown.closeMenu();</code></pre>
*
* @return Nothing
*/
public function closeMenu():Void
{
_tween = new Tween(_menu, _axis, _easeFunc, _menu[_axis], _startHeight, _closeSpeed, true);
clearInterval(_checkInterval);
}
/*
* ====================================================================================================
* CLOSE CLASS
* ====================================================================================================
*/
}