Return to Snippet

Revision: 20375
at November 13, 2009 16:27 by Winkyboy


Initial Code
package {

        // er, didn't verify if all these imports are *truly* needed
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Stage;
	import flash.net.URLLoader;
	import flash.net.URLVariables;
	import flash.net.URLRequestMethod;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import com.caurina.transitions.Tweener;
	
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	public class flyout extends MovieClip {
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		var openmenuShare:Boolean=false;
		var closedShareY:Number;// for remembering the close position of the email menu
		var openedShareY:Number;// "" for open position
		
		public function flyout():void {
			initShare();
		}
		
		private function initShare():void {
			makeButton(share_menu_mc.share_button_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_face_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_twit_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_mysp_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_deli_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_digg_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_stum_mc, overItem, outItem, clickItem);
			makeButton(share_menu_mc.share_flyout_mc.share_redd_mc, overItem, outItem, clickItem);
			
			with (share_menu_mc.share_flyout_mc) {
				closedShareY=y;
				openedShareY=closedShareY+height;
			}
			
		}
		
		private function makeButton(which_mc:MovieClip, overFunction:Function, outFunction:Function, clickFunction:Function):void {
			which_mc.buttonMode=true;
			which_mc.useHandCursor=true;
			which_mc.mouseChildren=false;
			which_mc.addEventListener(MouseEvent.MOUSE_OVER, overFunction);
			which_mc.addEventListener(MouseEvent.MOUSE_OUT, outFunction);
			which_mc.addEventListener(MouseEvent.CLICK, clickFunction);
		}
		
		private function overItem(e:Event) {
			Tweener.addTween(e.currentTarget, {scaleX:1.05, scaleY:1.05, time:0.2});
			switch (e.currentTarget.name) {
				case "share_button_mc" :
					if (!openmenuShare) {
						Tweener.addTween(share_menu_mc.share_flyout_mc, {y:openedShareY, time:.5});
						stage.addEventListener(Event.ENTER_FRAME,checkOverSharer);  
					}
					openmenuShare=true;
					break;
			}
		}
		private function outItem(e:Event) {
			switch (e.currentTarget.name) {
				default :
					Tweener.addTween(e.currentTarget, {scaleX:1, scaleY:1, time:0.2});
					break;
			}
		}
		
		private function clickItem(e:Event) {
			trace(e.currentTarget.name);
			var url:String = "";
			switch (e.currentTarget.name) {
				case "share_face_mc" :
					navigateTo("http://www.example.com/");
					break;
				case "share_twit_mc" :
					navigateTo("http://www.example.com/");
					break;		
				case "share_mysp_mc" :
					navigateTo("http://www.example.com/");
					break;
				case "share_deli_mc" :
					navigateTo("http://www.example.com/");
					break;
				case "share_digg_mc" :
					navigateTo("http://www.example.com/");
					break;
				case "share_stum_mc" :
					navigateTo("http://www.example.com/");
					break;
				case "share_redd_mc" :
					navigateTo("http://www.example.com/");
					break;
			}
		}
		
		private function navigateTo(urlString:String):void {
			var request:URLRequest = new URLRequest(urlString);
			try {
			  navigateToURL(request, '_blank'); // second argument is target
			} catch (e:Error) {
			  trace("Error occurred!");
			}
		}
		
		function checkOverSharer(event:Event) {
			var leeway:Number = 5;
			var myX:Number = share_menu_mc.x - share_menu_mc.share_button_mc.width/2; // why I don't need leeway on this, I dunno
			var myY:Number = share_menu_mc.y - share_menu_mc.share_button_mc.height/2 - leeway;
			var myW:Number = share_menu_mc.width + leeway;
			var myH:Number = share_menu_mc.share_flyout_mc.height + share_menu_mc.share_button_mc.height + leeway;
			if (isColliding(myX, myY, myW, myH) == false) {
				stage.removeEventListener(Event.ENTER_FRAME, checkOverSharer);
				
				Tweener.addTween(share_menu_mc.share_flyout_mc, {y:closedShareY, time:.5});
				openmenuShare = false;
			}
		}  					

		private function isColliding(tX:Number, tY:Number, tW:Number, tH:Number):Boolean 
		{
			var drawCollision:Boolean = false;
		
			var obj1_x:Number = tX;
			var obj1_y:Number = tY;
			var obj2_x:Number = mouseX - 1;
			var obj2_y:Number = mouseY - 1;
		
			var obj1_x2:Number = tW + obj1_x;
			var obj1_y2:Number = tH + obj1_y;
			var obj2_x2:Number = 2 + mouseX;
			var obj2_y2:Number = 2 + mouseY;
			
			if (drawCollision == true) 
			{
				drawRectangle(obj2_x, obj2_y, 2, 2);
				drawRectangle(obj1_x, obj1_y, tW, tH);
			}
		
			if ((obj2_x > obj1_x) && (obj2_x2 < obj1_x2) && (obj2_y > obj1_y) && (obj2_y2 < obj1_y2)) {
				return true;
			} else {
				return false;
			}
		}
		
		private function drawRectangle(boxX, boxY, boxWidth:Number, boxHeight:Number):void {
			var square:Sprite = new Sprite();
			addChild(square);
			square.graphics.lineStyle(1,0xff0000);
			square.graphics.beginFill(0x0000FF, .4);
			square.graphics.drawRect(0,0,boxWidth,boxHeight);
			square.graphics.endFill();
			square.x = boxX;
			square.y = boxY;
		}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	}
}

Initial URL
http://dl.dropbox.com/u/316550/code-AS3_flyout_menu.zip

Initial Description
There ARE probably better dropdown menus than this one, but for simple purposes this works well. This has a button that reveals a menu that drops down. It could be easily tweaked to move upward instead. Uses Tweener.

Initial Title
AS3 Dropdown/Flyout menu

Initial Tags
dropdown

Initial Language
ActionScript 3