Custom Cursors

Custom Cursors

Start a new Flash document and create 3 layers in it. Give them some definite name, e.g. actions, hotspot, and cursor and change the Frame rate to 24 fps.

First create cursor: draw a small cross of two 18px lines. Select the cross and press  F8 to make it a movie clip. Open the movie clip for editing. Highlight the cursor and choose -9 for both X and Y positions. The cross will move to center. Now create 3 layers: labels, actions, and cursor. The cross must be on the layer named cursor. Create keyframes on each layer at frame 5 and frame 10: highlight the frame and press F6.

Now you need to setup the frame labels to make the navigation through the movie clip much easier. To add a label select frame on the labels layer and match a spot for frame label on the left side in the property box. Name frame 1 lable white, frame 5 label red and frame 10 label blue. Do not forget to put a stop(); action on frames 1, 5, and 10 on the actions layer.

Now change the color of cursor on red and blue layers. Highlight the cross on frame 5 and change its color to red. Then highlight the cross on frame 10 and change its color to blue. After that return to main timeline and give the cross an instance name of cursor_mc.

Now let's create hotspot to make the cursor more interactive. Create a simple white box. Let's say it would be 100 X 75. Select this box and press F8. On main timeline give the box an instance name of hotspot_mc.

Now add actionscript and combine the whole staff. The following actionscript should be added to actions layer in the main timeline.

_root.cursor_mc.swapDepths(1000);
_root.onEnterFrame = function() {
        Mouse.hide();
        cursor_mc._x = _root._xmouse;
        cursor_mc._y = _root._ymouse;
}       

Here is the explanation. The cursor is placed on layer 1000 to be above all of other objects in the movie. The onEnterFrame event hides the actual mouse cursor in the flash player. Then the cursor's position is made to be updated every frame to the current mouse position. This is the whole procedure to make a custom cursor. Let's add some interactivity to it.
Add following code under previous one to control the cursor.

_root.hotspot_mc.onRollOver = function() {
        _root.cursor_mc.gotoAndStop("red");
}
_root.hotspot_mc.onPress = function() {
        _root.cursor_mc.gotoAndStop("blue");
}
_root.hotspot_mc.onRelease = function() {
        _root.cursor_mc.gotoAndStop("red");
}
_root.hotspot_mc.onRollOut = _root.hotspot_mc.onReleaseOutside = function() {
        _root.cursor_mc.gotoAndStop("white");
}      

The explanation is simple. First we setup the rollover action. Everytime the mouse rolls over the hotspot the cursor movie clip will change to red. Then the cursor is set to turn blue every time the mouse is pressed within the hotspot. At last the release action is handled to the rollout action.

That's it! Now you have your own custom cursor. You can use this technique in your flash movies to make them interactive and impressing.
 

Enjoy the result!