Rollover within Rollover?

Ok, here's the deal. I have a large picture that I want to fade to black and white when someone rolls the mouse over. So in the picture movie clip I have something like:

on (rollOver) {
gotoAndPlay ('bw');
}
on (rollOut) {
gotoAndPlay ('color');
}

Then inside the big picture I have hotspots that will highlight when the mouse rolls over them. So for the hotspot movie clips I put something like:

on (rollOver) {
gotoAndPlay ('highlight');
}
on (rollOut) {
gotoAndPlay ('normal');
}

The hotspot movie clips are above the main picture in the timeline. The problem I get is when you mouseover a hotspot to highlight it, the main image registers this as you rollout of it and changes back to color. Does anyone know of a way to keep the main image black and white when you are rolling over the hotspots but still turn it back to color when you roll off the entire thing? Oh, and I can't use actual mouse x,y to do this because the image and hotspots will need to be changed and updated regularly.

Are the hotspots attached to the picture, or are they attached to root and sitting on top of the picture? In other words do you have these objects:

(nested)
_root.bigpicture
_root.bigpicture.hotspot1
_root.bigpicture.hotspot2

or these objects:

(non-nested)
_root.bigpicture
_root.hotspot1
_root.hotspot2


?

- Jim

Currently they are like the second option you listed, although I have tried both ways with no luck.

Unfortunatly, Flash will only allow one object to be roll-overed at a time.

Also, if you nest the hotspots inside the picture, then the hotspots won't receive rollover events at all, because the outer clip eats the event.

In short, Flash does not support nested rollovers which is what you want here.

However, I found a somewhat kludgy work-around, and I'm enclosing a FLA file that demonstrates it.

You nest the movieclips, and then use an onEnterFrame handler to generate a fake rollover event for the inner (nested) clips by using hitTest.

Here's the script. It assumes the outer clip is named mcclip and the inner clip is named mc (or mcclip.mc).

code:

---

mcclip.onRollOver = function()

{

	trace("outer rollover: " + this);

}



mcclip.onRollOut = function()

{

	trace("outer rollout:  " + this);

}



mcclip.mc.onEnterFrame = function()

{

	if (this.hitTest(_root._xmouse, _root._ymouse, true))

	{

		if (!this.isRollOver)

		{

			this.isRollOver = true;

			trace("inner rollover: " + this);

		}

	}

	else {

		if (this.isRollOver)

		{

			this.isRollOver = false;

			trace("inner rollout: " + this);

		}

	}

}

---

Man, what a mess for something that at once seemed so simple heh. Thanks a ton for the help! I'll go and try this out.

A simpler fix might be to leave the clips unnested as you had them, and ignore the rollout event for your outer movie if you are still getting a hitTest on the mouse.

So your outer rollout handler would look like this:

code:

---

on(rollOut)

{

  if (!this.hitTest(_root._xmouse, _root._ymouse))

  {

     // mouse is outside of movie...

     // handle rollout normally

  }

}

---

This also has the advantage of not sucking your CPU with a needless onEnterFrame handler.

Thanks, that works alot better. I had to get rid of the fade into black and white effect in order for it not to start the fade when you roll off the inside clip, but better than having the messy onEnterFrame script.

man, thanks so much for your code! i was struggling for needless hours trying to figure out why a rollover within a rollover didn't work! seemed like a pretty obvious thing that a newbie might try to do, so i'm not sure why flash doesn't support it. isn't this simply "recursion", which i thought was one of the fundamental and wonderful things about programming languages?

anyway... to add to the discussion, what if you wanted to make the inner rollover as described in this thread also clickable, so that you not only can rollover it to make it's color change, for instance, but if you click on it, it calls the getURL method?

please advise! thanks.

can anyone help what is the meaning of nested if statement under
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {

the if statement here? what is the purpose of it especially the this.isRollOver
}

Sorry im not incompetent in flash... Im newbie in actionscript...

Um, are you looking to do something specific? Not sure if I understand your question.

what does this do? what is !this.isRollOver? is this reserved word or what..

if (!this.isRollOver)
{
this.isRollOver = true;
trace("inner rollover: " + this);
}
}
else {
if (this.isRollOver)
{
this.isRollOver = false;
trace("inner rollout: " + this);
}

this.isRollOver is a variable. If it's false or non-existant then it is set to true where it says this.isRollover=true;. If it's true then the else runs and it is set to false. It's just coded to use as a toggle.

Sorry if im asking this question... Im still little confused.. if this is a variable where is the declaration of it and the boolean value of it at first.. I mean where did it get its first value (whether true or false) to validate the if statement.. thanks hope you can help me understand this...btw this is my problem, i have a flash project which troubling me on nested rollOver.. This is the scenario. I have put a onRollOut button state a movieclip.. which under that movieclip i have a invisible button named (btnInvi) which triggers the a movieclip to play everytime you rollover on that invisible button... Actually this whole thing is some kind of drop down menu.. Now the problem is it is not detecting the rollover state as the problem here also.. but the difference is im using invisible button to trigger the movieclip to play which is below a movieclip which has onRollout state.. can u advise me.

The default value for a variable that hasn't been declared is 'undefined'. But when using (if variable) {, the if will evaluate false for both the value "FALSE" and for "undefined", so the code works and has the variable at false first, but the variable probably should be declared first for readablitity, it's just lazier to do it that way.
As far as the second part of your question, I'll see if I can answer it later when I'm not so tired heh.

now i know... thank you for that clear explanation Mctitles. I really appreciate your help and time your giving.. :)

Hey, just wanted to get in on this.

You can also create some variables to monitor things.

For mctittles picture thing, I'd make up a var like mainPicStatus.

mainPicStatus = "color";
or
mainPicStatus = "bw";

That'd mean it's black and white which means it has been moused-over. If you're doing a mouse over on a hotspot now, the hotspot can simply check mainPicStatus and leave the picture the way it is.

So no matter where, or what, you're mousing over or off of, you can simply check mainPicStatus to see what to do or not to do.

on (rollOver) {
if(mainPicStatus == "color"){
// do something here because you know the picture is color
}
}

Put these variables in the root movie so they're available from anywhere in the movie using _root. in front of it.

Meaningful vars like these help keep the programming clear and literal.

that is easy but what if the problem is that you need to detect a rollOver over a two lower movieclip below the _root.. like

_root.mcClip.mcClip2.mcClip3 (nested)

which the mcClip2 has a rollOut state and mcClip3 has a rollOver state also that everytime you rollOver on it plays animation in that movieClip. the purpose of the rollOut state in the mcClip2 is to play the gotoAndStop which close the whole movie... which is on frame 1.. and in the root timeline i have also 5 main navigation button which is the same situation as like this.. can anyone help me...

anything under A rollover..will NOT be 'seen' as the ROLLOVER is in EFFECT...so the rollovers you have UNDERNEATH this rollOver..wont be triggered..cause thr first/top ROLLOVER is still in effect..and will be until the ROLLOFF effect is triggered. if you want to trigger anyting UNDER a ROLLOVER at the SAME time..then you need to use a HITTEST method..(as stated above)

you can use invisible buttons too - buttons with only the hit frame filled in

you can make your invisible buttons in any shape and put them on any layer you need including the top layer

take the rollovers and rollouts that are being buried and put them on invisible buttons on the top layer.

just reiterating gazoings comment -
what if you wanted to make the inner rollover as described in this thread also clickable, so that you not only can rollover it to make it's color change, for instance, but if you click on it, it calls the getURL method?

Wow, what a thread brought back from the dead! 2004...
Anyway, now to answer MY question hah.
What I would do nowadays for things like this, when only dealing with a couple clips is to just do a stage wide onmouseup event and check for hittest. For example:

code:

---

this.onMouseUp=function () {

if (innerClip.hitTest(_root._xmouse,_root._ymouse) {

//do something;

}

else if (outerClip.hitTest(_root._xmouse,_root._ymouse) {

//do something else;

}

---

Hope that helps!

which I dont think is much different than the MANY replies in that thread that state to use hitTest() instead of a simple rollOver() action.. ;)

Quote:

---

Originally Posted by Mctittles

Wow, what a thread brought back from the dead! 2004...
Anyway, now to answer MY question hah.
What I would do nowadays for things like this, when only dealing with a couple clips is to just do a stage wide onmouseup event and check for hittest. For example:

code:

---

this.onMouseUp=function () {

if (innerClip.hitTest(_root._xmouse,_root._ymouse) {

//do something;

}

else if (outerClip.hitTest(_root._xmouse,_root._ymouse) {

//do something else;

}

---

Hope that helps!

---

Ahh that's just making things confusing... what are you testing for? why are testing for outerClip onMouseUp. Hmm
So would I keep all that onEnterFrame script with if (!this.isRollOver) { etc etc. and then add the onMouseUp hitTest?

This is what I have:

topbar_work_id_hotspot.onEnterFrame = function() {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
if (!this.isRollOver) {
this.isRollOver = true;
useHandCursor = true;
topbar_work_id.gotoAndPlay(2);
}
} else {
if (this.isRollOver) {
this.isRollOver = false;
topbar_work_id.gotoAndPlay(8);
}
}
};

And I want to add onRelease as follows...

topbar_work_id_hotspot.onEnterFrame = function() {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
if (!this.isRollOver) {
this.isRollOver = true;
useHandCursor = true;
topbar_work_id.gotoAndPlay(2);
topbar_work_id_hotspot.onRelease = function() {
var moveOffImageX:Tween = new Tween(_root.content.image_hold......
}
} else {
if (this.isRollOver) {
this.isRollOver = false;
topbar_work_id.gotoAndPlay(8);
}
}
};

Quote:

---

Originally Posted by whispers

which I dont think is much different than the MANY replies in that thread that state to use hitTest() instead of a simple rollOver() action.. ;)

---

Not really except for the fact it is using an onMouseUp event because the person who brought this thread back wanted to know about clicking something instead of just rollover. Anyway...

The onMouseUp event is a global event...by that I mean it works for the entire stage. When the mouse comes anywhere, it runs. So you wouldn't need to put this in the onEnterFrame, just by itself. You can also use onMouseDown to look for a global mouseDown event. So what you do is check for when a mouse is clicked down or let up, then inside that you see where the mouse is at the time. If it is over the right clip then do what you want to do for that clip. The reason I checked for for inside and then outside is the hitTest will return true for the inside and true for the outside when you click inside and will reture false for the inside and true for the outside when you click on the outside click but not inside of that...

Fan-blooody-tastic. Yeh i have my script

topbar_work_id_hotspot.onEnterFrame = function() {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
if (!this.isRollOver) {
this.isRollOver = true;
useHandCursor = true;
topbar_work_id.gotoAndPlay(2);
}
} else {
if (this.isRollOver) {
this.isRollOver = false;
topbar_work_id.gotoAndPlay(8);
}
}
};

and before that I have
topbar_work_id_hotspot.onMouseUp = function() {
clearInterval(handle);
var moveOffImageX:Tween = new Tween(_root.....

which was previously onRelease. So are you saying onMouseUp worked where onRelease didn't because it is a global function?
Yeh I only needed the inner rollover to be clickable so didnt need another hit test code...
Thanking you,
Now only 2 problems for my website left to solve. Ha
B

Glad you got it working. A couple things to note:
.onMouseUp, .onMouseDown, .onMouseMove etc are all global events. This means that it doesn't matter if you apply them to a movie clip or the main timeline or an object, it will always register no matter where on the stage the mouse event occurs. So, to make the script less confusing it's best just to assign it to this or _root (_root.onMouseUp=function). Using the movie clip (topbar_work_id_hotspot.onMouseUp) makes no difference. This is also the reason I had the hitTest code within the onMouseUp event, since it will register a click for any place on the stage.

Also, this jumping through hoops like my example was only to make nested click events work. If you only need the inner rollover clickable then this should work better:

code:

---

topbar_work_id_hotspot.onPress=function () {

//stuff

}

---

or...

code:

---

topbar_work_id_hotspot.onRelease=function () {

//stuff

}

---

Whichever you fancy...

ha ah yeh it isn't working... cos it doesn't matter where i click, it still executes the code. its like using onrelease without assigning it to an mc.
yeh the reason i resurrected this script is because topbar_work_id_hotspot.onRelease=function () { did work... even if it was separate from the rollover within rollover script. ok so I've used what u said earlier:

this.onMouseUp=function () {

if (topbar_work_id_hotspot.hitTest(_root._xmouse,_roo t._ymouse) {
//do something;

why topbar_work_id_hotspot.hitTest.onrelease didn't work I don't know.

Thanks heaps dude.
Appreciate it.

"topbar_work_id_hotspot.hitTest.onrelease" Is that what you were trying? It would be "topbar_work_id_hotspot.onRelease"

yeh sorry i meant to say topbar_work_id_hotspot.onRelease. If i have your onEnterFrame hitTest script and onRelease it doesn't seem to work... even when they are separately run functions...

Quote:

---

Originally Posted by jbum

A simpler fix might be to leave the clips unnested as you had them, and ignore the rollout event for your outer movie if you are still getting a hitTest on the mouse.

So your outer rollout handler would look like this:

code:

---

on(rollOut)

{

  if (!this.hitTest(_root._xmouse, _root._ymouse))

  {

     // mouse is outside of movie...

     // handle rollout normally

  }

}

---

This also has the advantage of not sucking your CPU with a needless onEnterFrame handler.

---

Hey question... I'm just wondering how to implement this with the situation I have. I've got it working with the previous onEnterFrame script no worries, but I'm wanting to avoid that if I can.

So I have a drawer which onRollOver slides out. Within this drawer I have a holder mc which dynamically loads in a swf (the loaded swf file is determined by another set of buttons). The swf file contains a row of mcs which have onRollOver handlers. The onRollOver is there to execute a script to set a 'bar' to the x-pos of which ever button is rolled over.

This means that I have a Rollover within a Rollover. As I said, applying the mc1.onEnterFrame = function.... to the mcs within the swf works, but I'm wanting to use the cleaner on(rollOut) script.

Cheers
Barton

well its sorta up to you how you want to approach this..

but usually some mix of hitTest and onRollOver/Out will work..

just need to decide what top check for?...and when you want to 'activate' the conditional checks..

example:

instead of on EnterFrame... maybe you can use onMouseMove()..

this way ever time the mouse moves it will check to see it is over this drawer clip.. if so.....

once your hitTest is true.. set a variable.. (drawerOpened == true;)

and then check to see if that var is true or false..

onMouseMove()
check if mouse is over drawerClip.... if it IS..

check to see if isOpened variable is false.. if FALSE..load the .swf with buttons.. if True.. then you have already hovered over clip..and loaded the swf..

the rollOvers in the .swf should still work fine I believe..

Yea, it's something that is not designed in the way flash works so you will probably have to do something a little "hacky" for it to work. If you are concerned about resources with a constant onenterframe or onmousemove, perhaps you could only have the onRollOver, onRollOut within the main larger clip. Then when it's rolled over, start the onMouseMove and when it's rolled off delete the onMouseMove. Might want to test a bit on it as onEnterFrame being turned on and off might work better than onMouseMove. The reason being, I think if you move the mouse quick enough where it goes from outside everything to inside one of the smaller ones, the onRollOver will be called, but onMouseMove won't until you move the mouse again...

I gotta say, it seems a lot more logical to have the main button execute the onEnterFrame event and the submenu buttons have the onRollOver events.
I hope I wasn't confused and the idea was supposed to be like this originally.

Anyway just made my life easier...