Flash Dropdown Menu ActionScript 3

• http://www.mattkoegler.com Matt Koegler

  I’m a total N00B at web design, but I have 25+ years experience in print. Got handed a project for the City of Apopka, Florida to design and build a web site for their Economic Development Incentive Programs. I thought dropdown menus using CSS would be enough, but I didn’t like the look. After searching, I found your tutorial on YouTube. Great work, you talked a person who has zero, and I mean ZERO, experience in code and successfully talked him through this via a recording. And I can save this code ‘I wrote’ for future projects with just some minor tweeks in names and x and y values. Thanks LOADS.

• http:/www.dlocc.com Devin Walker

  @Matt Koegler

  You’re welcome! I’m glad you could follow my tutorial. Now you can use that code on other projects! Thanks for checking out my site. I’m currently redesigning it, come back and check me out sometime!

  Devin

• http://www.tweeningpixels.com Nancy Jones

  Hi…. I followed your drop down tutorial but wanted it to slide down when it was entered and slide back up when it was out. I did that using MOUSE_OVER and MOUSE_OUT. My problem is that the drop down also goes away when your mouse moves out. How can I keep the dropdown open so the user can choose one of the drop down options?

  Thanks!
  Jonesy RGB

• Bill Danielson

  I am having some trouble with the code, I am adding a second and maybe a third menu button that when you click on it, it will drop down the menu like the first one, but when I position my y cordinate I and test the code doesn’t matter what button I push the drop down menu goes to the position of the second menu button not where as I when I click on the first menu button, I want the drop down menu to line up with that menu button and the second menu button I want the drop down menu to line up with that one. I guess that is what I am saying, Here is my code so you can understand.

  //Import the required classes
  import fl.transitions.Tween;
  import fl.transitions.easing.*;
  import fl.transitions.TweenEvent;

  //Turn on buttonMode for our movieclips
  button_mc.buttonMode=true;
  button_mc1.buttonMode=true;
  dropdown_mc.buttonMode=true;

  //Add the dropDown Event Listener
  button_mc.addEventListener(MouseEvent.CLICK, dropDown);
  button_mc1.addEventListener(MouseEvent.CLICK, dropDown);

  //initial dropDown function to animate on our dropdown movieclip into the mask
  function dropDown(e:MouseEvent):void
  {
  var enterTween:Tween;
  enterTween = new Tween(dropdown_mc, “y”, Regular.easeOut, dropdown_mc.y, 85.65, 30, false);
  enterTween.addEventListener(TweenEvent.MOTION_FINISH, dropUpEventListener);
  enterTween = new Tween(dropdown_mc, “y”, Regular.easeOut, dropdown_mc.y, 115.70, 30, false);
  enterTween.addEventListener(TweenEvent.MOTION_FINISH, dropUpEventListener);
  }

  //This function is called on after the dropdown animation is finished
  function dropUpEventListener(e:TweenEvent):void
  {
  button_mc.removeEventListener(MouseEvent.CLICK, dropDown); //remove event listener to dropDown function
  button_mc.addEventListener(MouseEvent.CLICK, dropUp); // add event listener for dropUp function
  button_mc1.removeEventListener(MouseEvent.CLICK, dropDown); //remove event listener to dropDown function
  button_mc1.addEventListener(MouseEvent.CLICK, dropUp);
  }

  //Drop up function tweens out our dropdown movieclip from the mask
  function dropUp (e:Event):void
  {
  var enterTween:Tween;
  enterTween = new Tween(dropdown_mc, “y”, Regular.easeOut, dropdown_mc.y, -61.45, 30, false);
  enterTween.addEventListener(TweenEvent.MOTION_FINISH, dropDownEventListener);
  enterTween = new Tween(dropdown_mc, “y”, Regular.easeOut, dropdown_mc.y, -61.45, 30, false);
  enterTween.addEventListener(TweenEvent.MOTION_FINISH, dropDownEventListener);
  }

  //Function does the exact opposite of the dropUpEventListener
  function dropDownEventListener(e:TweenEvent):void
  {
  button_mc.removeEventListener(MouseEvent.CLICK, dropUp);
  button_mc.addEventListener(MouseEvent.CLICK, dropDown);
  button_mc1.removeEventListener(MouseEvent.CLICK, dropUp);
  button_mc1.addEventListener(MouseEvent.CLICK, dropDown);
  }

  Thankyou

  Bill

• Mette

  Hi
  How do I link from the dropdown menu?
  It would be perfect if you could answer me soon, it for my exam.
  Thank you in advance!

  //Mette

• Rafa

  Hi this tutorial is awesome, I followed it and the result was fine, but how it is said in the below message I had troubles to link the buttons to each content. I just used the gotoAndPlay/gotoAndStop method, but it is not working It is said that the instance name of the button is undefined. I think I need other coding.  Unfortunately it seems to be that Mette wasn’t replied however if you guys know any tutorial about this please let me know. 

  Thanks,

  Rafa

Support

Topics

DLOCC Socials