Flex - Changing Cursor Icon

Mouse icon can be changed in flex. This example changes the cursor icon to a configured image when mouse is moved over it and then resets it to system cursor on mouse moves out. I have posted the action script code here.

==================================================================

    [Embed(source="assets/images/tree_move.png")]
    private var treeCursorIcon: Class;  //define an icon

    public function changeToTreeCursor (e: flash.events.MouseEvent) : void { 
            CursorManager.setCursor(treeCursorIcon); // change the cursor here
    }

    private function changeToDefaultCursor() : void {
        CursorManager.removeAllCursors(); // reset the cursor here
    }

==================================================================

First an your icon has to be defined, providing the relative path to the image. The function, changeToTreeCursor(MouseEvent) sets that icon as the mouse cursor and changeToDefaultCursor() sets it back to system cursor.

You can have your own custom component as follows, and define rollOut and rollOver attributes of it to fire changeToTreeCursor(MouseEvent) and changeToDefaultCursor() methods respectively for the corresponding events to fire.

==================================================================

<xxx:My_Component id="my_comp" x="0" y="39" title="@Resource(key='comp_label', bundle='draw')" rollOut="changeToDefaultCursor()" rollOver="changeToTreeCursor(event)">
    </xxx:My_Component>

==================================================================

thanks,
Shyarmal.