AS3 Drop Down Menu Class

I briefly Googled for a drop down class to no avail. I say briefly as I only went one page deep. I’m sure there are others out there, but I instead got impatient as usual and just wrote my own. I thought I’d share it for other impatient people’s benefit. Without further ado here’s the AS3 Drop Down Class code. It’s a work in progress and most likely will be updated when I give it any more thought.

You can see the drop down in use on my homepage.

Edit [ 12.16.08 ] : added directional code.

//usage
// array for drop
var dropOtherArray:Array = new Array()
dropOtherArray.push( {title:"iWork", name:"folio"} )
dropOtherArray.push( {title:"iExperiment", name:"lab"} )
dropOtherArray.push( {title:"iWrite", name:"blog"} )
dropOtherArray.push( {title:"iPhotograph", name:"photo"} )
dropOtherArray.push( {title:"iFlickr", name:"flickr"} )
dropOtherArray.push( {title:"iRecord", name:"vimeo"} )
dropOtherArray.push( {title:"contactMe", name:"contact"} )

fmat.color = 0xffffff
fmat.font = font.fontName
fmat.size = 11

addChild( _dropOther = new DropDown( 180, 25, "iLiveElsewhere:", fmat, 0x000033, dropOtherArray, "down", other ) )

package com.teso.ui
{
	import com.gskinner.motion.*
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.utils.*;
	import flash.text.*;
	import fl.transitions.*;
	import fl.transitions.easing.*;

	public class DropDown extends Sprite
	{
		private var _items:Array = new Array()
		private var _overC:uint;
		private var _backC:uint;
		private var _w:Number;
		private var _h:Number;
		private var _timer:Timer;
		private var _open:Boolean = false;
		private var _defaultText:TextField;
		private var _title:String;
		private var _direction:String;
		private var _fmt:TextFormat;

		public function DropDown( w:Number, h:Number, title:String, fmt:TextFormat, colorBack:uint, itemArray:Array, direction:String, callback )
		{
			// timer
			_timer = new Timer( 300 );
			_timer.addEventListener( TimerEvent.TIMER, closeDrop )

			// vars
			_w = w
			_h = h
			_backC = colorBack
			_items = itemArray
			_title = title
			_direction = direction
			_fmt = fmt

			// create a back for the holder
			var holder:MovieClip = new MovieClip();
			holder.name = "holder"
			holder.graphics.beginFill( _backC, 1 );
			holder.graphics.drawRoundRect( 0, 0, _w, _h, 2, 2 )
			holder.graphics.endFill()

			// add the drop
			addChild( holder )

			// set listeners
			holder.buttonMode = true;
			holder.addEventListener( MouseEvent.MOUSE_OVER, openDrop )
			holder.addEventListener( MouseEvent.MOUSE_OVER, cancelClose )
			holder.addEventListener( MouseEvent.MOUSE_OUT, startClose )

			// create a text field
			var t:TextField = new TextField()
			t.name = "holderText"
			t.selectable = false;
			t.autoSize = TextFieldAutoSize.LEFT;
			t.htmlText = title
			t.setTextFormat( fmt )
			t.y = ( holder.height/2 ) - ( t.height/2 )

			_defaultText = t

			// add the text
			holder.addChild( t )

			// create children
			for( var i=0; i<_items.length; i++ )
			{
				// create a back
				var back:MovieClip = new MovieClip()
				back.name = _items[i].name;
				back.graphics.beginFill( _backC, 1 )
				back.graphics.drawRoundRect( 0, 0, _w, _h, 10, 10 )
				back.graphics.endFill()

				// create a text field
				t = new TextField();
				t.name = "t"
				t.x = 5
				t.selectable = false;
				t.autoSize = TextFieldAutoSize.LEFT;
				t.htmlText = _items[i].title;
				t.setTextFormat( fmt )
				t.y = ( back.height/2 ) - ( t.height/2 )

				if( _items[i].d )
				{
					_defaultText.htmlText = _title+" "+_items[i].title
					_defaultText.setTextFormat( _fmt )
				}

				// make them invisible for now
				back.visible = false;

				// set a listener
				back.buttonMode = true;
				back.addEventListener( MouseEvent.CLICK, closeDrop )
				back.addEventListener( MouseEvent.CLICK, setDefaultText )
				back.addEventListener( MouseEvent.CLICK, callback )
				back.addEventListener( MouseEvent.MOUSE_OUT, startClose )
				back.addEventListener( MouseEvent.MOUSE_OVER, cancelClose )

				// add the text
				back.addChild( t )

				// add it to the holder
				addChildAt( back, 0 )

				_items[i].mc = back
			}
		}

		private function openDrop( e:Event )
		{
			if( !_open )
			{

				for( var i=0; i<_items.length; i++ )
				{
					// set a var
					var item:DisplayObject = _items[i].mc

					// set the items alpha to zero
					item.alpha = 0;

					// make the item visible
					item.visible = true

					// fade it in
					var tweenIn:GTween;

					if( _direction == "down" )
					{
						tweenIn = new GTween( item, .3, {y:_h + ( _h * i ),  alpha:1} )
					}
					else
					{
						tweenIn = new GTween( item, .3, {y:-_h - ( _h * i ),  alpha:1} )
					}
					tweenIn.ease = Regular.easeOut
				}
			}
			_open = true;

		}
		private function cancelClose( e:Event )
		{
			if( e.currentTarget.name != "holder" )
			{
				e.currentTarget.alpha = .8
			}
			_timer.stop()
		}
		private function startClose( e:Event )
		{
			e.currentTarget.alpha = 1
			_timer.start()
		}
		private function setDefaultText( e:Event )
		{
			_defaultText.htmlText = _title+" "+e.currentTarget.getChildByName( "t" ).text
			_defaultText.setTextFormat( _fmt )
		}
		private function closeDrop( e:Event )
		{
			closeIt()
		}
		private function closeIt()
		{
			if( _open )
			{
				for( var i=0; i<_items.length; i++ )
				{
					// set a var
					var item:DisplayObject = _items[i].mc

					// make the item visible
					item.visible = true

					// fade it in
					var tweenOut:GTween = new GTween( item, .3, {y:0, alpha:0}, {completeListener:done, data:item} )
					tweenOut.ease = Regular.easeOut
				}
			}

			_timer.stop()

			_open = false;
		}
		private function done( e:Event )
		{
			e.currentTarget.data.visible = false

		}

	}
}
Permalink:
http://www.christeso.com/index.php/lab/as3-drop-down-menu-classas3-drop-down-menu-class/