Animated horizontal pop-out menu or Slide-out menu...

kearnguy,

I think you can simply put an invisible button at your specific coordinates
And apply the onRollOver and onRollOut is good enough
Name the button as inv_button

You can make a menu movieclip in this way

From frame 1 to frame 10, the menu slide out using simply motion tween
On Frame 10, add a stop ();
From frame 10 to frame 20, the menu slide in using simply motion tween again

Drag the menu mc to stage and name it sliding_menu

apply the scripts to the root movie

_root.inv_button.onRollOver = function ()
{
     _root.sliding_menu.gotoAndPlay (1);
}

_root.inv_button.onRollOut = function ()
{
     _root.sliding_menu.gotoAndPlay (10);
}

Cheers :)
Vicker

Vicker,

I'll try this and see what the results are.  The only problem I can see having with this is:  if the user rolls over and rolls out before the tween gets to frame 10, the tween will jump to 10 and then slide back in.  This could create a little hicup in the smooth sliding transition.  A little problem, but when the site "look" is a primary concern to the client, it could turn into a big problem. :)

Like I said though, I'll give it a try and let you know if it does what I need.

Thanks.

Ok...

So I tried the invisible button approach.  It works pretty well (except for the above mentioned glitch), but it all goes to crap when I put menu buttons in the equation.  The invisible button is placed, and when you hover over it the sliding movieClip comes out.  When you hover off it, the movieClip slides back in.  But remember I need this for a menu.  So when I add buttons to the end of the "sliding in", and you hover over one of them, my movieClip and buttons disappear.  I believe this has something to do with the fact that Flash no longer thinks you are hovering over the invisible button - you're over a different button.  Any thoughts?

I'm pretty sure we could solve this if we could use mouse coordinates versus an invisible button.  I'm just not sure how to approach that.  Keep the ideas coming :0)

Check out this site at the bottom where options are look at the menus there.  Is this something that you are looking for.  The animations can be anything mine are just simple tweens though.

http://theyac.org/indexhigh.html

If so I can show you how I did this with a hit test.  

An invible buttons don't really work on roll out menus cause then the button that you have in the menu is blocked by the invisble button.  So if this is what you are looking for just let me know

Fixitben

kearnguy,

Actually this issue is not a difficult one to solve :)

The solution is as the following

On frame 10, instead of a stop, put the following

if (this.continue_flag == 1)
{
     play ();
}
else
{
     stop ();
}

And for the buttons

_root.inv_button.onRollOver = function ()
{
     _root.sliding_menu.continue_flag = 0;
}

_root.inv_button.onRollOut = function ()
{
     _root.sliding_menu.continue_flag = 1;
     _root.sliding_menu.play ();
}

So when user roll in -> slide out -> flag 0 -> frame 10 -> stop -> roll out -> play -> slide in
The other case roll in -> slide out -> roll out -> flag 1 -> frame 10 -> play -> slide in

Cheers :)
Vicker

Alright,

this is some good script.  It actually helps me with another problem I had.  However, it doesn't solve one of the main problems.  When I hover over the invisible button, the new menu pops up fine.  But as soon as I rollOver the hit area of one of the menu buttons, the menu closes.

Fixitben!  The functionality of the menu on that link is what I am looking for.  Please let me know how you did it.  Its a vertical drop down, but I'm sure I can modify it to be a horizontal.

Keep up the good work everyone.

OK kearnguy

To solve your first problem, you can do a trick here

// Add this new function
function raise_flag ()
{
     _root.sliding_menu.continue_flag = 1;
     _root.sliding_menu.play ();
     clearInterval (_root.interval_id);
}

_root.inv_button.onRollOver = function ()
{
     _root.sliding_menu.continue_flag = 0;
}

_root.inv_button.onRollOut = function ()
{
     // call the new function after 5 seconds
     _root.interval_id = setInterval (raise_flag, 5000);
}

And then for the sliding menu, add the following

_root.sliding_menu.onRollOver = function ()
{
     clearInterval (_root.interval_id);
}

_root.sliding_menu.onRollOut = function ()
{
     _root.interval_id = setInterval (raise_flag, 5000);
}

So the result will be

roll in -> slide out -> flag 0 -> frame 10 -> stop -> roll out -> 5 sec -> play -> slide in
roll in -> slide out -> roll out -> flag 1 -> frame 10 -> 5 sec -> play -> slide in
roll in -> slide out -> roll out -> flag 1 -> frame 10 -> 5 sec -> roll in menu -> stop 5 sec -> roll out menu -> 5 sec -> play -> slide in

I hope it works~~

Vicker :)

basically create a movie clip and on one layer place the image that you are using as the button then on the other layer.  Place a motion tween of what ever you want the menu to be with out the buttons in the menu yet.  add the tween then open up the tweened part and place all the buttons that are in the menu in there.  That way they are place inside the object that is being tweened.  Then place the movie clip on the main stage and then place this code on the movie clip.  

onClipEvent (enterFrame) {
   
     if (this.hitTest(_root._xmouse, _root._ymouse, true) ) {
          this.nextFrame();
     } else {
          this.prevFrame();
     }
}


Here is a very simple example I had to do this remotely cause the comp I am on didn't have flash so if you need a better example just let me know.  But this is just to give you the idea of what you can do.
http://theyac.org/experts/menu.fla

Fixitben

Just an update...

Sorry for not responding for so long.  I have been swamped with work.  I will get back to this by Thursday...(cross your fingers).  I'll let you all know what works.

Thanks for all your help.

kearnguy

Well, I have tried this both ways and still can't get it to work.

Vicker, could you consolidate all the code you have presented into one concise post.  I may just be implementing it wrong. :0)

Fixitben, for some reason I can't get to the link you provided.  Can you check it for me and see if it is still working?

Thanks everyone.  I know we are getting close...I can feel it.

Correction...

Fixitben, I can download the file from the link, but it won't open in MX.  Any thoughts?