Macromedia Flash Mx 1002004 Actionscript Training From The Source [Electronic resources] نسخه متنی

Creating Custom Context Menus

The context menu appears when you right-click a Flash movie (Control-click on a Macintosh). There are three different types of Flash context menus:

Standard menu.
Appears when you right-click anything in a Flash movie except a text field.

Edit menu.
Appears when you right-click a text field that's editable or selectable.

Error menu.
Appears when a Flash movie fails to load within a Web page and you right-click in the empty area.

The error menu cannot be changed, but the standard and edit context menus can be customized to display new items or remove the built-in default items. All the built-in context menu items can be removed except for the Settings item and the Debugger item.

The Flash player includes two built-in classes to assist you in creating a customized context menu:

ContextMenu.
This class allows you to create a new context menu, hide built-in menu items (Zoom In, Zoom Out, 100%, Play, Stop, and so on), and keep track of customized items.

ContextMenuItem.
Each item in a context menu is an instance of this class. The ContextMenu class has a property (array) called customItems. Each element in that array is an instance of the ContextMenuItem class.

The ContextMenu class and the ContextMenuItem class are used together to build custom context menus.

When creating a new instance of the ContextMenu class, you can specify a function to be called when that ContextMenu is displayed:

var myContextMenu:ContextMenu = new ContextMenu(menuHandler);

The menuHandler() function is executed just before the context menu appears. Script within the function can be used to evaluate certain conditions within the application and items on a context menu can be dynamically added, removed, enabled, or disabled. For example, a Save item may be disabled if nothing has changed since the last time the user saved.

You can dynamically change the function a context menu calls before it appears, by redefining its onSelect event handler. For example:

myContextMenu.onSelect = anotherFunction;

As a result of this script, the onSelect event handler is reassigned from its initial value to that of anotherFunction. The myContextMenu instance will call anotherFunction() instead of menuHandler()or whatever function you passed into the ContextMenu constructor when creating itwhen the context menu is selected (but before it appears).

When creating custom context menus, you may want to remove the default items that appear. To hide the built-in items in a context menu, you call the hideBuiltInItems() method:

myContextMenu.hideBuiltInItems();

With this method, all built-in items are hidden from the context menu except the Settings and Debugger items.

NOTE

In editable text fields, standard items such as Cut, Copy, Paste, Delete, and Select All are not removable.

Instances of the ContextMenu class have only one propertycustomItems. This is an array that stores the custom ContextMenuItem objects that form the custom items that appear on the menu. To add a custom item to a ContextMenu object, you add it to the customItems array for that object:

myContextMenu.customItems.push(new ContextMenuItem("Next Page", nextPageHandler));

This statement adds a new ContextMenuItem object to the customItems array of the myContextMenu object. The first parameter is the text to be displayed in the menu. The second parameter is the callback function for that item. When the item is selected from the context menu, the callback function is called.

Custom menu items in a context menu can be referenced in the following manner:

myContextMenu.customItems[0] // first custom menu item
myContextMenu.customItems[1] // second custom menu item
myContextMenu.customItems[2] // third custom menu item

Knowing this, you can enable and disable menu items dynamically:

myContextMenu.customItems[1].enabled = false;
myContextMenu.customItems[3].enabled = false;

Disabled menu items still appear on the custom context menu, but they're dimmed and won't function when clicked. Menu items are enabled by default.

You can dynamically change the function that a context menu item calls when selected, by redefining its onSelect event handler. For example:

myContextMenu.customItems[0].onSelect = differentCallbackFunction;

NOTE

Just to clarify, the context menu itself has a callback function that is executed just before the menu appears, and each context menu item has a callback function that's executed when that item is selected from the menu.

To use a custom context menu, it has to be assigned to a particular movie clip, button, or text field instance. The assignment causes that custom menu to appear when the instance is right-clicked. Here's the syntax:

myClip_mc.menu = myContextMenu;

When the mouse is right-clicked over the myClip_mc movie clip instance, the myContextMenu context menu is displayed.

NOTE

A single custom context menu can be associated with as many movie clip, button, and text field instances as you want.

When using custom context menus, the timeline with the highest depth always captures the right-click mouse event, which causes its custom menu to be displayed. For example, if two movie clips are overlapping and each has an associated custom context menu, the clip that's at a higher depth is the one whose menu is shown when the mouse is right-clicked over that clip. This principle also applies to the main timeline. If the mouse is not over a movie clip that has a custom menu, but the main timeline (_root) has a custom menu, the custom menu for _root will be displayed.

In the following exercise, you'll create a custom context menu with one custom item, used to print the contents of an editable text field.

Open ContextMenu1.fla in the Lesson21/Assets folder.

This file has three layers: Background, Text Field, and Actions. The Background layer contains the graphics for the project. The Text Field layer contains an input text field instance with the name entry_txt. Frame 1 of the Actions layer is where you'll add the ActionScript for this project.

When the project is complete, you'll be able to add text to the editable text field; when you right-click, you'll be able to select Print Fridge Note from the custom context menu.

Select Frame 1 in the Actions layer, open the Actions panel, and add the following line to create a new instance of the ContextMenu class:

var myContextMenu:ContextMenu = new ContextMenu(menuHandler);

This code creates a new instance of the ContextMenu class, named myContextMenu. This custom context menu will eventually be associated with the entry_txt text field. When the mouse is right-clicked over that field, this menu (and the menu items we'll eventually add to it) will appear. We'll add three custom items to this menu that give the user the following options:

Print any text in the entry_txt text field.

Delete any text in the entry_txt text field.

Reformat any text in the entry_txt text field so that it's red and consists of uppercase characters.

In the constructor, a reference to a function called menuHandler() is passed in. This function is called whenever this menu is opened (the user right-clicks the entry_txt text field). Let's create that function next.

Add the following menuHandler() function definition below the current script:

function menuHandler() {
var numberOfItems = myContextMenu.customItems.length;
if (entry_txt.text.length > 0) {
for(var i = 0; i < numberOfItems; ++i){
myContextMenu.customItems[i].enabled = true;
}
} else {
for(var i = 0; i < numberOfItems; ++i){
myContextMenu.customItems[i].enabled = false;
}
}
}

This function is called just before the myContextMenu menu appears. The purpose of this function is to enable and disable custom items on that menu on the fly, depending on whether the entry_txt text field contains any text. If there is text in that field, custom items on the context menu are enabled; otherwise, the custom items are disabled.

The function begins by creating a variable named numberOfItems. The value of this variable is based on the number of custom menu items that have been added to the myContextMenu instance. In this project, that instance will eventually have three items added to it; thus, the value of numberOfItems is 3. The value of this variable will be used in a moment.

Next, a conditional statement evaluates whether the user has entered any text into the entry_txt text field. If the field contains text, the first part of the statement uses a loop to quickly enable all the custom items on the myContextMenu instance. If no text is found, all the items are disabled.

After this function has executed, the menu appears. Now let's add some custom items to the myContextMenu instance.

Add the following line of script just below the menuHandler() function:

myContextMenu.customItems.push(new ContextMenuItem("Print Fridge Note", printHandler));

This line of script adds a new ContextMenuItem instance to the customItems array of the myContextMenu instance. This step defines the first item that will appear when the menu is opened.

The first parameter of the ContextMenuItem constructor method contains the text that we want to appear in the menu representing this item. The second parameter is the callback function that should be executed when the item is selected. We'll create this function next.

Add the following script to define the printHandler() callback function:

function printHandler() {
var myPrintJob:PrintJob = new PrintJob();
var result:Boolean = myPrintJob.start();
if (result) {
myPrintJob.addPage("entry_txt");
myPrintJob.send();
}
delete myPrintJob;
}

This function is called when Print Fridge Note is selected from the context menu. The first line creates a new instance of the PrintJob class. The second line attempts to initialize the printer, capturing the result of printer initialization. If no printer exists or the user cancels the print request, the result variable has a value of false. If the user proceeds with the print request, the result variable is set to true.

If result is true, we use the addPage() method of the PrintJob class to add contents of the entry_txt text field to be printed. The remaining default parameters for the addPage() method are acceptable, so we don't need to set them.

Next, the page is sent to the printer, and the myPrintJob instance is deleted.

Let's add the remaining two items to our custom context menu.

Add the following script at the end of the current script:

myContextMenu.customItems.push(new ContextMenuItem("Clear Fridge Note", clearHandler));
function clearHandler() {
entry_txt.text = ";
}

This script adds another custom item to the customItems array of the myContextMenu instance. "Clear Fridge Note" is the text for this item, and the clearHandler() function is called when this item is selected. The clearHandler() function is created with the three remaining lines of script. Its only task is to remove any text from the entry_txt text field.

Add the following script below the current script:

myContextMenu.customItems.push(new ContextMenuItem("Urgent Fridge Note", urgentHandler));
function urgentHandler() {
entry_txt.textColor = 0x990000;
entry_txt.text = entry_txt.text.toUpperCase();
}

This step adds one more custom item to the myContextMenu instance. The text for this item is "Urgent Fridge Note" and the function called when this item is selected is urgentHandler(). This function takes the text entered into the entry_txt field, makes it red, and converts it to uppercase characters.

Add the final line of script:

entry_txt.menu = myContextMenu;

This step associates the myContextMenu instance with the entry_txt text field. If the user right-clicks this text field, the custom context menu appears; otherwise, the custom menu won't be shown.

Select Control > Test Movie to test your work. Type some text in the text field, open the custom context menu, and select a custom menu item.

Notice that if the text field is blank, the custom menu items are disabled in the context menu. They're visible, but not selectable. If the text contains at least one text character, the menu items become available. This is the result of the menuHandler() function created in Step 3.

Close the test movie and save your work as ContextMenu2.fla.

This step completes the exercise and this lesson.

Custom context menus provide an entirely new way for users to interact with an applicationwithout having to manually search for a particular button or control. If you use this new Flash feature, be sure to make users aware of it.