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.
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.
Step 4
Select the custom cursor and give it an instance name. eg. cursor_mc.
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.
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:
I love this guide, Thank you for posting it up. It helped me alot.
how can i save it for use in the control panel?
@ Jenny Renigen
Can you explain what you mean?
I'm getting Compiler Error messages when I export the movie.
@Patrick
What does the compile error say?
verry good
what if I wanted the image to change direction based on mouse direction?
@Ryan
Which image are you referring to? There is no image in this tutorial.
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.
@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.
}
Post a Comment