Custom cursor part 2

This flash tutorial is a continuation of previous custom cursor tutorial. I will be adding extra functionality to the prior custom cursor. The custom cursor will now change colour when the left mouse button is click. Only a few more lines of code are needed.

You need to have completed the first part of the custom cursor tutorial before attempting this tutorial.

Custom cursor part 2

Step 1

Open part 1 of your custom cursor flash document.

Step 2

Using the selection tool (v) double click on your custom cursor. Your timeline should change as you are now inside your cursors movie clip instance.



Now on the timeline select F6 to insert a new key frame. And with your custom cursor selected change the stroke colour of your custom cursor to whatever colour you wish. I used a blue colour. If your custom cursor is a primitive shape then you can use the paint bucket tool to change the colour.



Your timeline should look like below:



Step 3

Now double click anywhere on the stage to return to the main timeline.
On the timeline select the action layer and right click on the 1st frame and select Actions. Then add the following code:

stop();
Mouse.hide();
cursor_mc.gotoAndStop(1);
cursor_mc.onMouseMove = function() {
this._x = _root._xmouse;
this._y = _root._ymouse;
updateAfterEvent();
};
cursor_mc.onMouseDown = function() {
this.gotoAndStop(2);
};
cursor_mc.onMouseUp = function() {
this.gotoAndStop(1);
};

**Most of this code should look familiar. The only differences are the onMouse down & onMouse up functions. This extra code basically jumps to the frame where the cursor changes colour and returns when the cursor is release.


Step 4

Test your movie clip Ctrl + enter. Left Click anywhere on the stage and your custom cursor should change colour.



You should now have a custom cursor.