Question

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

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”.