Posted By

Winkyboy on 11/13/09


Tagged

menu dropdown as3 rollover flyout


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

tspitzr


AS3 Dropdown/Flyout menu


 / Published in: ActionScript 3
 

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

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.

  1. package {
  2.  
  3. // er, didn't verify if all these imports are *truly* needed
  4. import flash.display.Sprite;
  5. import flash.display.MovieClip;
  6. import flash.display.Loader;
  7. import flash.display.LoaderInfo;
  8. import flash.display.Stage;
  9. import flash.net.URLLoader;
  10. import flash.net.URLVariables;
  11. import flash.net.URLRequestMethod;
  12. import flash.net.URLRequest;
  13. import flash.net.navigateToURL;
  14.  
  15. import flash.events.Event;
  16. import flash.events.MouseEvent;
  17.  
  18. import com.caurina.transitions.Tweener;
  19.  
  20. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  21. public class flyout extends MovieClip {
  22. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  23. var openmenuShare:Boolean=false;
  24. var closedShareY:Number;// for remembering the close position of the email menu
  25. var openedShareY:Number;// "" for open position
  26.  
  27. public function flyout():void {
  28. initShare();
  29. }
  30.  
  31. private function initShare():void {
  32. makeButton(share_menu_mc.share_button_mc, overItem, outItem, clickItem);
  33. makeButton(share_menu_mc.share_flyout_mc.share_face_mc, overItem, outItem, clickItem);
  34. makeButton(share_menu_mc.share_flyout_mc.share_twit_mc, overItem, outItem, clickItem);
  35. makeButton(share_menu_mc.share_flyout_mc.share_mysp_mc, overItem, outItem, clickItem);
  36. makeButton(share_menu_mc.share_flyout_mc.share_deli_mc, overItem, outItem, clickItem);
  37. makeButton(share_menu_mc.share_flyout_mc.share_digg_mc, overItem, outItem, clickItem);
  38. makeButton(share_menu_mc.share_flyout_mc.share_stum_mc, overItem, outItem, clickItem);
  39. makeButton(share_menu_mc.share_flyout_mc.share_redd_mc, overItem, outItem, clickItem);
  40.  
  41. with (share_menu_mc.share_flyout_mc) {
  42. closedShareY=y;
  43. openedShareY=closedShareY+height;
  44. }
  45.  
  46. }
  47.  
  48. private function makeButton(which_mc:MovieClip, overFunction:Function, outFunction:Function, clickFunction:Function):void {
  49. which_mc.buttonMode=true;
  50. which_mc.useHandCursor=true;
  51. which_mc.mouseChildren=false;
  52. which_mc.addEventListener(MouseEvent.MOUSE_OVER, overFunction);
  53. which_mc.addEventListener(MouseEvent.MOUSE_OUT, outFunction);
  54. which_mc.addEventListener(MouseEvent.CLICK, clickFunction);
  55. }
  56.  
  57. private function overItem(e:Event) {
  58. Tweener.addTween(e.currentTarget, {scaleX:1.05, scaleY:1.05, time:0.2});
  59. switch (e.currentTarget.name) {
  60. case "share_button_mc" :
  61. if (!openmenuShare) {
  62. Tweener.addTween(share_menu_mc.share_flyout_mc, {y:openedShareY, time:.5});
  63. stage.addEventListener(Event.ENTER_FRAME,checkOverSharer);
  64. }
  65. openmenuShare=true;
  66. break;
  67. }
  68. }
  69. private function outItem(e:Event) {
  70. switch (e.currentTarget.name) {
  71. default :
  72. Tweener.addTween(e.currentTarget, {scaleX:1, scaleY:1, time:0.2});
  73. break;
  74. }
  75. }
  76.  
  77. private function clickItem(e:Event) {
  78. trace(e.currentTarget.name);
  79. var url:String = "";
  80. switch (e.currentTarget.name) {
  81. case "share_face_mc" :
  82. navigateTo("http://www.example.com/");
  83. break;
  84. case "share_twit_mc" :
  85. navigateTo("http://www.example.com/");
  86. break;
  87. case "share_mysp_mc" :
  88. navigateTo("http://www.example.com/");
  89. break;
  90. case "share_deli_mc" :
  91. navigateTo("http://www.example.com/");
  92. break;
  93. case "share_digg_mc" :
  94. navigateTo("http://www.example.com/");
  95. break;
  96. case "share_stum_mc" :
  97. navigateTo("http://www.example.com/");
  98. break;
  99. case "share_redd_mc" :
  100. navigateTo("http://www.example.com/");
  101. break;
  102. }
  103. }
  104.  
  105. private function navigateTo(urlString:String):void {
  106. var request:URLRequest = new URLRequest(urlString);
  107. try {
  108. navigateToURL(request, '_blank'); // second argument is target
  109. } catch (e:Error) {
  110. trace("Error occurred!");
  111. }
  112. }
  113.  
  114. function checkOverSharer(event:Event) {
  115. var leeway:Number = 5;
  116. 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
  117. var myY:Number = share_menu_mc.y - share_menu_mc.share_button_mc.height/2 - leeway;
  118. var myW:Number = share_menu_mc.width + leeway;
  119. var myH:Number = share_menu_mc.share_flyout_mc.height + share_menu_mc.share_button_mc.height + leeway;
  120. if (isColliding(myX, myY, myW, myH) == false) {
  121. stage.removeEventListener(Event.ENTER_FRAME, checkOverSharer);
  122.  
  123. Tweener.addTween(share_menu_mc.share_flyout_mc, {y:closedShareY, time:.5});
  124. openmenuShare = false;
  125. }
  126. }
  127.  
  128. private function isColliding(tX:Number, tY:Number, tW:Number, tH:Number):Boolean
  129. {
  130. var drawCollision:Boolean = false;
  131.  
  132. var obj1_x:Number = tX;
  133. var obj1_y:Number = tY;
  134. var obj2_x:Number = mouseX - 1;
  135. var obj2_y:Number = mouseY - 1;
  136.  
  137. var obj1_x2:Number = tW + obj1_x;
  138. var obj1_y2:Number = tH + obj1_y;
  139. var obj2_x2:Number = 2 + mouseX;
  140. var obj2_y2:Number = 2 + mouseY;
  141.  
  142. if (drawCollision == true)
  143. {
  144. drawRectangle(obj2_x, obj2_y, 2, 2);
  145. drawRectangle(obj1_x, obj1_y, tW, tH);
  146. }
  147.  
  148. if ((obj2_x > obj1_x) && (obj2_x2 < obj1_x2) && (obj2_y > obj1_y) && (obj2_y2 < obj1_y2)) {
  149. return true;
  150. } else {
  151. return false;
  152. }
  153. }
  154.  
  155. private function drawRectangle(boxX, boxY, boxWidth:Number, boxHeight:Number):void {
  156. var square:Sprite = new Sprite();
  157. addChild(square);
  158. square.graphics.lineStyle(1,0xff0000);
  159. square.graphics.beginFill(0x0000FF, .4);
  160. square.graphics.drawRect(0,0,boxWidth,boxHeight);
  161. square.graphics.endFill();
  162. square.x = boxX;
  163. square.y = boxY;
  164. }
  165.  
  166. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  167. }
  168. }

Report this snippet  

You need to login to post a comment.