as3 RollOver movieclip menu

Question

I'm trying to do a bottom menu like in www.zara.com.

My code have a transparent movieclip that shows the menu when mouse rolls over it, and hide when mouse rolls out.

The menu appears over that transparent movieclip, so I can use the roll over and out actions to maipulate the menu with the transparent MC.

The problem here is when mouse Roll Over my menu MC and it behaves as rolling out the transparent movieclip.

How can I make mouse rolls over a movieclip over another movieclip without roll out the first one?

Is it to confuse?

Thanx!

Answer 1

When a MovieClip B appears on top of another MovieClip A, MovieClip A will fire the MouseEvent.ROLL_OUT event. This is because MovieClip B is preventing MovieClip A from receiving any MouseEvents (since it is on top).

If you do not need to receive any MouseEvents from MovieClip B, you can set its mouseEnabled property to false, then MovieClip A underneath it will receive MouseEvents.

Also, depending on whether it makes sense in your particular case or not, you can make MovieClip B a child of MovieClip A, so that when MovieClip B obscures MovieClip A, the ROLL_OUT event will not be fired.

I hope this helps answer your question.

Answer 2

Here is a quick and dirty trick originaly from javascript technique

1.) build extra logic into the clipA rollout which waits a small period of time and then checks if the mouse is on the menu or not before closing it.

// define a boolean value for the moust beeing on the menu
public var menuOver:Boolean = false;

public function onMenuOver( event:MouseEvent ):void
{
    menuOver = true;
    // other menu code here
}

public function onMenuOut( event:MouseEvent ):void
{
    menuOver = false;
    // other menu code here
}

public function onMainClipOver( event:MouseEvent ):void
{
     // show menu code here
}

public function onMainClipOut( event:MouseEvent ):void
{
    setTimeout(execMainClipOut,100);
}

/**
 * close the menu only if the mouse is not over the menu
 */
public function execMainClipOut()
{
    if(!menuOver){
        // close the menu
    }
}

Answer 3

Ooh! I just remembered something interesting that might solve your problem.

When a MouseEvent.ROLL_OUT event is fired, the listener function is called with a MouseEvent object that has the relatedObject property. This is a reference to the object that is gaining mouse focus (getting rolled over) -- in your case, you could ignore the event if this property is set to your other MovieClip object, then fire the event manually when your other MovieClip object rolls out (so that it rolls out both of them).