• home
  • forum
  • my
  • kt
  • download
  • Custom Cursor(with click support)!

    Author: 2009-07-15 01:23:52 From:

    Okay first set up your cursorMC object.

    In cursorMC:
    Put this as frame 1:
    Cursor Frame 1
    Put this as frame 2:
    Cursor Frame 2

    Set the Class to cursorMC(or instance name, for those AS2 terminology people).

    Now create a class in the main folder called cursorMC. Have the first param be stage.

    You will need to import the following:

    1
    2
    3
    4
    import flash.display.MovieClip
    import flash.events.MouseEvent
    import flash.events.Event
    import flash.ui.Mouse

    Reasons:

    flash.display.MovieClip – your cursorMC has to extend MovieClip and thus you need to import the MovieClip class.

    flash.events.MouseEvent – You will be using MOUSE_MOVE, MOUSE_UP, MOUSE_DOWN.

    flash.events.Event – You will be using REMOVED_FROM_STAGE

    flash.ui.Mouse – You need to hide/show the mouse

    Okay so far you have:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    package{
        import flash.display.MovieClip
        import flash.events.MouseEvent
        import flash.events.Event
        import flash.ui.Mouse

        public class cursorMC extends MovieClip{
            public function cursorMC(stage):void{

            }
        }
    }

    Now you need to add some basic actionscript in the initializer function(cursorMC(stage)):

    stop();

    Mouse.hide();

    What this does is stop the mouse from going crazy clicking and letting go and hiding the actual computer cursor.

    Next you need to add your event listeners.

    1
    2
    3
    4
    stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
    stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
    addEventListener(Event.REMOVED_FROM_STAGE, onRemove);

    Our first line detects when you press the left mouse button.

    Our second line detects when you let go of the left click.

    Our third line detects when the mouse moves.

    The fourth line is there to prevent errors when the cursor is removed from the stage by undoing everything done.

    Before we start writing the event listener codes though, we have to create a function later — updateCoor.

    1
    2
    3
    4
    5
    private function updateCoor(e:MouseEvent):void{
        x = e.stageX;
        y = e.stageY;
        e.updateAfterEvent();
    }

    What this does is set the location of our custom cursor to the correct location. Then it uses the MouseEvent variable to update the stage via updateAfterEvent. This makes the cursor not look choppy when moving fast.

    If you want to learn more about this nifty little function, you can visit my updateAfterEvent tutorial here

    Now we can continue with our event listeners.

    onDown:

    1
    2
    3
    4
    private function onDown(e:MouseEvent):void{
        updateCoor(e);
        gotoAndStop(2);
    }

    The Coordinate is updated when you click, and the custom cursor goes to the ‘click’ frame.

    onUp:

    1
    2
    3
    4
    private function onUp(e:MouseEvent):void{
        updateCoor(e);
        gotoAndStop(1);
    }

    The coordinate is again updated, and the mouse goes to the released state(frame 2).

    onMove:

    1
    2
    3
    4
    private function onMove(e:MouseEvent):void{
        Mouse.hide();
        updateCoor(e);
    }

    Whenever you move the cursor, it is hidden(this makes the mouse constantly be hidden in case it is unhidden by right clicking), and, ofcourse, the cursor coordinates are updated.

    Now our last function, onRemove:

    1
    2
    3
    4
    5
    6
    7
    private function onRemove(e:Event):void{
        Mouse.show();
        stage.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
        stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
        removeEventListener(Event.REMOVED_FROM_STAGE, onRemove);
    }

    This function undoes everything we’ve done, and is only called when the object is removed from the display list or stage.

    Now to finally make all this code work, use this code to add the cursor to the stage:

    1
    addChild(new cursorMC(stage));

    Your cursorMC class should look similar to:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    package{
        import flash.display.MovieClip
        import flash.events.MouseEvent
        import flash.events.Event
        import flash.ui.Mouse

        public class cursorMC extends MovieClip{
            public function cursorMC(stage):void{
                stop();
                Mouse.hide();
                stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
                stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
                stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
                addEventListener(Event.REMOVED_FROM_STAGE, onRemove);
            }
            private function onMove(e:MouseEvent):void{
                Mouse.hide();
                updateCoor(e);
            }
            private function onDown(e:MouseEvent):void{
                updateCoor(e);
                gotoAndStop(2);
            }
            private function onUp(e:MouseEvent):void{
                updateCoor(e);
                gotoAndStop(1);
            }
            private function updateCoor(e:MouseEvent):void{
                x = e.stageX;
                y = e.stageY;
                e.updateAfterEvent();
            }
            private function onRemove(e:Event):void{
                Mouse.show();
                stage.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
                stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
                stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
                removeEventListener(Event.REMOVED_FROM_STAGE, onRemove);
            }
        }
    }

    To use it, simply put this in the main class or frame 1.

    1
    addChild(new cursorMC(stage));


    To get the source for this, go here

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (36)
      Math Physics (18)
      3rd Party (10)
      Navigation (70)
      Actionscripting (253)
      Optimization (17)
      Animation (185)
      Projector (11)
      Audio (54)
      Special Effects (173)
      Backend (26)
      Text Effects (93)
      Drawing (34)
      Tips and Techniques (58)
      Dynamic Content (38)
      Tricks (8)
      Games (114)
      Utilities (24)
      Getting Started (99)
      Video (59)
      Interactivity (48)
      Web Design (37)

    New

    Hot