Custom Mouse Cursor Used Together With Draggable Objects

Introduction

When I was working on one project I found neccessary to use draggable objects along with custom mouse cursor. The question was: how to provide smooth update of custom mouse cursor and reserve the startDrag function for other objects such as scrollbars or drag'n'drop items. The solution is very simple and provide quite smooth cursor movement independent on swf's framerate. Setting up the scene

Let's have three layers named from bottom background, cursor and actions The background layer is reserved for any background drawings (lines, frames, text infos, etc.), the cursor layer is the one that keeps the new mouse cursor movie clip and the actions layer is so called script layer - there will be no graphics nor animations. Just empty keyframes with actions. It's a good convention that makes your work clear :)

Step 1 - Creating new mouse cursor

The new mouse cursor is simple movieclip with new mouse cursor in it. Create one and take a care of the hotspot that must be in the [0,0] coordinates of the movieclip. Place the newly created mouse cursor on frame 1 of the cursor layer and move it anywhere on the stage.

Name it's instance as cursor.

Step 3 - Frame Actions (functions)

We will use a functions for cursor updating, because function can be called independently on framerate. I always define the global functions in the 1st frame of action layer. The calling of such functions is easy and the coding is clear and well sctructured.
Bring-up the frame actions editor by double-cliking on 1st frame in actions layer and enter this code:

stop();
/* update the cursor coords */
function updateCursor() {
	_root.cursor._x = _xmouse;
	_root.cursor._y = _ymouse;
	updateAfterEvent();
}

The _root.cursor._x = _xmouse; and _root.cursor._y = _ymouse; just updates the cursor's X and Y coordinates according to mouse position. But the main trick is in the updateAfterEvent(); function. This one is neccessary for smooth cursor movement. With this function the cursor movement will be smooth and independent on the swf's framerate ! :)

Step 4 - Object Actions (on event handlers)

Now we have to add some object actions to the cursor movie clip. Right click on the cursor movie clip on the stage and bring up it's action script editor (right-click cursor MC > Actions) and enter this code:

onClipEvent(load) {
	Mouse.hide();
	this.swapDepths(100);
}

onClipEvent(mouseMove) {
	_root.updateCursor();
}

Here we have two event hadlers. The first assures that the original mouse cursor will be invisible (we don't need it anymore - we have our own) and that the cursor's movie clip will be high enough (we don't need a mouse cursor, that disappear under some dynamicaly created object with higher _level# ;). I think the level 100 is good choice for my tutorial.

The second one 'onClipEvent(mouseMove)' calls the updateCursor() function on every mouse position change. That's it ;) The event handler will call for update of the cursor position when the mouse position is changed and the updateAfterEvent() in our updateCursor() function updates it directly after this event, which results in nice smooth feedback even if the framerate is very low :)

Testing

You can add some draggable object and test the movie with Ctrl-Enter. Viola ;) We didn't use the startDrag(); function and the cursor is working pretty nice ;) So we can use the startDrag function anywhere in the movie along with our cool new cursor. And that's just an ugly example. You can extend your cursor with another shapes or hints and change it's appearance according to user actions as we know it from operating systems. Just look at my example FLAs.

Enjoy.