Customizing Flash Context Menu

The default commands in the flash context menu (the right-click menu or control-click menu if you are using a Mac), provide the user with controls over playback and zooming that could alter the flow of a Flash movie in a manner not desired by the original author. This tutorial will teach you how to customize the context menu by removing default items and adding your own items instead. This will require using the ContextMenu and the ContextMenuItem ActionScript classes. Right-click on different places in the movie below to see an example of what we are trying to accomplish in this tutorial.

It is not only possible to customize the default context menu of the Flash menu, but it is also possible to add a custom menu for different elements in your Flash movie. In the example above, right-clicking the letter icon at the corner shows a different menu from that displayed when right-clicking anywhere else on the stage. Such a feature could add another way to navigate through a Flash project and it could be used to add an extra space to use for branding.

Hiding Default Menu Items

We will start off by creating an instance of the ContextMenu class and then hiding the default items in it on the main timeline. Our context menu instance will be called myMenu_cm.

The code is pretty basic, we created a new variable to store our instance of the context menu, we then used the .hideBuiltInItems method to remove all the defaults items from the menu and assigned this instance to the _root (main) timeline of the Flash movie. It is essential to note that the items About and Settings cannot be removed from the menu, some additional commands for debugging cannot be removed either while testing in the Flash authoring tool. You can test the code above in an empty movie to get a context menu similar to the one below.

We used above the quick method for removing the default items from the context menu, it is possible to manually remove the items one by one in case you wish to retain some of these items for some reason or another. Here is how to do it.

Adding Custom Menu Items

It is possible to add an unlimited number of items to do whatever action you desire. In order to do this you will have to first create an instance of the ContextMenuItem and then apply a caption and a function to this element before adding this to the list of custom items. Here is an example:

We started off by creating the variable newItem1_cmi to hold our instance of the contextMenuItem class. We named our new item Contact Us and assigned the function contactPage to the item. This means that whenever our new item is selected the function contactPage is called. We declared our functions afterwards, in this example we made our function do a simple trace command to show up the text given above. This is merely an example and you can in practice make your function do anything you want.

Our menu item was ready by then and all we had to do is add it to our menu, each menu has an array property for custom items. We used the array method .push to add our custom item to the menu, we then applied the new menu to the root level to do the trick. You can test the movie to see the new item placed in the context menu.

Playing Around with Custom Items

You can do some more interesting stuff with custom items by editing their properties, there are five properties that could be edited. We already used the first two when we instantiated our variable, caption and onSelect. Caption is the text of the item, and onSelect allocates the function to be called when the item is selected. It is also possible to enable or disable a button by using the enable property, you can also hide an item completely by using the visible property, and finally you can also separate an item from the previous ones using the separatorBefore property. In the following example we will create an additional item that is separated from the first item and is unclickable (disabled).

The instance name of our second custom item menu was newItem_2, it's caption was Oman3D.com - All Rights Reserved, we still had to assign a function to it for it to work, even though we do not want the command to be clickable, so we created a noFun function and then declared it as a empty function. The later lines of code disable the button and create a line separator before it. You can test the movie and right-click to show a menu similar to the one below:

Using Different Context Menus for Different Objects on the Stage

It is possible to apply a different context menu for different objects on the stage, such as texts, buttons, and movie clips, so that when the user right-clicks on each of these a different context menu appears. This could be easily done by assigning a different context menu to the object. Here is the basic code for it:

You would have to obviously customize each of these context menus in the same manner as we did in our earlier examples.

This concludes our tutorial, please feel free to post any comments, suggestions, or questions at the Oman3D Forum

- End of Tutorial

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2009 Republic of Code - All Rights Reserved