• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

The Contextual Menu

In the playback of any Flash movie, a contextual menu appears when you right-click (Windows) or Ctrl-click (Mac) on the movie. There are three different types of contextual menus: a standard menu that appears over any part of the Stage, an edit menu that appears over text fields, and an error menu (Figure 4.96). You can customize, to a certain extent, the items that appear in the standard and edit menus through the ContextMenu class. You can disable certain items or create your own custom items with the related ContextMenuItem class. You can even make different contextual menus appear over different buttons, movie clips, or text fields.

Figure 4.96. The standard contextual menu (left) and the edit contextual menu that appears over dynamic or input text fields (right).


Manipulating the contextual menu first requires that you instantiate a new object from the ContextMenu class, like so:

myMenu_cm = new ContextMenu()

After you have a new contextMenu object, you can call its methods or set its properties to customize the items that appear. All the default menu items are properties of the object builtInItems. Setting each property to true or false will enable or disable that particular item in the menu. For example, the following statement will disable the print item in the contextMenu object called myMenu_cm:

myMenu_cm.builtInItems.print = false

See Table 4.4 for the properties of the builtInItems object of the ContextMenu class.

Table 4.4. BuiltInItems Properties
PROPERTYVALUEMENU ITEMS
forward_backTrue or falseForward, Back
saveTrue or falseSave
zoomTrue or falseZoom in, Zoom out, 100%, Show all
qualityTrue or falseQuality
playTrue or falsePlay
loopTrue or falseLoop
rewindTrue or falseRewind
printTrue or falsePrint


Finally, you must associate your contextMenu object with the menu property of another object, such as the _root Timeline, or a specific movie clip, like so:

_root.menu = myMenu_cm

To disable the contextual menu:

1.
Select the first frame of the main Timeline and open the Actions panel.

2.
Enter a name for your new contextMenu object followed by an equals sign. Choose Built-in Classes > Movie > Context Menu > ContextMenu > new ContextMenu.

A new contextMenu object is named and created (Figure 4.97).

Figure 4.97. A new ContextMenu object called myMenu_cm is instantiated.


3.
On the next line of the Script pane, enter the name of the newly created contextMenu object, followed by a period.

4.
From the code hint pull-down menu, select hideBuiltInItems.

or

Choose Built-in Classes > Movie > Context Menu > ContextMenu > Methods > hideBuiltInItems (Figure 4.98).

Figure 4.98. By using the hideBuiltInItems method, you disable all built-in (default) items of the contextual menu.


This method sets all the properties of the builtInItems object of the ContextMenu class to false, which hides the items of the contextual menu.

5.
On the third line of the Script pane, enter _root.menu, followed by an equals sign and the name of your contextMenu object.

The contextMenu object now becomes associated with the _root Timeline, so the default items of the contextual menu of the main Timeline are hidden. The only items that remain are Settings and Debugger (Figure 4.99).

Figure 4.99. The final code (top) hides the all the default items except for the Settings and Debugger items (bottom).


Often when you create a movie, you may want to give the user different options in the contextual menu for different objects in your movie. For example, a particular movie clip of a map could have the zoom item in its contextual menu enabled, while other objects may have the zoom item in their contextual menu disabled. In this example, you will create two customized contextual menus: one for the main Timeline and another for a specific movie clip.

To associate custom contextual menus with different objects:

1.
Continue with the preceding task. On the next available line in the Script pane, enter a new name for another contextMenu object followed by an equals sign and the constructor function, new contextMenu().

A second contextMenu object is named and created (Figure 4.100).

Figure 4.100. A new ContextMenu object named zoom_cm has been created.


2.
On the next available line, enter the name for the second contextMenu object that you just created, followed by a period.

3.
Using the code hint pull-down menu, select hideBuiltInItems.

or

Choose Built-in Classes > Movie > Context Menu > ContextMenu > Methods > hideBuiltInItems.

The items of your second contextMenu object, like the first, are disabled.

4.
Enter the name for the second contextMenu object that you created, followed by a period.

5.
Select Built-in Classes > Movie > Context Menu > ContextMenu > Objects > builtInItems > Properties > zoom. Enter an equals sign and then the word true.

The completed statement, zoom_cm.builtInItems.zoom = true, tells Flash to enable the zoom item in the contextual menu.

6.
On next line, enter _root. followed by the instance name of the object you wish to associate with your second contextual menu. Then enter a period, the property menu, and an equals sign. After the equals sign, enter the name of the second contextMenu item that you created in the beginning of this task.

The completed statement associates the second contextMenu object with the movie-clip instance only (Figure 4.101).

Figure 4.101. The completed script (top). The contextual menu that is attached to the main Timeline has its default items hidden (middle). The contextual menu that is attached to the movie clip called map_mc contains the Zoom In item (bottom).


Creating new contextual menu items

You can add your own items in the contextual menu by creating new objects from the ContextMenuItem class. Each new item requires that you instantiate a separate contextMenuItem object, as in the following code:

myFirstItem_cmi = new
ContextMenuItem("First Item",
myFirstItemHandler);

The first parameter of the constructor function represents the text of the item in the contextual menu. Use quotation marks around the first parameter to display the enclosed text. The second parameter represents the name of a function that will be invoked when the user selects the item. Create the function to respond to the item selection, like so:

function myFirstItemHandler() {
   //place actions here
}

Finally, you must add your new context-MenuItem object to the customItems property of your contextMenu object. However, the customItems property is unlike the builtInItems property you learned about in the preceding section. The customItems property is really an array, which is an ordered list of values or objects. You can learn more about arrays in Chapter 11. In order to add your new context-MenuItem object to the customItems array, use the array method push(), as in the following code:

my_cm.customItems.push(myFirstItem_cmi);

In this statement, my_cm is the name of the contextMenu object and myFirstItem_cmi is the name of the contextMenuItem object.

To create a new item for the contextual menu:

1.
Select the first frame of the main Timeline and open the Actions panel.

2.
In the Script pane, create a new context-Menu object, as in the following code:

my_cm = new ContextMenu();

3.
On the next line, enter a name for a contextMenuItem object followed by an equals sign; then choose Built-in Classes > Movie > Context Menu > ContextMenuItem > new ContextMenuItem.

A new contextMenuItem is instantiated.

4.
In between the parentheses of the constructor function, enter an item name for the first parameter and a function name for the second parameter. Be sure to enclose the first parameter in quotation marks and to separate your parameters with a comma (Figure 4.102).

Figure 4.102. A new ContextMenuItem object called myFirstItem_cmi is created with two parameters; the name of the item ("First Item") and the name of a function that will be invoked when the item is selected (myFirstItemHandler).


5.
On the next line, enter the name of your contextMenu object, followed by a period.

6.
In the code hint pull-down menu that appears, choose customItems.

or

Choose Built-in Classes > Movie > Context Menu > ContextMenu > Properties > customItems.

7.
Add another period, and then choose Built-in Classes > Core > Array > Methods > push.

8.
In between the parentheses of the push() method, enter the name of your contextMenuItem object.

The completed statement adds your contextMenuItem object to the customItems array of your contextMenu object (Figure 4.103).

Figure 4.103. The ContextMenuItem called myFirstItem_cmi is put into the customItems array.


9.
On a new line, create the function that will respond to the selection of your contextMenuItem (Figure 4.104).

Figure 4.104. The function that will respond to the selection of the item is defined in myFirstItemHandler.


10.
On a new line, enter _root.menu, followed by an equals sign and the name of your contextMenu object.

The contextMenu object now becomes associated with the _root Timeline (Figure 4.105).

Figure 4.105. The final code (top) makes the custom item show up at the top of the contextual menu (bottom).


✓ Tips

  • If you have multiple custom items in your contextual menu, you may want to organize them by separating them into groups. An optional third parameter in the contextMenuItem constructor function adds a horizontal separator above the item if it is set to true (Figure 4.106).

    Figure 4.106. The custom item called Third Item has been defined with a horizontal divider above it.

  • The function that is defined as the second parameter of the new contextMenuItem is required. Without it, your item will not show up in the contextual menu.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint