Search code examples
actionscript-3user-interfaceflare

Approaches to replace cursor in pure AS3 / Flare project?


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!


Solution

  • 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".