- 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 Control-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.55). 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.
)
Figure 4.55 The standard contextual menu (left), and the edit contextual menu that appears over selectable text fields (right).
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 properties of the builtInItems object of the ContextMenu class.
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;
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 |
|
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 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 Stage, so the default items of the main Timeline's contextual menu are hidden. The only items that remain are Settings, Show Redraw Regions, and Debugger (Figure 4.56).
Figure 4.56 By using the hideBuiltInItems() method, you disable all built-in (default) items of the contextual menu. The final code (top) hides all the default items except for the Settings and Debugger items (bottom). The Show Redraw Regions item appears only in debugger versions of the Flash Player and won't appear for regular users.
)
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 (Figure 4.57).
Figure 4.57 A new ContextMenu object named myZoomMenu has been 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 makes the Zoom item enabled 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 (Figure 4.58).
Figure 4.58 The completed script (top). The contextual menu that is attached to the Stage has its default items hidden. The contextual menu that is attached to the movie clip called map_mc contains the Zoom In item.
)
)
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.) In order 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 (Figure 4.59).
Figure 4.59 A new ContextMenuItem object called myFirstItem is created with one parameter: the name of the item ("Flip"). The ContextMenuItem called myFirstItem is put into the customItems array.
- You're not done yet! Finally you must create the event handler. 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. - Now add the listener :
myFirstItem.addEventListener (ContextMenuEvent.MENU_ITEM_SELECT, selectFlip);
Note that the listener goes on the ContextMenuItem object and not on the object on the Stage or on the ContextMenu object. The completed code (Figure 4.60) attaches a custom item to the contextual menu. When the user right-clicks on the object on the Stage called picture_mc and selects Flip, the object rotates 180 degrees.
Figure 4.60 The final code (top) makes the custom item show up at the top of the contextual menu when right-clicked over picture_mc (middle). When the custom item is selected, the MENU_ITEM_SELECT event occurs and Flash responds by rotating the picture 180 degrees (bottom).
TIPs
- Custom items always appear above the built-in items and separated from the built-in items by a horizontal bar.
- If you have many custom items, you can group them by adding another horizontal bar (Figure 4.61). Use the property separatorBefore and set it to true for any ContextMenuItem to add a horizontal before the item in the list like so:
myFirstItem.separatorBefore=true;
Figure 4.61 The custom item called Third Item has been defined with a horizontal divider above it.
- You can also use the property caption to define the title of a new item. For a new ContextMenuItem called myFirstItem, you can use the statement myFirstItem.caption="Flop".
)
)
)