Tài liệu Creating Custom Context Menus pdf

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 ContextMenumenuHand

< Day Day Up >

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 it—when 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 property—customItems 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

1 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

2 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:

3

4 var myContextMenu:ContextMenu = new ContextMenu(menuHandler);

5

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:

o Print any text in the entry_txt text field

o Delete any text in the entry_txt text field

o 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

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

4

5 function menuHandler() {

6

7 var numberOfItems = myContextMenu.customItems.length;

8

9 if (entry_txt.text.length > 0) {

10

11 for(var i = 0; i < numberOfItems; ++i){

12

13 myContextMenu.customItems[i].enabled = true;

14

15 }

16

17 } else {

18

19 for(var i = 0; i < numberOfItems; ++i){

20

21 myContextMenu.customItems[i].enabled = false;

22

23 }

24

25 }

26

27 }

28

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

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

5

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

7

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

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

6

7 function printHandler() {

8

9 var myPrintJob:PrintJob = new PrintJob();

10

11 var result:Boolean = myPrintJob.start();

12

13 if (result) {

14

15 myPrintJob.addPage("entry_txt");

16

17 myPrintJob.send();

18

19 }

20

21 delete myPrintJob;

22

23 }

24

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

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

7

8 myContextMenu.customItems.push(new ContextMenuItem("Clear Fridge Note", clearHandler));

9

10 function clearHandler() {

11

12 entry_txt.text = "";

13

14 }

15

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

7 Add the following script below the current script:

8

9 myContextMenu.customItems.push(new ContextMenuItem("Urgent Fridge Note", urgentHandler));

10

11 function urgentHandler() {

12

13 entry_txt.textColor = 0x990000;

14

15 entry_txt.text = entry_txt.text.toUpperCase();

16

17 }

18

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

8 Add the final line of script:

9

10 entry_txt.menu = myContextMenu;

11

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

9 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

10 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 application—without 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

< Day Day Up >