Animated Custom Cursor (ActionScript 3.0)

Hello. In my country is Valentine Day (I hope that in yours too) so I thought to make something related with this day. So we will build an animated custom cursor, this cursor is represented by a heart. This cursor is easy customizable, you can replace the heart (this will be a graphic) with whatever you want and use it where you want.

Enough with the talk let’s get to work.

1. Go to File – New select Flash file(ActionScript 3.0) and click Ok.

2. On the stage draw a heart with whatever tool you are comfortable too. Select the heart hit F8 to convert it intro a symbol. Set it’s name to heart ,type to MovieClip and registration point to center and click ok.

3.Select the heart and hit delete on your keyboard. This will delete the heart from the stage but the heart will still exist in the Library panel.

4.Go to Window – Library this will open the Library panel. In this panel you should have the heart MovieClip. Selected right click and select Linkage .In the Linkage panel select Export for ActionScript and set the name of the Class to Heart and click Ok.

5.Double click on the Layer 1 name and rename it actions. Select first frame and hit F9 to open ActionScript panel.

6.Copy the next code and paste it in the ActionScript panel.


1. Mouse.hide();
2. var angle:Number = 0;
3. var heartScale:Number = 0.5;
4 var range:Number = 0.05;
5. var speed:Number = 10;
6. var heart:Heart = new Heart();
7. addChild(heart);
8. stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
9. function enterFrameHandler(event:Event):void {
heart.mouseEnabled = false;
heart.x = mouseX;
heart.y = mouseY;
heart.scaleX = heart.scaleY = heartScale + Math.sin(angle) * range;
angle += speed;
}

In first line we hide the default cursor(the arrow).

In lines 2,3,4,5 we declare variables that hold the measurement for angle ( angle variable), set the initial scale of our heart (heartScale).Here 0.5 represents half of the heart scale.The range variable represent the value that will be added to result of the Math.sin() function. If we test Math.sin() function with values of the angle from 0 to 360 we will obtain a interval from -1 to 1.By adding the range variable we can increase or decrease the interval. If our interval was equal to 10 we will have values between -10 and 10.The speed variable help us to increase the value of our angle every frame.

In lines 6,7 we create a heart object and add it to display list.

In line 8 we add an ENTER_FRAME event. This event will fire every frame.

In line 9 we setup the handler for our event. We set the mouseEnabled property to false, that when you pass our cursor over a button interact well with it. We assign the mouse position to the x and y properties of our heart. After we scale our heart in x and y directions and increase the angle variable.

This is all. Remove the numbers before the lines and hit Ctrl + Enter to test the movie.

I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

To download the source file go to:Download Cursor

23 comentarii:

Post a Comment

  • Jeremy : October 16, 2008 at 12:36 AM

    Thank you very much. I have spent a few hours researching how to make a custom cursor using flash cs3 and a few sites have come close, but this one really worked. Thanks again.

  • Henrik : October 17, 2008 at 5:05 AM

    How do you keep the custom cursor when the user right clicks on the screen and gets the context menu?

  • Biochimistu : October 17, 2008 at 8:41 AM

    Hi Jeremy,
    I'm glad that my tutorial helped you.

  • Biochimistu : October 18, 2008 at 3:12 AM

    Hi Henrik,
    That is a good question I wasn’t thinking at this when I have write the tutorial.
    Add this line of code:
    Mouse.hide();
    inside the enterFrameHandler function, this should do it.
    I hope that we talk about the same problem.

  • Henrik : October 18, 2008 at 4:47 AM

    When you right click, with the Mouse.hide() in enterFrameHandler, the mouse dissappears and you can navigate the Context Menu, but it's without a visible cursor icon.

    and we are talking about the same problem!

  • Biochimistu : October 20, 2008 at 10:47 AM

    I know about that behavior. Anyway it’s a step forward, now you don’t have the default cursor on top of the custom cursor. What exactly do you want to achieve?

  • Henrik : October 20, 2008 at 12:00 PM

    I was thinking of having the custom cursor visible while navigating the context menu, but I've played around a bit with it and I haven't found any way to get the custom cursor to show when I have a context menu open.

    Do you know if it's possible or not?

  • Biochimistu : October 21, 2008 at 7:13 AM

    Hi Henrik,
    I don’t know if it's possible or not. I haven't done it. You can try to disable the actual context menu, build a custom one and navigate with your custom mouse on that menu.

  • Henrik : October 21, 2008 at 11:07 AM

    I'm removing the default items and using my own custom menu, but when you right click it appears as if Flash pauses the .swf movie. So using enter_frame event doesn't work to keep the custom cursor.

  • Nebbi : October 22, 2008 at 7:46 AM

    This is an extremely easy tutorial. And it works like a charm.

  • Biochimistu : October 23, 2008 at 8:29 AM

    Hi Henrik,
    I was talking about removing the context menu, not just replace the items and build your own context menu, a movieclip with some links that appears when you right click on the flash player window. I don’t know if it works, it’s just an idea.

  • Kill : January 25, 2009 at 1:42 PM

    I have a little bit of a problem using this script - I used an image in word, converted to Movie type, the cursor WORKS! But it keeps shaking, and I'm not even moving it.

  • Biochimistu : January 27, 2009 at 10:42 AM

    It’s nothing wrong, the cursor is supposed to shake. If you want to remove this behavior comment (remove) the fallowing lines of code:
    var angle:Number = 0;
    var heartScale:Number = 0.5;
    var range:Number = 0.05;
    var speed:Number = 10;
    heart.scaleX = heart.scaleY = heartScale + Math.sin(angle) * range;
    angle += speed;
    .

  • Colby : February 17, 2009 at 6:02 PM

    Thank you so much. Your tutorial was the only one that had the mouseEnabled = false statement that corrected the flicker over my buttons. Thanks again!

  • CardinEsque : March 5, 2009 at 8:13 PM

    To avoid all the trouble with mouseEnabled and mouseChildrenEnabled and what not, you could use a Bitmap instead. I'm not sure why, but a Bitmap is able to function perfectly without blocking any MouseEvents.

    I found this out by accident when I loaded my cursor images in via Loader.

  • Cardin Lee : March 5, 2009 at 8:15 PM

    Btw, no, you cannot create a custom ContextMenu.

    I tried getting around the issue by trying to detect when my mouse left the ContextMenu, but MouseEvent.MOUSE_OUT doesn't seem to register for ContextMenus....

    You can try this by using stage.addEventListener(MouseEvent.MOUSE_OUT, mouseHandler);

    and

    function mouseHandler(e:MouseEvent):void
    {
    trace(e.target);
    }

    You'll see everything, but not ContextMenu.

  • Cardin Lee : March 6, 2009 at 1:51 AM

    After much investigation, I figured out a way to switch back to the original cursor during right-click of context menu, but returns back to custom cursor afterwards.

    Register a MouseEvent.MOUSE_MOVE listener with a Mouse.hide():

    function switchOffMouse(e:MouseEvent):void
    {
    Mouse.hide();
    }

    Register a ContextMenuEvent.MENU_ITEM listener with Mouse.show(). This event triggers whenever ContextMenu appears:

    function contextMouse(e:ContextMenuEvent):void
    {
    Mouse.show();
    }

    That's all to it!

  • Henrik : March 8, 2009 at 7:53 AM

    Cardin Lee!

    Thanks a bunch man for the solution!

    Will implement this!

  • Patrick : March 12, 2009 at 5:03 PM

    Hi There,

    I'm new with Flash and actionscript. But maybe someone can help me out. I tried this and it did work.
    But only when I clicked on a link, the mouse cursor falls behind any picture on my website I made.
    Can someone help me out?
    Thanks in Advance!

  • Biochimistu : March 16, 2009 at 2:34 AM

    I have added a link to this example and clicked but everything is ok, the cursor stays in its place. Give us more details.

  • evan : April 29, 2009 at 2:40 PM

    Should this exact script work for Macs?

    New to actionscript, sorry for my ignorance.

  • Biochimistu : April 29, 2009 at 11:22 PM

    Hi Evan,
    Yes, the script will work on Mac too.

  • Nimesh : December 11, 2009 at 6:37 AM

    Another way is to use a mouse event Mouse_Over.
    When the Mouse moves over the stage, show the custom mouse, and when it exits the stage, remove the mouse
    here is the source:

    /*************************

    Mouse.hide();
    var angle:Number = 0;
    var heartScale:Number = 0.5;
    var range:Number = 0.05;
    var speed:Number = 10;

    var heart:Heart = new Heart();
    addChild(heart);

    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    stage.addEventListener(MouseEvent.MOUSE_OVER, hideMouse);
    //stage.addEventListener(Event.EXIT_FRAME, exitFrameHandler);

    function enterFrameHandler(event:Event):void
    {
    //Mouse.hide();
    heart.mouseEnabled = false;
    heart.x = mouseX;
    heart.y = mouseY;
    heart.scaleX = heart.scaleY = heartScale + Math.sin(angle) * range;
    angle += speed;
    }

    function hideMouse(mse:MouseEvent):void
    {
    Mouse.hide();
    }

    *************************/