# Tricky rollover and rollout situation

**URL:** <https://forum.kirupa.com/t/tricky-rollover-and-rollout-situation/186321>\
**Category:** Uncategorized\
**Created:** [April 20, 2006, 3:06pm UTC](https://forum.kirupa.com/t/tricky-rollover-and-rollout-situation/186321 "2006-04-20T15:06:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajobe123](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@ajobe123](https://forum.kirupa.com/u/ajobe123)\
**Post date:** [April 20, 2006, 3:06pm UTC](https://forum.kirupa.com/t/tricky-rollover-and-rollout-situation/186321/1 "2006-04-20T15:06:34Z")

</div>

I have attached a swf file here, showing how close I am to getting this rollover issue to work.

As you look at the file, I have one large image and 5 small buttons attached to it. What I need to happen is that the large image has a subtle rollover and roll out action. The roll over actino aoccurs when you roll over the image or any of the overlapping buttons and the roll out action does not occur until the mouse has completely left the image and button area.

The trick is that the buttons overlap the image, which has caused me some problems.

Here is the code I am using, but it is not working correctly and I can’t figure out why.

\<code\>

var animState:Number = new Number();//creates status variable  
animState = 0;//this variable lets you know if a button has been rolled over or not.  
\_root.createEmptyMovieClip(“listener”, 3);  
listener.onEnterFrame = function() {//this movieclip watches to see if your mouse has rolled out of the area with your buttons in it  
if (\_xmouse\<768 && \_ymouse\<353 && \_xmouse\>300 && \_ymouse\>0) {//if it has,  
CarMovie.gotoAndPlay(“out”);  
animState = 0;//tells the movie to let the buttons respond again to being rolled over  
}  
};

btn1.onRollOver = function() {  
if (animState == 0) {//if no buttons have been rolled over yet,  
CarMovie.gotoAndPlay(“over”);//play the animation  
animState = 1;//tell the movie that the animation is already playing.  
}  
};  
btn2.onRollOver = function() {//same code as for button1  
if (animState == 0) {  
CarMovie.gotoAndPlay(“over”);  
animState = 1;  
}  
};

btn3.onRollOver = function() {//same code as for button2  
//trace(“onbtn3”);  
if (animState == 0) {  
CarMovie.gotoAndPlay(“over”);  
animState = 1;  
}  
};  
btn4.onRollOver = function() {//same code as for button1  
if (animState == 0) {  
CarMovie.gotoAndPlay(“over”);  
animState = 1;  
}  
};

btn5.onRollOver = function() {//same code as for button1  
if (animState == 0) {  
CarMovie.gotoAndPlay(“over”);  
animState = 1;  
}  
};

\</code\>

I am relatively new to actionscript, so any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![B\_L\_U\_E](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@B\_L\_U\_E](https://forum.kirupa.com/u/B_L_U_E)\
**Post date:** [April 20, 2006, 4:53pm UTC](https://forum.kirupa.com/t/tricky-rollover-and-rollout-situation/186321/2 "2006-04-20T16:53:33Z")

</div>

I’m not sure how you’re setting it up, but I’d use hitTest instead of manually determining X/Ymouse positions. Something like [AS]for(i=1;i\<=5;i++) {  
this[“btn”+i].onRollOver = function {  
if(this.hitTest(\_root.\_xmouse, \_root.\_ymouse) || \_root.bgImage.hitTest(\_root.\_xmouse, \_root.\_ymouse) {  
CarMovie.gotoAndPlay(“over”);  
}  
}  
}[/AS]

---

<div class="post-metadata">

**Author:** ![ajobe123](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@ajobe123](https://forum.kirupa.com/u/ajobe123)\
**Post date:** [April 20, 2006, 5:15pm UTC](https://forum.kirupa.com/t/tricky-rollover-and-rollout-situation/186321/3 "2006-04-20T17:15:54Z")

</div>

Thanks. Like I said, I am newer to actionscript and I don’t quite understand where this code you sent goes with what I have done. Can you comment this a little and help me understand it?