Tuesday, 2 June 2009

Custom cursor in AS3

This is an update tutorial from the previous custom cursor tutorial in Actionscript 2.0. The custom cursor this time will be in Actionscript 3.0. The steps are similar, only the code needs to be changed. The rest of the tutorial is pretty much the same as the previous one.

Custom cursor using the timeline

Step 1

Open a new Flash document.
Create your custom cursor object on the stage. I have created a green crosshair similar to my previous tutorial, but you can create whatever object you wish.




Step 2

Convert your object into a symbol by pressing F8. Then give your symbol an appropriate name, check movie clip for the type and click ok.



**Note the registration point is where your custom cursor point will begin. I have selected the centre point for my cursor, but you will probably need to select the top left point for your cursor.


Step 3

Give your custom cursor the instance name: customcursor_mc.




Step 4

On the timeline insert a new layer called “Actions” like below:




Right click on the first frame and select Actions and add the following code:


Mouse.hide();
customcursor_mc.startDrag(true);

**The first line of code hides the default cursor. While the second line of code make the custom cursor follow the hidden default cursor.

If you run into any problems with the code above use the following code below.

stage.addEventListener(Event.ENTER_FRAME, moveCursor);

function moveCursor(event:Event) {
customcursor_mc.x=mouseX;
customcursor_mc.y=mouseY;
}

Step 5

Test your custom cursor Ctrl + Enter.



You should now have a custom cursor in Actionscript 3. If you wish to dynamically add the cursor onto the stage, take a look at this tutorial.
Feel free to contact me for any questions or comments and remember to subscribe. The source files can be downloaded here.

8 comments:

Air 8 February 2010 at 15:48  

I got my custom cursor working, but there's a part in my flash movie where you can drag and drop clothing objects around. When my movie reaches this stage, the custom cursor "freezes" on the stage whenever I click on one of the clothing items. Do you know how to fix this problem?

iliketo 11 February 2010 at 03:59  

@Air

Try using this alternative code.

stage.addEventListener(Event.ENTER_FRAME, moveCursor);

function moveCursor(event:Event) {
customcursor_mc.x=mouseX;
customcursor_mc.y=mouseY;
}

littlepans 21 February 2010 at 18:55  

The code is working. But is there any way to make this play a sound when clicked. As in, it play a shooting sound every time you left click.

Thanks ahead of time

iliketo 22 February 2010 at 03:54  

@littlepan

Take a look at this tutorial

Joshua Castillo 16 November 2013 at 14:38  

Hello,
I used your custom cursor, and I wanted to use it also for buttons, however the buttons were not responding with the cursor. How do I fix this?

iliketo 18 November 2013 at 05:30  

@Joshua,

Please explain what you mean by the buttons not responding?

Joshua Castillo 20 November 2013 at 12:13  

I mean, when I click a button on a movie-clip using the custom cursor, the actions will not work. It will not do the actions I used, such as gotoAndStop(1, "Desktop") using goClick function.

Is there any way to fix this?

iliketo 20 November 2013 at 13:45  

@Joshua,

Try using a trace statement to see if the click code is working first.

If the trace statement is showing it could be your gotoAndStop code that is incorrect.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP