Advertisement
  1. Code
  2. ActionScript
Code

Extend your Flash Application Using the Context Menu

by
Difficulty:BeginnerLanguages:

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:

Right-click on the different areas of the SWF to see how the context menu changes.


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.


Step 7: Import Required Classes

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


Step 8: Extend Sprite

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


Step 9: Define Variables

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


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.

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.

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:

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.

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.

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.


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.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.