Extend your Flash Application Using the Context Menu

A Context Menu is a menu in a graphical user interface that appears upon user interaction, such as a right-mouse click. The Flash Player context menu allows you to add custom menu items, control the display of the built-in context menu items (for example, Zoom In and Print) and create copies of menus.

In this tutorial, we'll learn how to take advantage of these items.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Brief Overview

We'll make use of the ContextMenu class to create an application showing the different methods and properties of this class.

Step 2: Create New Document

Open Flash and create a new Flash File (ActionScript 3.0).

Set the stage size to 600x300 and add a black radial background (#555555 to #252525).

Step 3: Add Target MovieClips

We will create four MovieClips that will each show a different context menu when right-clicked.

Select the Rectangle Tool (R) and create four squares of 100x100 px each, with some writing inside. Convert them to separate MovieClip symbols and align them to the corners of the stage; use the image below as a guide. The instance names are in italics.

Step 4: Add Simple Instructions

Add some text to the stage to indicate to the user what action to perform.

Step 5: Create the Document Class

Create a new ActionScript Document and save it as Main.as. This will form our document class. If you are not sure how to use a document class, please read this Quick Tip.

Step 6: Start Writing the Document Class

The package keyword allows you to organize your code into groups that can be imported by other scripts, it's recommended to name them starting with a lowercase letter and use intercaps for subsequent words - for example: myClasses.

If you don't want to group your files in a package or you have only one class you can use it right from your source folder.

1

2

package

3

{

Step 7: Import Required Classes

We'll make use of the following classes, so import them in the document class:

1

2

import flash.display.Sprite;

3

import flash.ui.ContextMenu;

4

import flash.ui.ContextMenuItem;

5

import flash.events.ContextMenuEvent;

6

import flash.net.navigateToURL;

7

import flash.net.URLRequest;

Step 8: Extend Sprite

We're going to use Sprite-specific methods and properties so we extend that class.

1

2

public class Main extends Sprite

3

{

Step 9: Define Variables

These are the variables we'll use. They are basically ContextMenu and ContextMenuItem instances.

1

2

/* When a ContextMenu item is created you can specify: the name of the item, whether to use a separator line,

3

   whether the item should be enabled by default, and whether it is visible to the user */

4

5

var builtInItems:ContextMenu = new ContextMenu();

6

var customItemEnabled:ContextMenu = new ContextMenu();

7

var customEnabled:ContextMenuItem = new ContextMenuItem('ActiveTuts+');

8

var customItemDisabled:ContextMenu = new ContextMenu();

9

var customDisabled:ContextMenuItem = new ContextMenuItem('Disabled Item', false, false);

10

var linkedItem:ContextMenu = new ContextMenu();

11

var linkText:ContextMenuItem = new ContextMenuItem('Go to TutsPlus.com', true);

12

var textCM:ContextMenu = new ContextMenu();

Step 10: Write Main() Constructor Function

This function is executed when the class is loaded. It calls the functions that will handle the ContextMenu elements.

1

2

public function Main():void

3

{

4

	handleBuiltIn();

5

	handleCustom();

6

	handleDisabled();

7

	handleLink();

8

	handleClipboard();

9

}

We'll write these functions in the next steps.

Step 11: Write handleBuiltIn() Function

This is the function that handles the built-in items. Here we take builtInItems, a ContextMenu we defined earlier, remove the built-in items, and set it as the context menu for the builtIn square symbol.

1

2

private function handleBuiltIn():void

3

{

4

	builtInItems.hideBuiltInItems(); //Hides all built-in menu items (except Settings)

5

	builtIn.contextMenu = builtInItems;

6

}

You can see a list of the built-in menu items here.

Alternatively, you can enable/disable specific menu items using the builtInItems property as shown in the following code:

1

2

var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;

3

defaultItems.print = true; //You can replace "print" with a valid default context menu item

Again, visit livedocs.adobe.com for a list of such items.

Step 12: Add a Custom Item

To add a custom item to the context menu, we'll make use of two of the variables we created.

1

private function handleCustom():void

2

{

3

	customItemEnabled.customItems.push(customEnabled); // Adds the customItemEnabled ContextMenuItem value to the ContextMenu instance

4

	custom.contextMenu = customItemEnabled; // Sets the ContextMenu instance to the MovieClip

5

}

As you can see, we can push() a ContextMenuItem onto a context menu's customItems property, because it is an array.

Step 13: Add a Disabled Item

The same action is performed by this function, but using the customItemDisabled parameter in the ContextMenuItem.

1

2

private function handleDisabled():void

3

{

4

	customItemDisabled.customItems.push(customDisabled);

5

	disabled.contextMenu = customItemDisabled;

6

}

This makes the item look grayed-out and unclickable.

Step 14: Add an Action

We know how to add a custom item to the context menu list, so far it can be used as a message or a notice but it will be more useful if an action can be performed when clicked. Let's see how to do it.

1

2

//A webpage will be opened when the menu is clicked

3

4

private function handleLink():void

5

{

6

	linkedItem.customItems.push(linkText);	//remember we set the text of this link earlier

7

	linkText.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuSelect);

8

	link.contextMenu = linkedItem;

9

}

10

11

private function onMenuSelect(e:ContextMenuEvent):void

12

{

13

	navigateToURL(new URLRequest('http://tutsplus.com'))

14

}

Step 15: Alter the Clipboard Context Menu

The ContextMenuClipboardItems class determines which items are enabled or disabled on the clipboard context menu. These settings are used when ContextMenu.clipboardMenu = true and when the object with focus is not a TextField.

1

2

private function handleClipboard():void

3

{

4

	textCM.clipboardMenu = true;

5

	textCM.clipboardItems.selectAll = false;

6

	contextMenu = textCM;

7

}

Note that these settings only apply in Flash Player 10, so cannot be used in Flash CS3 (they will cause a compiler error if you try to use them).

Step 16: Document Class

Go back to the .fla file and in the Properties Panel set the Class field to 'Main' to make this the Document Class.

Conclusion

Customizing the Context Menu in your movies or applications can extend its functionality in a very usable way, try it!

Thanks for reading!