0 Replies Latest reply on Oct 6, 2014 11:46 PM by JRsmile

    CS6 - Custom Cursor & Button's icon

    JRsmile

      I am trying to display a custom cursor when mouse is moving on a button which has icon.

      But the button's icon is always in front of my cursor image.

       

      How to make my cursor image on top?

       

      Belows is my code. Please tell me what's wrong.

      Thank you!

       

      <mx:Application... creationComplete = "init()>
      ...
      private var MyCursor:Shape = new Shape();
      private function init():void{
          // draw custom cursor
          MyCursor.graphics.clear();
          MyCursor.graphics.lineStyle(2, 0xFF0000, 1,true);
          MyCursor.graphics.drawCircle(0,0,6);
          MyCursor.graphics.moveTo(-3,-3);
          MyCursor.graphics.lineTo(4,4);
          MyCursor.visible = false;
          // add to the layer
          CursorLayer.addChild(MyCursor);
      }
      
      private function ShowCustomCursor(e: MouseEvent):void
      {
          Mouse.hide();
          MyCursor.x = e.stageX;
          MyCursor.y = e.stageY;
          MyCursor.visible = true;
      }
      
      private funtion HideCustomCursor(e:MouseEvent):void
      {
          Mouse.show();
          MyCursor.visible = false;
      }
      
      <mx:UIComponent id = "CursorLayer" x ="0' y="0" width ="1000" height = "1000" blendMode="layer">
      <mx:Button id="btnTest" x="50" y="5" width="28" height="20" buttonMode="true"
      icon="@Embed(source='assets/btnTest.png')"
      mouseFocusEnabled="true"
      mouseMove="ShowCustomCursor(event)"
      mouseOut="HideCustomCursor(event)"
      tabEnabled="false"
      useHandCursor="true"/>