- Listening for Events
- Mouse Detection
- The SimpleButton Class
- Invisible Buttons
- Animated Buttons and the Movie Clip Symbol
- Complex Buttons
- Button-tracking Options
- Changing Button Behavior
- Creating Buttons Dynamically
- Keyboard Detection
- The Contextual Menu
- Creating Continuous Actions
- A Summary of Events
This chapter is from the book
This chapter is from the book
This chapter is from the book
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 different types of contextual menus, including a standard menu that appears over any part of the Stage and an edit
menu that appears over text fields 
. 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 objects like buttons, movie clips, or text fields.
)
Manipulating the contextual menu first requires that you instantiate a new object of the ContextMenu class, like so:
var myMenu:ContextMenu = 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 enables or disables that particular item in the menu. For example, the following statement disables the print item in the ContextMenu object called myMenu:
myMenu.builtInItems.print = false;
See Table 4.3 for the builtInItems properties of the ContextMenu class.
Table 4.3. builtInItems Properties
|
Property |
Value |
Menu Items |
|
forwardAndBack |
true or false |
Forward, Back |
|
save |
true or false |
Save |
|
zoom |
true or false |
Zoom in, Zoom out, 100%, Show all |
|
quality |
true or false |
Quality |
|
play |
true or false |
Play |
|
loop |
true or false |
Loop |
|
rewind |
true or false |
Rewind |
|
|
true or false |
|
Finally, you must associate your ContextMenu object with the contextMenu property of another object, such as the main Stage, a text field, or a specific movie clip, like so:
myObject_mc.contextMenu = myMenu;
If you associate your ContextMenu object with a specific button or movie clip, your custom contextual menu will appear when the user activates the contextual menu only while the mouse pointer is over that object. For example, a map can have the Zoom item in its contextual menu enabled, whereas other objects may have the Zoom item in their contextual menu disabled.
To disable the contextual menu
- Select the first frame of the main Timeline, and open the Actions panel.
- On the first line of the Script pane, instantiate a new ContextMenu object:
var myMenu:ContextMenu = new ContextMenu();
A new ContextMenu object is named and created.
- On the next line of the Script pane, call the hideBuiltInItems() method of your ContextMenu object, like so:
myMenu.hideBuiltInItems();
This method sets all the properties of the builtInItems object of myMenu to false, which hides the items of the contextual menu.
- On the third line of the Script pane, assign your ContextMenu object to the contextMenu property of the Stage as follows:
this.contextMenu = myMenu;
The ContextMenu object now becomes associated with the main Timeline, so the default items of the main Timeline’s contextual menu are hidden. The only items that remain are Settings, Show Redraw Regions, and Global Settings
.
)
To associate custom contextual menus with different objects
- Continue with the preceding task. Starting on the next available line in the Script pane, declare another ContextMenu object and instantiate the object using the constructor function, new ContextMenu().
A second ContextMenu object is named (in this example, called myZoomMenu) and created
.
- Add a call to the hideBuiltInItems() method for your new ContextMenu instance.
The items of your second ContextMenu object, like the first, are disabled.
- Assign a true value to the zoom property of the builtInItems object of your second ContextMenu object, like so:
myZoomMenu.builtInItems.zoom = true;
This enables the Zoom item in your second ContextMenu instance.
- On the next line of the Script pane, assign your second contextual menu to the contextMenu property of an object on the Stage, like so:
map_mc.contextMenu = myZoomMenu;
In this example, the completed statement associates the second ContextMenu object with the movie clip instance called map_mc
.
)
)
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 with a string parameter, as in the following code:
var myFirstItem:ContextMenuItem = new ContextMenuItem("First Item");
The parameter represents the text that will be displayed for the item in the contextual menu. Because it’s a string, use quotation marks around the enclosed text. There are certain size and content restrictions on new menu items—see the sidebar “Custom Item Restrictions” for details.
Next, you must add your new ContextMenuItem object to the customItems property of your ContextMenu object. However, the customItems property is different from the builtInItems property you learned about in the preceding section. The customItems property is an array, which is an ordered list of values or objects. (You can learn more about arrays in Chapter 11, “Manipulating Information.”) To add your new ContextMenuItem object to the customItems array, use the array method push(), as in the following code:
mymenu.customItems.push(myFirstItem);
Finally, you have to create an event handler to respond when the user selects your new contextual item. The Event object that is dispatched when an item on the contextual menu is selected is a ContextMenuEvent object. You can use ContextMenuEvent.MENU_ITEM_SELECT as the specific event type.
To create a new item for the contextual menu
- Select the first frame of the main Timeline, and open the Actions panel.
- In the Script pane, create a new ContextMenu object as in previous tasks. The completed code looks like this:
var mymenu:ContextMenu = new ContextMenu();
- Starting on the next line, hide the default items in the contextual menu:
mymenu.hideBuiltInItems();
- Next, instantiate a new ContextMenuItem object for your first item:
var myFirstItem:ContextMenuItem = new ContextMenuItem("Flip");A new ContextMenuItem is instantiated. Be sure to enclose the parameter, which represents the title of your item, in quotation marks.
- On the next line, add a call to the Array class’s push() method with the name of your ContextMenuItem as its parameter:
mymenu.customItems.push(myFirstItem);
The completed statement adds your ContextMenuItem object to the customItems array of your ContextMenu object.
- On the following line, assign the ContextMenu object to the contextMenu property of an object on the Stage:
picture_mc.contextMenu = mymenu;
In this example, your contextual menu now becomes associated with the movie clip called picture_mc
.
- You’re not done yet! Finally, you must create the event handler. Add the listener:
myFirstItem.addEventListener (ContextMenuEvent. MENU_ITEM_SELECT, selectFlip);
Note that the listener goes on the ContextMenuItem object, not on the object on the Stage or on the ContextMenu object.
- Next, create a function with the ContextMenuEvent object as its parameter, like so:
function selectFlip(myevent:ContextMenuEvent):void { picture_mc.rotation += 180; }The actions that should happen when the user selects your custom item in the contextual menu go in between the function’s curly braces.
The completed code
attaches a custom item to the contextual menu. When the user right-clicks on the object called picture_mc and selects Flip, the object rotates 180 degrees.
TIP
If you have many custom items, you can group them by adding another horizontal bar
. Use the property separatorBefore and set it to true for any ContextMenuItem to add a horizontal bar before the item in the list, like so:myFirstItem.separatorBefore = true;
)
)
)