Right Click Context Menu

The aim of the tutorial is to learn how to learn how to customise the context menu. This is the menu that is accessible by right clicking on a Windows PC or by Ctrl click on a Mac. This is a new feature available in Flash MX 2004.

In the movie above the entire black section is one movie clip on the main stage. No matter where I right click on the Movie clip my context menu is visible.

The Symbol of webwasp. (Click to enlarge)

The symbol above is a movie clip.

• In the background layer is a black rectangle, which makes the movie clip solid. This is important (see example 116b below).
• The middle layer contains the word wasp.
• The top layer has a Tween of the word: web
• In frame 1 there is a: stop();

Cross Ref: For a practical beginners tutorial on how to create a animated Tween: Tweening

The movie clip has been placed on the main stage. (Click to enlarge)

• In the Property Inspector the movie clip has an Instance name: webwasp

The actions in Frame 1 are as follows:

ActionScript Explained:

myContextMenu.hideBuiltInItems();
This hides the standard items that are in the Flash context menu

var spin = new ContextMenuItem("Spin Spin Spin!!!", mySpin);
Creates the text label that will be visible in the new Context menu and links this item to the function: mySpin

myContextMenu.customItems.push(spin);
Places the new item created in the variable spin into the context menu

function mySpin() {
    webwasp.gotoAndPlay(2); }
When you click on the Context menu item, anything listed in this function will be executed.

webwasp.menu = myContextMenu;
Associates all of the above with the movie clip called webwasp.

Important Notes:

• This will only work if the Flash movie is on a web page.
• You will need to have Flash Player 7 installed.

In the Publish settings you will need to select:

1. Go to: File > Publish Settings > Flash Tab
2. Select: Version> Flash Player 7
3. Select: ActionScript version > ActionScript 2
4. Click: OK
   
   
   

   Publish Settings. (Click to enlarge)

Click off the webwasp and you get a normal context menu. If you right click on the word webwasp you get the custom menu.

Note: Beware if you click in-between the letters you will get the standard context menu! This is because the movie clip does not have a background. Unlike a button there is no invisible hit area. You need to make a background. Of course a background could be the same colour as the movie background.

In the movie above there are two movie clips on stage named web and wasp. You can control either one or the other move depending on which item you select from the context menu. The actionscript in frame 1 is as follows:

var myContextMenu = new ContextMenu(); myContextMenu.hideBuiltInItems(); //my first menu item var webspin = new ContextMenuItem("Web Spin Spin!!!", myWebSpin); myContextMenu.customItems.push(webspin); function myWebSpin() {     web.gotoAndPlay(2); } web.menu = myContextMenu; //my second menu item var waspTwist = new ContextMenuItem("Wasp Twist!!!", myWaspTwist); myContextMenu.customItems.push(waspTwist); function myWaspTwist() {     wasp.gotoAndPlay(2); } wasp.menu = myContextMenu;

This last example has a different context menu depending on which word you click on. There are two movie clips on stage and each has its own context menu independent of the other. The ActionScript in frame 1 on the main stage is as follows:

//Controls 'web' menu var myWebContextMenu = new ContextMenu(); myWebContextMenu.hideBuiltInItems(); var webspin = new ContextMenuItem("Web Spin Spin!!!", myWebSpin); myWebContextMenu.customItems.push(webspin); function myWebSpin() {     web.gotoAndPlay(2); } web.menu = myWebContextMenu; //Controls 'wasp' menu var myWaspContextMenu = new ContextMenu(); myWaspContextMenu.hideBuiltInItems(); var waspTwist = new ContextMenuItem("Wasp Twist!!!", myWaspTwist); myWaspContextMenu.customItems.push(waspTwist); function myWaspTwist() {     wasp.gotoAndPlay(2); } wasp.menu = myWaspContextMenu;

Note: all the variables in the first section must be different to those in the second part.

Cross Ref: For right click to work you need to make sure that your punters actually have Flash Player 7, otherwise all your hard work will be in vain. For that check the next tutorial: Detecting the Flash Player