AS3: How to make this mouse position detection work properly? - actionscript-3

Question

I'm new to AS3 so please bare with my basic questions.
What I want to do is have a left arrow MC on the left side of the stage and right arrow MC on the right side of stage. When the mouse is over the left 1/3 of the stage, the left arrow appears, on the right 1/3 of the stage, the right arrow appears, but the middle 1/3 the arrows fade out.
I do NOT want to make large invisible MCs and detect the mouse movement that way. I just want it to be relative to the mouse position on the stage.
I thought it would be very easy, but the eventListener fires everytime the mouse moves, so the left and right arrow MC animation is constantly being triggered, and they look like they are "shaking" for a lack of a better word.
What I have so far is the following. Could someone please give me some help with this?
var stagePos:int = stage.width/3;
addEventListener(MouseEvent.MOUSE_MOVE, arrowDetectHandler);
function arrowDetectHandler(e:MouseEvent) {
var mouseArrow:int = mouseX;
if (mouseArrow<stagePos) {
arrowLeft_mc.gotoAndPlay("Show");
trace ("left arrow show");
} else if (mouseArrow>stagePos && mouseArrow<stagePos*2) {
arrowLeft_mc.gotoAndPlay("Hide");
arrowRight_mc.gotoAndPlay("Hide");
trace ("nothing happens");
} else if (mouseArrow>stagePos*2) {
arrowRight_mc.gotoAndPlay("Show");
trace ("right arrow show");
}
}

Answer 1

if...else seem to be ok. The only thing which may couse the problem is mc.gotoAndPlay. Try to use alpha property instead:
var stagePos:int = stage.width/3;
addEventListener(MouseEvent.MOUSE_MOVE, arrowDetectHandler);
function arrowDetectHandler(e:MouseEvent) {
var mouseArrow:int = mouseX;
if (mouseArrow<stagePos) {
arrowLeft_mc.alpha = 1; //alpha is 1, arrow is shown
trace ("left arrow show");
} else if (mouseArrow>stagePos && mouseArrow<stagePos*2) {
arrowLeft_mc.alpha = 0; //alpha is 0, arrow is hidden
arrowRight_mc.alpha = 0;
trace ("nothing happens");
} else if (mouseArrow>stagePos*2) {
arrowRight_mc.alpha = 1;
trace ("right arrow show");
}
}

Answer 2

The trouble is the speed with which your code is getting called repeatedly.
If you you are listening to MouseEvent.MOUSE_MOVE then it will happen way too fast for any 'gotoAndPlay' business to finish.
Since you don't want to do the invisible MovieClips ( which gives you the very handy MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT events ) then you are left polling to evaluate coordinates like you have in your code.
You need to remember the last 'answer' your code gave and then ignore the case that is already true next time. You'll have to bear with my preference for switch statements.
var stagePos:int = stage.width/3;
var _arrowShowing : int = 0;
addEventListener(MouseEvent.MOUSE_MOVE, arrowDetectHandler);
function arrowDetectHandler(e:MouseEvent)
{
var mouseArrow:int = mouseX;
switch( true )
{
case ( !_arrowShowing == 1 && mouseArrow < stagePos ) :
_arrowShowing = 1;
arrowLeft_mc.gotoAndPlay("Show");
trace ("left arrow show");
break;
case ( !_arrowShowing == 0 && mouseArrow > stagePos && mouseArrow < stagePos * 2 ) :
_arrowShowing = 0;
arrowLeft_mc.gotoAndPlay("Hide");
arrowRight_mc.gotoAndPlay("Hide");
trace ("nothing happens");
break;
case ( !_arrowShowing == 2 && mouseArrow>stagePos*2 ) :
_arrowShowing = 2;
arrowRight_mc.gotoAndPlay("Show");
trace ("right arrow show");
break;
}
}