QuickTip: Understanding Right Click Menus (ContextMenu)

So we’re going to take a look at the right click menus. Usually I see them completely unchanged, making it possible for a user to screw something up with your product (game/movie/site). Lets not make that happen anymore.

This is just an example for how it usually will look, try right clicking:

See all those options? Try clicking “play”, now you will see my logo flicker. I just added a few empty frames, so you could see what I was talking about. Now I don’t want this to happen with a published product, so lets remove it.

Removing a Right Click Menu

It is really easy, just import this:

import flash.ui.ContextMenu;

add this variable:

private var myContextMenu:ContextMenu;

and then add this to the constructor function:

myContextMenu = new ContextMenu ( ) ;
myContextMenu.hideBuiltInItems ( ) ;
this.contextMenu = myContextMenu;

What do we get? This:

much better ;)

Some times, you might want to include one of the options from the context menu, usually that would be the “Quality” feature, and it’s really easy to do. Add this to the constructor:

myContextMenu.builtInItems.quality = true;

and here is the result:

Add Custom Items

Hurray, we can also add custom things! and it’s really simple as well!

you just need to create a new item:

var customMenuItem:ContextMenuItem = new ContextMenuItem ( "Custom Message" ) ;

but there is more to it, ContextMenuItem has 4 parameters. The other 3 are just optional:

• caption:String (the text that will be displayed in the right click menu)
• separatorBefore:Boolean = false (if there needs to be a line above the menu item)
• enabled:Boolean = true (if the item is click able, if set to false, it will be greyed out)
• visible:Boolean = true (pretty obvious isn’t it?)

all you need to do afterwards is add it to the array containing the custom items, like this:

myContextMenu.customItems = [customMenuitem];

An Example

I just made a little something, with a movieclip as background, with 4 different colours on 4 frames. Check out the code for it here:

		public var BG:MovieClip;
 
		private var myContextMenu:ContextMenu;
 
		private var blackMenuItem:ContextMenuItem
		private var redMenuItem:ContextMenuItem
		private var greenMenuItem:ContextMenuItem
		private var blueMenuItem:ContextMenuItem
 
		public function MainRightClick()
		{
			myContextMenu = new ContextMenu ( ) ;
			myContextMenu.hideBuiltInItems ( ) ;
 
			this.contextMenu = myContextMenu;
 
			var describtion:ContextMenuItem = new ContextMenuItem ( "Click to change background colour:", true, false ) ;
 
			blackMenuItem = new ContextMenuItem ( "- Black" , true ) ;
			blackMenuItem.addEventListener ( ContextMenuEvent.MENU_ITEM_SELECT, menuItemClicked ) ;
 
			redMenuItem = new ContextMenuItem ( "- Red" ) ;
			redMenuItem.addEventListener ( ContextMenuEvent.MENU_ITEM_SELECT, menuItemClicked ) ;
 
			greenMenuItem = new ContextMenuItem ( "- Green" ) ;
			greenMenuItem.addEventListener ( ContextMenuEvent.MENU_ITEM_SELECT, menuItemClicked ) ;
 
			blueMenuItem = new ContextMenuItem ( "- Blue" ) ;
			blueMenuItem.addEventListener ( ContextMenuEvent.MENU_ITEM_SELECT, menuItemClicked ) ;
 
			myContextMenu.customItems = [describtion, blackMenuItem, redMenuItem, greenMenuItem, blueMenuItem] ;
 
			blackMenuItem.enabled = false;
			BG.gotoAndStop ( 1 ) ;
		}
 
		private function menuItemClicked(e:ContextMenuEvent):void
		{
			blackMenuItem.enabled = true;
			redMenuItem.enabled = true;
			greenMenuItem.enabled = true;
			blueMenuItem.enabled = true;
 
			if ( e.target == blackMenuItem )
			{
				BG.gotoAndStop ( 1 ) ;
			}
			else if ( e.target == redMenuItem )
			{
				BG.gotoAndStop ( 2 ) ;
			}
			else if ( e.target == greenMenuItem )
			{
				BG.gotoAndStop ( 3 ) ;
			}
			else if ( e.target == blueMenuItem )
			{
				BG.gotoAndStop ( 4 ) ;
			}
 
			e.target.enabled = false;
		}

Check it out here:

Remember that you can also add a specific ContextMenu to any class that extends InteractiveObject.

Happy coding :)