A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: dropdown menu?

  1. #1
    Junior Member
    Join Date
    Aug 2000
    Posts
    18
    how can I finish my dropdown menu so that the menu which "drops", stays on it`s position when I move my cursor on it and leave the sourcebutton which drops it?
    it just pulls back where it came from, quite annoying


  2. #2
    Senior Member
    Join Date
    Apr 2001
    Posts
    162

    Lightbulb

    My suggestion would be to make your drop down menu consist of two movie clips and no buttons. Movie clip A would be the un-opened part of the menu where you roll your mouse over to open the menu. Movie clip B would be the animated or drop-down part of the menu. Basically you want the menu to drop-down only when the mouse is over movie clip A but not over movie clip B, when the menu is closed. When the menu is activated though, you want movie clip B to remain even if the mouse leaves the movie clip A area. Finally, the menu is closed when the mouse is no longer on movie clip A or movie clip B. That being said, the most logical way of proceeding is via conditional statements that check for the movie clip's hitTest() status.

    To facilitate hit testing, I suggest you create a prototype function for the MovieClip class. For example, you can put the following code in your root timeline:

    Code:
    MovieClip.prototype.mouseOver = function() {
      if(this.hitTest(_root._x, _root._y) == true) {
        return true;
      } else {
        return false;
      }
    }
    With this function now belonging to each movie clip you create, you can now easily determine when your drop-down menu should be expanded, remain open and closed.

    For movie clip A, attach the following code:

    Code:
    onClipEvent(load) {
      this.init = false;
    }
    
    onClipEvent(mouseMove) {
      if(this.mouseOver() == true) {
        if(this.init == false) {
          //code to tell movie clip b to expand
          this.init = true;
        }
      }
    
      if((this.mouseOver() == false) && 
         (pathToMCB.mouseOver() == false)) {
        if(this.init == true) {
          //code to tell movie clip b to collapse
          this.init = false; 
        }
      }
    }
    There shouldn't need to be any code attached to movie clip B as the previous code pretty much takes care of any possible situation discussed in the opening paragraph of this post.

    If you encounter any problems using the methods I've described, please let me know. I've done this from the top of my head so there are bound to be an error or two.

    -ptolemy

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center