Welcome To VertexTemplates.com Flash MX 2004 Tutorials Area - Custom Cursors

4. The last thing we need to do to setup the cursor is to change the color of the cursor on the red and blue layers. Highlight the cross on frame 5 and change the line color to red. Now highlight the cross on frame 10 and change the color to blue. Finally go back to the main timeline and give the cross an instance name of cursor_mc.

5. The next thing we are goiing to is setup the hotspot to add some interactivity to the cursor. To do this we are going to make a simple white box. The dimensions for the box in the movie above are 100 x 75. Select the box and hit F8 to make it a movie clip. On the main timeline give the box an instance name of hotspot_mc.

6. Now we are going add the actionscript and put this whole thing together. Add the following actionscript 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;
}
	

We are doing a couple of things here. First we tell flash to put the cursor on layer 1000 to make sure that it is above all of our other objects in the movie. Then in our onEnterFrame event we are telling flash to hide the actual mouse cursor in the flash player. The reason we do this on every frame is because occasionally when you click on the hotspot the cursor will reappear until you roll out of the hotspot or release out of the hotspot. However we don't want the cursor to appear at all. Lastly we tell flash to update the cursor's position every frame to the current mouse position. And that is all you need to do to have a custom cursor. Now we will add some more interactivity to our new cursor.

7. We are going to add a few events to our hotspot to control our cursor. Add the following code right under what we added in the previous step.

_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");
}
	

Hopefully all of this is fairly easy to understand, but let's get into it. We first setup our rollover action. We simply tell flash that everytime the mouse rolls over our hotspot we want the cursor movie clip to change to red. Next we tell flash that everytime the mouse is pressed on our hotspot we want the cursor to turn blue. And finally we handle the release action and the rollout action.

8. So there you go, you have created your very own custom cursor. You can add this technique seamlessly to any flash movie to add some nice interaction.

Download Flash File