In this tutorial, we are going to learn and implement a custom cursor in our flash movies, using the the Mouse & MouseEvent Classes and their functions in ActionScript 3.0.

In this basic tutorial, you are also going to learn to use the Align Tool to orient objects with pin-point accuracy. So it is recommended you go through this article for the basics of The Align Panel in Flash...

 





Preparing the custom Cursor ::
Sample Cursor
Open a new Flash ActionScript 3 file (Ctrl+N) and create a new movieClip (Ctrl+F8) on the stage. This movieClip would be our custom cursor for the flash movie. I have downloaded an image from Google Images and you could use this for the tutorial.

At this point, make sure you are editing the new movieClip that we created and not the parent flash movie so check the top right corner and make sure it looks something like this...
Now Import the image onto the stage (Ctrl+R) of the movieClip.


Using the Align Panel ::
After importing the image onto the stage of the movieClip, we are going to use the Align panel to help us easily and precisely orient the image on the stage.
Open the Align Panel (Ctrl+K) and the stage should look something like the image below.


The white area shown above is the stage and the "+" sign is the origin of the stage. 
Now make sure the Align to stage checkbox is ticked and click on "Align Left Edge" (1) and the "Align Top Edge" (2) in the align panel to bring the tip of our cursor onto the origin


Note:: The origin ("+" sign) is going to be the the mouse pointer and hence we need to position the image in such a fashion so that the finger acts as the pointer.

Now return the main movie and place the movie clip that we just created on the stage. To do so, open the Library panel (Ctrl+L) and drag and drop the movieclip onto the stage and change the instance name to "cur_mc".
Now add the following code to the first frame of the main movie with the help of the Actions panel (F9).


Code ::
import flash.events.MouseEvent;

stage.addEventListener(MouseEvent.MOUSE_MOVE,cur_fn);

function cur_fn(e:MouseEvent)
{
    Mouse.hide();
    cur_mc.x=stage.mouseX;
    cur_mc.y=stage.mouseY;
    e.updateAfterEvent();
    }



Code Description ::

import flash.events.MouseEvent;

Here, we are telling the flash movie to import the MouseEvent Class which contains events that we will be using in our movie.

stage.addEventListener(MouseEvent.MOUSE_MOVE,cur_fn);

We are assigning an EventListener at the stage level (root) to listen to the events and call the function "cur_fn" when a "MOUSE_MOVE" event is detected.
So whenever the mouse is moved, the event listener calls the "cur_fn" function with the appropriate MouseEvent Object as parameters. 

function cur_fn(e:MouseEvent)
{
    Mouse.hide();
    cur_mc.x=stage.mouseX;
    cur_mc.y=stage.mouseY;
    e.updateAfterEvent();
    }

Here, we are defining the "cur_fn" function that we instructed the eventListener to call when the mouse is moved on the stage...


Mouse.hide(); 

Here, we are calling the hide function which hides the default mouse cursor. 


cur_mc.x=stage.mouseX;
cur_mc.y=stage.mouseY;

Here, we are assigning the x and y cordinates of the current position of the mouse, with respect to the stage and assigning them to the movieClip we created on the stage having the instance name "cur_mc".
This basically means that our movieclip takes the postition of the mouse.


e.updateAfterEvent();

Here, we are calling the updateAfterEvent function for the event "e", which is the mouse event that is passed by the eventListener.

The updateAfterEvent function basically updates/renders the screen every time the event occurs irrespective of the framerate of the movie.
This results in a smooth motion of the cursor. The benifits are much more prominent at lower frame rates.
Now that we know how to change the cursor in our flash movies, we can extend this knowledge to create much more advanced cursors with different states for click and drag (or) create a cursor with a trail (or) implement drag and drop functionality. The possibilities are endless ...

If you face any difficulty implementing the tutorial or with any project you are working, related to the mouse, post your comments and i would be delighted to help you.