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.

Customizing Flash Right- Click Menu

   The menu which appears on right click of a flash object can be customized to include items of your choice. The following code segment adds options, "Expand", "Hide Outcomes", "Hide Inputs", "Hide Outputs", "Hide Privileges" and "Keys Only" to the menu. Further it removes/ hides some existing items of the menu. Code segment to do this is posted below.

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

            var contextMenu: ContextMenu = new ContextMenu();
            contextMenu.hideBuiltInItems();
            contextMenu.clipboardMenu = false;   
            var showAll : ContextMenuItem = new ContextMenuItem("Expand");
            var hideOutcomes : ContextMenuItem = new ContextMenuItem("Hide Outcomes");
            var hideInputs : ContextMenuItem = new ContextMenuItem("Hide Inputs");
            var hideOutputs : ContextMenuItem = new ContextMenuItem("Hide Outputs");
            var hidePrivileges : ContextMenuItem = new ContextMenuItem("Hide Privileges");
            var hideAll : ContextMenuItem = new ContextMenuItem("Keys Only");

            showAll.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleShowAll);
            hideOutcomes.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHideOutcomes);
            hideInputs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHideInput);
            hideOutputs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHideOutput);
            hidePrivileges.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleHidePrivileges);
            hideAll.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,      handleHideAll);
            contextMenu.customItems.push(showAll);
            contextMenu.customItems.push(hideOutcomes);
            contextMenu.customItems.push(hideInputs);
            contextMenu.customItems.push(hideOutputs);
            contextMenu.customItems.push(hidePrivileges);
            contextMenu.customItems.push(hideAll);

            component.contextMenu = contextMenu;  
            // component is of type mx.core.UIComponent

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

   First a 'flash.ui.ContextMenu' instance is created. Subsequently, its inbuilt and clip board items are removed [contextMenu.hideBuiltInItems(); contextMenu.clipboardMenu = false;]. Then new menu items are created and added to the menu. Each menu items is registered with an event listener to be fired when the same is selected.

  For an example, it "Hide Outputs" item is selected the following method will be triggered.

private function handleHideOutcomes (event: ContextMenuEvent) : void {
        // operational code
}

Finally, the menu created this way is assigned as the context menu of the respective UI component (mx.core.UIComponent). Following is the figure of the right click menu.

thanks,
Shyarmal.