<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chris Teso &#187; AS3 Drop Down Menu Class</title>
	<atom:link href="http://www.christeso.com/blog/index.php/category/lab/actionscript-lab/as3-drop-down-menu-class/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.christeso.com/blog</link>
	<description>Chris Teso is Director of Interactive Media, Flash Designer Developer and Portland Photographer.</description>
	<lastBuildDate>Sun, 06 Jun 2010 04:59:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>AS3 Drop Down Menu Class</title>
		<link>http://www.christeso.com/blog/index.php/lab/as3-drop-down-menu-class/</link>
		<comments>http://www.christeso.com/blog/index.php/lab/as3-drop-down-menu-class/#comments</comments>
		<pubDate>Sat, 29 Nov 2008 05:23:21 +0000</pubDate>
		<dc:creator>chris teso</dc:creator>
				<category><![CDATA[AS3 Drop Down Menu Class]]></category>
		<category><![CDATA[Actionscript Classes]]></category>
		<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[drop down]]></category>
		<category><![CDATA[dropdown]]></category>
		<category><![CDATA[open source]]></category>

		<guid isPermaLink="false">http://www.christeso.com/?p=455</guid>
		<description><![CDATA[lab]]></description>
			<content:encoded><![CDATA[<p>I briefly Googled for a drop down class to no avail. I say briefly as I only went one page deep. I&#8217;m sure there are others out there, but I instead got impatient as usual and just wrote my own. I thought I&#8217;d share it for other impatient people&#8217;s benefit. Without further ado here&#8217;s the AS3 Drop Down Class code. It&#8217;s a work in progress and most likely will be updated when I give it any more thought.</p>
<p>You can see the drop down in use on my <a href="http://www.christeso.com">homepage</a>.</p>
<p>Edit [ 12.16.08 ] : added directional code.</p>
<pre><code>
//usage
// array for drop
var dropOtherArray:Array = new Array()
dropOtherArray.push( {title:"<i>i</i>Work", name:"folio"} )
dropOtherArray.push( {title:"<i>i</i>Experiment", name:"lab"} )
dropOtherArray.push( {title:"<i>i</i>Write", name:"blog"} )
dropOtherArray.push( {title:"<i>i</i>Photograph", name:"photo"} )
dropOtherArray.push( {title:"<i>i</i>Flickr", name:"flickr"} )
dropOtherArray.push( {title:"<i>i</i>Record", name:"vimeo"} )
dropOtherArray.push( {title:"<i>contact</i>Me", name:"contact"} )

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

addChild( _dropOther = new DropDown( 180, 25, "<i>i</i>LiveElsewhere:", 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&lt;_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&lt;_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&lt;_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

		}

	}
}
</code><strong>Permalink:</strong>
<span id="sample-permalink">http://www.christeso.com/index.php/lab/<span id="editable-post-name" title="Click to edit this part of the permalink">as3-drop-down-menu-class</span><span id="editable-post-name-full">as3-drop-down-menu-class</span>/</span></pre>

<div class="sociable">
<div class="sociable_tagline">
<strong>Share and Enjoy:</strong>
</div>
<ul>
	<li class="sociablefirst"><a rel="nofollow" id="twitter"  target="_blank" href="http://twitter.com/home?status=AS3%20Drop%20Down%20Menu%20Class%20-%20http%3A%2F%2Fwww.christeso.com%2Fblog%2Findex.php%2Flab%2Fas3-drop-down-menu-class%2F" title="Twitter"><img src="http://www.christeso.com/blog/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" id="facebook"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.christeso.com%2Fblog%2Findex.php%2Flab%2Fas3-drop-down-menu-class%2F&amp;t=AS3%20Drop%20Down%20Menu%20Class" title="Facebook"><img src="http://www.christeso.com/blog/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" id="digg"  target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.christeso.com%2Fblog%2Findex.php%2Flab%2Fas3-drop-down-menu-class%2F&amp;title=AS3%20Drop%20Down%20Menu%20Class&amp;bodytext=lab" title="Digg"><img src="http://www.christeso.com/blog/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" id="del.icio.us"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.christeso.com%2Fblog%2Findex.php%2Flab%2Fas3-drop-down-menu-class%2F&amp;title=AS3%20Drop%20Down%20Menu%20Class&amp;notes=lab" title="del.icio.us"><img src="http://www.christeso.com/blog/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" id="google"  target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.christeso.com%2Fblog%2Findex.php%2Flab%2Fas3-drop-down-menu-class%2F&amp;title=AS3%20Drop%20Down%20Menu%20Class&amp;annotation=lab" title="Google Bookmarks"><img src="http://www.christeso.com/blog/wp-content/plugins/sociable/images/googlebookmark.png" title="Google Bookmarks" alt="Google Bookmarks" class="sociable-hovers" /></a></li>
	<li class="sociablelast"><a rel="nofollow" id="print"  target="_blank" href="http://www.printfriendly.com/print?url=http%3A%2F%2Fwww.christeso.com%2Fblog%2Findex.php%2Flab%2Fas3-drop-down-menu-class%2F&amp;partner=sociable" title="Print"><img src="http://www.christeso.com/blog/wp-content/plugins/sociable/images/printfriendly.png" title="Print" alt="Print" class="sociable-hovers" /></a></li>
</ul>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.christeso.com/blog/index.php/lab/as3-drop-down-menu-class/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>
