Custom Cursors and Crosshairs in Flash


Unique crosshairs, reticules, and cursors are a staple of any flash game. Having something unique to represent mouse movement other than the typical Mac and Window’s cursors really helps your flash game or application stand out. Thankfully too, it is extremely easy to implement! I’ll show you guys two simple ways to implement a unique custom flash cursor, and you can decide which you like best!

  • First thing, open up a new flash document using Actionscript3 (AS3). I set the dimensions of mine to 300px by 200px, and the framerate up to 30.  Reason being, both the implementations for our custom flash cursor effect depend on the flash application’s framerate, so the higher a framerate, the smoother an effect you will achieve.
  • Step two, let’s create the art for our custom movieclip!  On the top menu, select Insert ->New Symbol (or press Ctrl+F8), and call it “cursor” with a MovieClip type.
  • Inside the movieclip, draw whatever custom art you like, but be sure that the small cross on the screen (you center of reference) stays wherever you want the tip of your mouse point to reference to. Personally, I drew a little sword that looks like the one below.   Black bordering, brown handle, with orange-ish plating, and a two-tone gray gradient for the blade itself. See if you can draw something too (probably much better than my sword lol). Notice how I set up the art so that the tip points at the cross inside the MovieClip for center of reference, this is crucial.
  • Once the art is complete, it is time to create an instance of our cursor! Back out of the MovieClip by pressing the tiny breadcrumb button “Scene1″ above your drawspace. Now, find our “cursor” movieclip label in the library, and then click and drag onto the stage to create an instance. In the properties manager, set our label to be “sword_cursor” as seen in the image below. We need this reference name inside the actionscript3 code.
  • It’s now time to plug in a little actionscipt3 (AS3) code on the main stage flash frame.  Right click on frame one, and select “Actions” down at the bottom. Enter the following code:
  • sword_cursor.startDrag(true);
    Mouse.hide();
  • You could also write the actionscript3 code like this is you prefer it more:
  • stage.addEventListener(MouseEvent.MOUSE_MOVE,cursor_update);
    Mouse.hide();

    function cursor_update(e:MouseEvent):void {
        sword_cursor.x = mouseX;
        sword_cursor.y = mouseY;
    }
  • One more thing before compiling, we also want a pretty glow effect. Go click on the instance of the “sword_cursor” on the stage, and then down in the FILTERS menu, press the small button on the bottom left that looks like a flipped page. The rollover comment says “Add filter.” Press that and then select  “Glow.”  I left mine in the default mode with the red glow.
  • Once that is done, compile your code via Ctrl+Enter, and Voila! You’ll get the flash application like below:

The demo of this application is here:

Pretty simple, huh? To get your own art into the cursor, just modify the “cursor” MovieClip to get something new.

Maybe something like this..

 

or even this..?

 

Either way, thanks for tuning in.

Thanks again!

-Dave at the FlashCove (http://flashcove.net)

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!