Flashmx2004系列教程〈二〉UI组件-MenuandMenuBarComponent

更新时间：

Menut和Menu Bar组件可以使你很轻松做出主菜单。你的菜单可以包含图标，你可以设置侦听器来对用户的操作做出反应，同时你的菜单可以像checkbox和radio组件一样可以复杂也可以单选，menu 和menu Bar你可以独立的使用。有MenuBar可以没有menu比如我们常用的工具栏。你也可以光有Menu而没有MenuBar，如当用户点击按钮时显示Menu.

菜单范例一. 一个简单的菜单条。

1.创建一个新的文件参照下图进行布局。

2.创建一个新层命名为action。下层命名为component.

3.拖动一个MenuBar组件至场景的component层中。

4.打开属性面板将它的实例名命名为myMenuBar，同时我们注意到它的参数中只有一个label参数，你可以不去理会它，因为我们通过代码去实现它。

5。在这个例子中我们创建一个简单的帮助菜单，里面包含两个选项一个是about一个是egoldy.

在Action层中的第一帧上输入如下代码。

var helpMenu=myMenuBar.addMenu(" Help ");
helpMenu.addMenuItem({label:"About",instanceName:"aboutMenuItem"});
helpMenu.addMenuItem({label:"Egoldy",instanceName:"aboutEgoldy"});

6.测试你的影片，点击help，就会看到有两个选项可以选择，现在它们还不能做任何事情，如果你想让它做什么我们必须要为它设置侦听器。

7.修改第一帧的脚本，在其下加入如下代码：

var helpMenuListener=new Object();
helpMenuListener.change=function(eventObj){
var theMenu=eventObj.menu;
var theMenuItem=eventObj.menuItem;
switch(theMenuItem){
  case theMenu.aboutMenuItem:
  trace("help menu :About selected");

  break;
  case theMenu.aboutegoldy:
  trace("help menu: egoldy selected");
  break;
  default:
  trace("Error,no item have selected");
  break;
}
}
helpMenu.addEventListener("change",helpMenuListener);
8.测试你的影片

这只是一种简单的菜单形式，接下来我们要学习复杂一点的形式如复选菜单和如何加入分隔线。

菜单范例二，The Check Box and Separator Menu Items复选菜单和分隔线。

1。仍然使用上一个范例，如果你还没有做请先完成上一个范例。

2。修改第一帧的源码，在最上端加入下代码以在菜单条增加一个菜单选项。

注意到我们增加的第一个选项中有一个type属性，设为check也就是将其设为复选形式，当我们单击后会为其加上复选标志。selected属性决定了默认下它是否被选中。在这里我们设置为false也就说在开始时不被选中。

同时在这里我们还创建了一个分隔线，用于分开菜单，对于它没有任何的相关描述。

在最后一个选项中我们可以使用enabled属性来选定选项在此时是否可用。

3。在你刚刚输入的代码下方加入如下代码因为我们也要向第一个例子那要让选项起作用。

var optionsMenuListener=new Object();
optionsMenuListener.change=function(eventObj){
var theMenu=eventObj.menu;
var theMenuItem=eventObj.menuItem;
switch(theMenuItem){
  case theMenu.enablegrid:
  var checked=theMenuItem.attributes.selected;
  theMenu.setMenuItemEnabled(theMenu.showgrid,checked);
  break;
  case theMenu.showgrid:
  trace("网格功能已经开启");
  break;
  default:
  trace("options Menu error,unkown menu item selected");
  break;
}
}
optionsMenu.addEventListener("change",optionsMenuListener);

在这段代码中有一个地方就是设置了一个变量checked用来检测复选框是否被选中。

4.测试你的影片，当我们选中打开网格功能时，我们发现下面的网格选项真的能用了。

菜单范例三，The Radio Box Menu Items单选菜单

1。我们继续使用刚完成的范例，如果你没有做记得完成。

2。在我们上例中的第二部的代码下方加入如下代码。因为我们只是增加选项。

optionsMenu.addMenuItem({type: "separator"});
optionsMenu.addMenuItem({label: "选择我", type: "radio",
groupName: "myGroup", instanceName: "item5", selected: "true"});
optionsMenu.addMenuItem({label: "或者我（但不是两者都）", type: "radio",
groupName: "myGroup", instanceName: "item6"});

注意在这里我们多了一个属性就groupName,如果你不太清楚请查看之前关于radio组件的教程。

3。编辑代码中switch下的那一段代码加入如下：

case theMenu.item5 :
  // first radio button
  trace("Options Menu: First radio button selected.");
  break;
case theMenu.item6 :
  // second radio button
  trace("Options Menu: Second radio button selected.");
  break;

4.测试影片。