Changing the right click menu content in Flash with ContextMenu object

You have probably noticed many times that some Flash websites have customised right click menus. Usually Flash developers remove standard options like Zoom In and Out, Show All and Quality settings. But you can also add your own options and make them interact with your project.

Picture below represents how the standard context menu usually looks like.

In my project I want to remove all standard built - in options and add three new. The first one will be information about the author and will open a homepage website. Two other options will allow user to rotate the cards left and right.

Right click on below Flash object and select "Rotate left" or "Rotate right" to see how this work.

To start off, I create a new ContexMenu object. Then, using hideBuiltInItems() method I remove the standard options. At this stage, the context menu would look like on the picture below:

Next I create the new menu items by creating the ContextMenuItem objects. As a parameter I pass a string value representing labels like "Rotate left"... etc. ContextMenu object has an array named "customItems" to associate all the new menu options, so I use a push() method to add them.

As I want to action my menu items, I add event listeners exactly the same way as for mouse events, only the Event type is different: ContextMenuEvent.MENU_ITEM_SELECT. Then, I create the standard event handler functions to rotate banners left, right and to open my homepage.

The last and very important thing is to associate my ContexMenu object to the contextMenu property of the main movie clip.

Note that importing below classes is required (when you work from document class rather than coding from frames):

import flash.events.ContextMenuEvent;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;

Sample code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//create my context menu object
var myContextMenu:ContextMenu = new ContextMenu();
//hide standard built in items like zoom in etc...
myContextMenu.hideBuiltInItems();
 
//create new custom items
var about:ContextMenuItem = new ContextMenuItem("© 
sierakowski.eu 2010");
var left:ContextMenuItem = new ContextMenuItem("Rotate left");
//add a line separating "about" item from the rest 
items
left.separatorBefore = true;
var right:ContextMenuItem = new ContextMenuItem("Rotate right");
 
//add new items to my context menu object
myContextMenu.customItems.push(about);
myContextMenu.customItems.push(left);
myContextMenu.customItems.push(right);
 
//add event listeners to check if user clicked on any 
of the new menu items
about.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, 
aboutSelected);
left.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, 
leftSelected);
right.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, 
rightSelected);
 
//associate my context menu to main clip
this.contextMenu = myContextMenu;
 
//below add handlers for MENU_ITEM_SELECT events
function leftSelected(e:ContextMenuEvent):void
{
  rotateLeft();
}
 
//and so on...
 

There are few things to note. Some of the menu item captions are reserved for security reasons and can't be used (Adobe, Macromedia, Flash Player, Settings). Others can be used only with conjunction with others (Print, Zoom in etc...).

There is also no way to remove "About Flash" and "Settings" menu items.