Solved: AS3 custom cursor on ROLL_OVER -- MINI TUTORIAL???

[nothingGrinder]

hello all,
I have been creating the new nothingGrinder website in FLASH CS3 and AS3. AS3 is amazing and so much better than AS2, I'm just loving it. I have been trying to add a custom cursor on ROLL_OVER / MOUSE_OVER to my buttons. now, my buttons are constructed as small animations with movieclips inside movieclips inside movieclips. Each layer of movieclips being animated in a certain way. I have read multiple tutorials and classes that contain mouse rollover tooltips and cursors. the Flash Video Gallery thats provided by Adobe is something else i have been going through and copying code from. so, what i have now is a cursor that appears on rollover but the button is constantly going back and forth between OVER and OUT states and i cant figure out why...

 here is the event handlers I'm using...

Code: [Select]

function mouseOverHandler(e:MouseEvent):void {
trace("mouseOverHandler");
Mouse.hide();
var tooltip = root["ourMouse"];
tooltip.x = root.mouseX;
tooltip.y = root.mouseY;
root["ourMouse"].visible = true;
addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}

function mouseOutHandler(e:MouseEvent):void {
trace("mouseOutHandler");
Mouse.show();
root["ourMouse"].visible = false;
removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}

function mouseMoveHandler(e:MouseEvent):void {
var tooltip = root["ourMouse"];
tooltip.x = root.mouseX;
tooltip.y = root.mouseY;
//e.updateAfterEvent();
}

in the "mouseMoveHandler" method, if i change the tooltip.x and .y to e.localX and localY, the cursor appears in the top left corner of the stage, way off the button, but it doesn't blink and looks good, just bad positioning. So, the root.mouseX was taken from the Flash Video Gallery example but still blinks like crazy in my app.

the listeners I'm using are here...

Code: [Select]

function addListeners():void {
for (var i:Number = 0; i < btnA.length; i++) {
btnA[i].addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
btnA[i].addEventListener(MouseEvent.MOUSE_UP, mouseUp);
btnA[i].addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
btnA[i].addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
}
}

any help or ideas would be very much appreciated. Thank you.

[nothingGrinder]

solved the problem. The issue was that the mouse its self kept rolling over the cursor and that would trigger the ROLL_OUT event on the button, then the cursor would be removed and then that would trigger the ROLL_OVER event and again and again and so on. So, i moved the custom tooltip to a location where the mouse wouldn't hit it and now it works fine. I suppose, that if you want the tooltip or a custom cursor to be centered on the mouse position, then inside the MOUSE_MOVE handler, you need this code...

Code: [Select]

function mouseMoveHandler(e:MouseEvent):void {
var tooltip = root["ourMouse"];

 ///////***added code for centered custom mouse****///////////

        tooltip.mouseEnabled = false;

///////*** End added code ******///////////////

tooltip.x = root.mouseX;
tooltip.y = root.mouseY;
//e.updateAfterEvent();
}

be sure to double check the syntax before using this. thanks.

here is usable code...

Code: [Select]

package {

    public class MouseTest  {
         private var ourMouse:Object;
         private var btnA:Array;
         private var timeline:Object;

         public function MouseTest( o:Object, a:Array, t:Object )
        {
           ourMouse = o;
           bntA = a;
           timeline = t;
           init();
         }
         private function init():void
         {
             addchildren();
             addListeners();
          }
          private function addchildren():void {
     for (var i:Number = 0; i < btnA.length; i++) {
timeline.addChild( btnA[i] );
     }
              timeline.addChild( ourMouse );
              timeline.ourMouse.visible = false;
          }
          private function addListeners():void {
     for (var i:Number = 0; i < btnA.length; i++) {
btnA[i].addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
btnA[i].addEventListener(MouseEvent.MOUSE_UP, mouseUp);
btnA[i].addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
btnA[i].addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
     }
          }
        private function mouseOverHandler(e:MouseEvent):void {
     var tooltip = timeline.ourMouse;
     tooltip.x = timeline.mouseX;
     tooltip.y = timeline.mouseY;
     timeline.ourMouse.visible = true;
     addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
        }

        private function mouseOutHandler(e:MouseEvent):void {
    timeline.ourMouse.visible = false;
    removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
        }

        private function mouseMoveHandler(e:MouseEvent):void {
    var tooltip = timeline.ourMouse;
    tooltip.x = timeline.mouseX;
    tooltip.y = timeline.mouseY;
       }
   }
}
 
I just threw this together in about 5 mins, so if you have any questions ro comments, or additions or fixes, please post them here. Thanks. Maybe we should move this post to the tutorials sections?

[Jorge Solis]

Put togheter the movie with the reusable tooltip so we can publish as "AS3 tooltip" and send to me

Thanks
Jorge