Flex Custom Cursor Tutorial

On our site here we are kinda obsessed with showing how to use your own cursors in everything - and so now its time for a tutorial on how to do the basic cursor manipulation in flex. In this tutorial you will learn how to replace the cursor with your own custom image. There are some more complex techniques that can be used for cursor management in Flex but I am going to hold these off for a later tutorial, as most people probably won't need them.

Below you can check out the demonstration of the application we are going to build today. The application is very simple - it simply has two buttons. The first button changes the cursor to my super sweet custom cursor and the second button changes the cursor back to normal. Ok, now take a few seconds and be amazed by my cursor creation genus. The source code for the tutorial.

To start off we are going to build the simple interface that is in the application. This will not include the little button for the source. Ok so there is a panel and two buttons, very simple. Check out the code below.

Next up is the the code to show the the cursor and remove them. The first thing is setting up the click event listener for both buttons. I have named these functions showCursor and removeCursor. The updated code is below.

Now we get to the actionscript code. We add a script tag and the functions for the cursors:

To get the cursor to show up we need to do two things. The first is to create a private variable that holds the cursor which is of type Class. It is here that we embed the image we want to use. This can be any of several image types including jpg, png, swf, and more. In the showCursor function we use the CursorManager to set the cursor, as seen above. The parameters we pass are first the cursor, next is the priority (this can always be high for simple cases), the last two are the offset for the hot spot of the pointer in x and y. So basically where the actual pixel is that should be used for the pointer. And that is it for showing a cursor.

Removing the cursor is just as easy. You simply need to call CursorManager.removeAllCursors() to remove any custom cursors. There are some more complex ways to remove individual cursors but you will have to wait for a later tutorial for this.

Well I know it was short but I hope that you learned something useful from it. And look for a more complex tutorial explaining some of the other intricacies of the CursorManager class. As always drop a comment if you have any issues with the code or have any questions at all.