Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash MX 2004 - Right Click Context Menu

116 Intermediate
Flash Compatibility: MX 2004 - Not available in earlier versions of Flash

Written by: Phil

Length: 900 words

Assumed Knowledge: Working with ActionScript

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.

Example: Download the Flash file Int 116a

Right click to make the web spin (only works if you have Flash Player 7 installed).

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.

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.

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

The actions in Frame 1 are as follows:

    var myContextMenu = new ContextMenu();
    myContextMenu.hideBuiltInItems();
    var spin = new ContextMenuItem("Spin Spin Spin!!!", mySpin);
    myContextMenu.customItems.push(spin);
    function mySpin() {
        webwasp.gotoAndPlay(2);
    }
    webwasp.menu = myContextMenu;

ActionScript Explained:

var myContextMenu = new ContextMenu();

This creates a new object from the ContextMenu class.

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.

Example: Download the Flash file Int 116b

Here there is a problem with the context menu in-between the letters.

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.

Example: Download the Flash file Int 116c

This has two items listed in the context menu.

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;

Example: Download the Flash file Int 116d

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