Sunday, 13 April 2008

Create a custom cursor in flash

In this Flash tutorial you will learn how to create a custom cursor in Actionscript 2.0. Custom cursors are useful for games, website and multimedia applications. I have created a red crosshair for this tutorial, but you can create whatever kind of cursor you wish.

**UPDATE: New Custom cursor in Actionscript 3.0 now available.

Create a custom cursor in Flash

Step 1

Create a new flash document. Select any colour as your background.


Step 2

Draw your custom cursor on the stage. I created a cross hair using the oval tool (O) and line tool (N) and fill the shape in red. You can design whatever kind of cursor you wish.
Make sure your cursor is an appropriate size.

Photobucket


Step 3

Take the selection tool (V) and highlight your custom cursor on the stage. Select F8 to convert it to a symbol. Choose an appropriate name and check the movie clip button and click Ok.

Photobucket


Step 4

Select the custom cursor and give it an instance name. eg. cursor_mc.

Photobucket


Step 5

Create a new layer on the time line and call it "actions".
Right click on the 1st frame of the actions layer and select actions.

Photobucket


Step 6

Type the following code the in the actions box:

Mouse.hide();

cursor_mc.onMouseMove = function(){
this._x = _root._xmouse;
this._y = _root._ymouse;
updateAfterEvent();
};


**This small piece of code basically hides the existing cursor and replaces it with your custom cursor.


Step 7

Choose Ctrl + Enter to test movie.



You should now have a custom cursor. Feel free to contact me for any questions or comments.

Checkout custom cursor part 2.


**UPDATE: Custom cursor in Actionscript 3.0 now available.

10 comments:

Wow 6 July 2008 at 04:52  

I love this guide, Thank you for posting it up. It helped me alot.

Jenny Renigen 20 October 2008 at 07:39  

how can i save it for use in the control panel?

iliketo 27 October 2008 at 09:52  

@ Jenny Renigen

Can you explain what you mean?

Patrick 21 November 2008 at 08:54  

I'm getting Compiler Error messages when I export the movie.

iliketo 21 November 2008 at 13:11  

@Patrick

What does the compile error say?

Ditta 17 March 2009 at 23:27  

verry good

Ryan 26 January 2010 at 09:52  

what if I wanted the image to change direction based on mouse direction?

iliketo 26 January 2010 at 16:04  

@Ryan

Which image are you referring to? There is no image in this tutorial.

Ryan 27 January 2010 at 15:21  

lets say i want to have a mc of an arrow pointing right when i move the mouse right and an arrow of a mouse pointing left when i drag left. the image that the script is calling for (ex. the cross-hairs or an arrow) would change according to the direction.

iliketo 27 January 2010 at 15:40  

@Ryan

Here is some code to get you started. You need add your own attachMovie method code to display the left and right images.

var halfStageWidth:Number = Stage.width/2;

if (this._x>=halfStageWidth) {
//attachMovie method code for right image.
} else {
//attachMovie method code for left image.
}

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP