Creating a Custom Cursor in Flash
By Blue_Chi | Flash | BeginnerThere is more than one technique for creating a custom cursor in Flash, we are going to use the most basic one. In our example, the custom cursor is a Movie Clip symbol that is being dragged by the actual mouse cursor which is being hidden. This is a beginner tutorial and you will not need any specialist knowledge with ActionScript to follow it. Here is an example of the result effect that we will create:
Start off by creating a new flash file, the dimensions of the file and the background colour do not matter. However, it is recommended that you change the frame rate to 30 fps or higher in order to get a smoother effect. You can change the frame rate by accessing the Properties Inspector (Window>Properties>Properties or Ctrl+F3).
You will now have to draw your custom cursor on the stage. You can use the "Pencil Tool" or any of the other drawing tools in the tool bar to draw it. It is recommended that you make your cursor point to the upper left side direction.
Select your cursor by using the Selection Tool or simply by pressing Ctrl+A to select everything on the stage. Once selected, you will have to convert your drawing to a symbol. Symbols can be controlled via ActionScript unlike basic shapes and drawings. To convert your drawing to a symbol, simply go to Modify>Convert to Symbol or press F8 while having your object selected. In the "Convert to Symbol" window, select 'Movie clip' as the symbol type and make sure to select the upper left corner as your registration point. The registration point sets the centre of the movie clip and mouse pointers always have their 'selection point' at the tip of the cursor. Once done, click on "OK".
While your newly born Movie Clip is still selected, access the Properties Inspector and give your Movie Clip an instance name. Instance names are used as references to control Movie Clips using ActionScript. Use the name 'cursor_mc' as your instance name.
Our scene is now set, all we have to do now is write our magical ActionScript to make this cursor work. In the Layers panel, create a new layer by clicking on the "Insert Layer" button, you can rename this new layer to "ActionScript". Right click the first frame on that layer and select "Actions" to view the ActionScript panel.
Our ActionScript will have two functions to do. First, make our movie clip follow our actual mouse pointer, and secondly make our actual mouse pointer disappear. All this can be written in two lines:
cursor_mc.startDrag("true");
Mouse.hide();
Copy and paste that into the Action Panel and that should do it. Really. Just press Ctrl+Enter to test your movie and you shall see our custom made cursor work. The startDrag method for Movie Clips makes the actual mouse drag the movie clip along with. The second part of the code is self explanatory. Here is the source file for this effect if you had any problems with it. You should check out our other tutorials to learn more tricks.
- End of tutorial.