Approaches to replace cursor in pure AS3 / Flare project?

Question

Hi there good lookin,

I've got a pure AS3 (no Flex) project that uses Flare to display and interact with a data visualization. I just implemented some panning behavior, so you can click and drag the visualization around, and now I'd like to give the user a visual indicator that this is possible, by switching the arrow cursor with a nice grabby-looking hand icon.

The user can click and drag at any time except when the mouse is over a clickable node (at which time the cursor swaps to a pointer - this behavior is already in place).

So...
1) Do I need to create my own custom bitmap/sprite or is there a palette of built-in cursors I can use? (I'm not using Flex.)

2) Is there a way to simply replace the default arrow with the pan cursor project-wide, or do I need to attach the swapping to mouse events on display objects? Can I use the stage object to make this behavior apply everywhere?

3) How do I perform the swap? Do I use the Cursor object directly or do I need to get involved with the CursorManager?

Any guidance, pseudo-code, or words of wisdom is greatly appreciated!

Answer 1

Hello. I don't think there's a CursorManger in flash, only flex. The way i'm doing is with a custom class which hides the cursor and drags the customized cursor at mouse_move. You have to set it to mouseChildren=false, otherwise will flickr or the buttons will not be clickable. One problem i found is with custom contextual menus. Try this link http://abrahamyan.com/2009/03/23/as3-cursormanager/

Answer 2

A few things I learned (all pretty newby, really). Firstly, there are some built-in cursor options you can set by setting Mouse.cursor to any of the options of MouseCursor.TYPE. The Mouse object is a singleton available app-wide, so anywhere you change it in your code, the change persists until another change is triggered. For my simple case, I did this:

    //on init, start with the "hand"
    Mouse.cursor = MouseCursor.HAND;

    //on clickable items, change to "pointer", then back to "hand"
    myClickableNode.addEventListener(MouseEvent.ROLL_OVER, function(evt:Event):void {
      Mouse.cursor = MouseCursor.BUTTON;
    });
    myClickableNode.addEventListener(MouseEvent.ROLL_OUT, function(evt:Event):void {
    Mouse.cursor = MouseCursor.HAND;
    });

The result is you always have the "hand" until you rollover something clickable, then you get the "pointer".