Double Rollover in a menu

1

Hi,

I am creating a menu. You can see what it looks like so far:

http://rogerioboccato.com/menu/menu.swf
http://rogerioboccato.com/menu/menu.fla

and this is the script:
[INDENT]
AG_logo.stop();

hover.addEventListener(MouseEvent.ROLL_OVER,startClip);
function startClip(e:MouseEvent):void {
AG_logo.gotoAndPlay(1);
}
hover.addEventListener(MouseEvent.ROLL_OUT,finishClip);
function finishClip(e:MouseEvent):void {
AG_logo.gotoAndPlay(7);
}[/INDENT]

my problem is that I want to add rollover actions on the menu items and make them clickable. This has been impossible because there is a giant invisible button (called “hover”) that I have used to make the menu fade in when you rollover it and fade out when rollout… This giant button overrides any kind of button action inside the menu. Any suggestions??

Is there a way to make the menu fade in when you rollover it without using a button (I don’t the cursor to be changed into that little hand if it is not on top of a menu item, understand?)

I tried to be as clear as I can… If you have any questions, please let me know! I appreciate your help very much!!!

thanks

2

I believe to eliminate the hand cursor you need to add this line of script to the end of your code.

hover.buttonMode = false;

3

that does help, but still, it does not solve the main problem, which is of not being able to make the menu items clickable… :frowning:

thanks anyway

4

Here’s my 2¢…
It’s by no means debugged (needs tweaking for sure), but it’s functional.
I circumvented the issue by using the stage to translate the btnGroup and hoverLogo alphas, instead of directly targeting the hoverLogo with mouse events.
This mitigates other display list issues as well.

Install [COLOR=“blue”]TweenMax[/COLOR].
Example:[COLOR=“Blue”]http://www.byrographics.com/AS3/hoverLogo/hoverLogo.html[/COLOR]

stop();
import gs.TweenMax;
import fl.motion.easing.*;
import flash.display.StageScaleMode;
stage.scaleMode = StageScaleMode.NO_SCALE;

initSite();
function initSite():void {
	TweenMax.to(btnGroup, 0, {alpha:0, y:0, overwrite:false});
	TweenMax.from(menuLabel, .4, {delay:.4, alpha:0, overwrite:false});
	TweenMax.from(hoverLogo, .4, {alpha:0, overwrite:false});
}

hoverLogo.mouseEnabled = false;
menuLabel.mouseEnabled = false;
btnGroup.mouseEnabled = false;
btnGroup.buttonMode = true;

btnGroup.btn1.btnText.text = "Exhibitions";
btnGroup.btn2.btnText.text = "Artists";
btnGroup.btn3.btnText.text = "Gallery";
btnGroup.btn4.btnText.text = "Contact";
btnGroup.btn5.btnText.text = "Sponsors";
menuLabel.btnText.text = "Menu";

var btnName:String = "";

stage.addEventListener(MouseEvent.MOUSE_MOVE, hoverAction, false, 0, true);
btnGroup.addEventListener(MouseEvent.CLICK, btnAction, false, 0, true);
btnGroup.addEventListener(MouseEvent.MOUSE_OVER, btnAction, false, 0, true);
btnGroup.addEventListener(MouseEvent.MOUSE_OUT, btnAction, false, 0, true);

function hoverAction(event:MouseEvent):void {
	if (mouseY < 80 || mouseY > 280) {
		TweenMax.to(btnGroup, .8, {alpha:0, y:0, ease:Exponential.easeOut});
		TweenMax.to(menuLabel, .2, {delay:.2, alpha:1});
		TweenMax.to(hoverLogo, .8, {alpha:1});
	} else if (mouseY > 80 && mouseY < 280) {
		TweenMax.to(menuLabel, .2, {alpha:0});
		TweenMax.to(btnGroup, .8, {delay:.2, alpha:1, y:100, ease:Exponential.easeOut});
		TweenMax.to(hoverLogo, .8, {alpha:.2});
	}
}

function btnAction(event:MouseEvent):void {
	btnName = event.target.name;
	switch (event.type) {
		case MouseEvent.MOUSE_OVER :
			TweenMax.to(event.target, .2, {alpha:.5, scaleX:1.2, scaleY:1.2});
			break;
		case MouseEvent.MOUSE_OUT :
			TweenMax.to(event.target, .2, {alpha:1, scaleX:1, scaleY:1});
			break;
		case MouseEvent.CLICK :
			switch (btnName) {
				case "btn1" :
					trace("Exhibitions");
					break;
				case "btn2" :
					trace("Artists");
					break;
				case "btn3" :
					trace("Gallery");
					break;
				case "btn4" :
					trace("Contact");
					break;
				case "btn5" :
					trace("Sponsors");
					break;
			}
			break;
	}
}
5

thx