AS3: Custom Cursor

This tutorial will teach you how to create a custom mouse pointer in Flash using ActionScript 3.

Step 1: Create a new Flash movie with the ActionScript version set to 3.0. The background color, frame rate and the stage size do not matter for this tutorial.

Step 2: Create one new layer, so you will have two layers, then name the one at the bottom Pointer and the one on top Actions.

Step 3: Now, select the Pointer layer and draw your custom cursor.

Step 4: Use the Select Tool (V) and select your custom cursor. Now Press F8 on your keyword to convert it to a symbol. We will need to convert the shape to a symbol to be able to manipulate it easily with ActionScript. Set the name of  the symbol to cursor and the symbol type to Movie Clip.

Step 5: Now, we need to set an Instance Name for our symbol so we can easily refer to it using ActionScript. Use the Select Tool (V) and select the symbol (your custom cursor), access the Properties Inspector and set MyPointer as the instance name of your custom cursor.

Step 6: Coding our Custom Cursor: click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open Actions panel.

 

Step 7: Copy and paste this code to your Actions panel.

Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, setXY);

function setXY(evt:MouseEvent){
 MyPointer.x = mouseX;
 MyPointer.y = mouseY;
}

Note: Mouse.hide() function hides the mouse pointer. You can use Mouse.show() function to unhide the mouse pointer.

That’s it, We are done. You can now test your movie (Ctrl+Enter) to see your custom cursor working :) !

Downloads:

Flash CS3: Custom Cursor :: AS3

Flash CS4: Custom Cursor :: AS3

Share and Enjoy:
  • Print this article!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Twitter
  • Twitthis
            Delicious     Bookmark this on Delicious

Copyright & Usage

The effects and techniques demonstrated in tutorials on AllTutz can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

2 Responses to “AS3: Custom Cursor”

  1. DjUrban says:

    When I Use this script and i roll over the mouse on my menu, it doesn´t work

  2. admin says:

    This script is for a movie clip that’s why we are adding a Listener to the stage. If you tell me how you want to customize the code, I can help :) .

Leave a Reply