Customizing Flash Context Menu Using AS3

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner

The default commands in the Flash context menu (the right-click menu on Windows or the control-click menu on a Mac) let the user change zoom and playback settings in a way that could alter the flow of a Flash movie in a manner not desired by the original developer. This tutorial will teach you how to customize the context menu by removing the default items and adding your own items instead. Accomplishing this task will require using the ContextMenu Class and the ContextMenuItem Class. You are not required to have any advanced ActionScript knowledge except the basics of variables and event handling.

Check the movie below to see an example of what we are going to accomplish by the end of this tutorial.

This tutorial is divided into the following sections:

  1. Hiding Default Menu Items.
  2. Adding Custom Menu Items.
  3. Adding Functionality to Custom Menu Items.

Hiding Default Menu Items

Hiding default menu items will explain the basic format in which the ContextMenu Class is used. In order to use this class we need to create an instance of it, customize that instance, and then simply set it as the context menu of our movie. We are going to do this step by step.

Start off by creating a new Flash movie in AS3 format. Right-click the only frame you have on your timeline and type the code below, it should create an instance of the ContextMenu Class named my_menu:

var my_menu:ContextMenu = new ContextMenu();
You can learn more about AS3 Variables and Classes by reading our tutorial on this topic.

In order to hide the default menu items all you have to do is use the hideBuiltInItems() method on this instance:

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();

In order to use this menu our our document context menu we simply have to set it as the value for that property:

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();
contextMenu = my_menu;

If you test your movie now you should see that your default zoom and playback settings are gone from your context menu. You should note that certain items such as Settings and About cannot be removed from the context menu. Some additional commands for debugging cannot also be removed either while testing in the Flash authoring tool.

AS3 - Context Menu Built In Items Gone

The method above was the quick way for doing this. You can hide specific built in items and show some other ones by manually selecting them in the format shown below:

var my_menu:ContextMenu = new ContextMenu();
my_menu.builtInItems.forwardAndBack = false;
my_menu.builtInItems.loop = false;
my_menu.builtInItems.play = false;
my_menu.builtInItems.print = false;
my_menu.builtInItems.quality = false;
my_menu.builtInItems.rewind = false;
my_menu.builtInItems.save = false;
my_menu.builtInItems.zoom = false;
contextMenu = my_menu;

The code above will generate the same exact result as the previous code.

AS3 - Context Menu Built In Items Gone

Hiding your default items

Adding Custom Menu Items

In addition to the ability to remove the default items from the context menu, it is possible to add custom ones to it as well. Creating custom items is also an easy process, you simply have to create an instance of the ContextMenuItem Class and then add it to the list of custom items in our context menu. Working with our existing code, we can create a new item and add it to the context menu this way:

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();

var my_notice = new ContextMenuItem("Republic of Code");
my_menu.customItems.push(my_notice);

contextMenu = my_menu;

Testing this code would generate a movie that shows this menu when right-clicked.

AS3 - Custom Item Added to Context Menu

It is possible to create several items and then push them in the customItems array in a single go this way:

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();

var my_notice = new ContextMenuItem("Republic of Code");
var my_email = new ContextMenuItem("blue_chi@roc.com");
var my_copyright = new ContextMenuItem("Copyright - 2009");
my_menu.customItems.push(my_notice, my_email, my_copyright);

contextMenu = my_menu;

The items will them appear in the order you push them into that array.

AS3 Context Menu - Push Custom Items

It is possible to customize these items a bit using the following properties:

  1. caption - change the text of the item.
  2. enabled - make the item clickable.
  3. separatorBefore - adds a separator before the item.
  4. visible - shows or hides the item.

These properties are to be used directly on an item and they are pretty easy to use. If for example, you want the "Copyright" notice to be disabled and to have an separator before it you can do that this way:

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();

var my_notice = new ContextMenuItem("Republic of Code");
var my_email = new ContextMenuItem("blue_chi@roc.com");
var my_copyright = new ContextMenuItem("Copyright - 2009");

my_copyright.enabled = false;
my_copyright.separatorBefore = true;

my_menu.customItems.push(my_notice, my_email, my_copyright);

contextMenu = my_menu;

Testing this code would alter your "Copyright" item as shown below.

AS3 Context Menu - Custom Item Customized

Using the other properties is exactly the same, that is almost everything you need to know about customizing your custom items. The next section will teach you how to add functionality to these items.

Adding Functionality to Custom Menu Items

Making context menu item execute an action when they are clicked requires using an event listener. To do this we simply need to register the custom menu item for the MENU_ITEM_SELECT event using the addEventListener() method. This is the same process used when registering any object for any event listener in AS3.

For example, if we want the my_notice item to actually open a link to the Republic of Code homepage we would do that by creating a listener function to carry out this task and then register it with our menu item this way:

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();

var my_notice = new ContextMenuItem("Republic of Code");
var my_email = new ContextMenuItem("blue_chi@roc.com");
var my_copyright = new ContextMenuItem("Copyright - 2009");

my_copyright.enabled = false;
my_copyright.separatorBefore = true;

function openLink(e:ContextMenuEvent):void{
navigateToURL(new URLRequest("http://www.republicofcode.com"));
}
my_notice.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);

my_menu.customItems.push(my_notice, my_email, my_copyright);

contextMenu = my_menu;
You can learn more about Event Handling in AS3 by reviewing our tutorial on this topic.

Testing your movie and then clicking on the first custom item on your menu should open up the link you specified in your browser.

You will have to register each menu item with a different event listener for that item to execute a different action. It is possible for you to execute any code you want by simply specifying that code within your event listener.

This concludes our tutorial. Using the Context Menu Class is not a very complicated process. Feel free to post any comments or questions you have at the Republic of Code Forum.

- End of Tutorial