使用影片剪辑创建简单的菜单

在这一部分中，您将学习如何使用影片剪辑创建简单的菜单。在这种方法中，您不必依赖于按钮之间的默认 Tab 键导航（以及向每个按钮附加代码），而可以根据需要使用按键捕获按钮来侦听按键事件并更新用户界面。这种技术确实要比按钮菜单方法涉及到更多的开发工作（请参阅处理按键事件），但它提供某些优势：

在下面的过程中，您首先要使用一个部分完成的 Flash 文档。有关完整应用程序的示例 (movieclip_menu_complete.fla)，请参阅 Flash Lite"示例和教程"页，网址为 www.adobe.com/go/learn_flt_samples_and_tutorials_cn。找到与您的 ActionScript 版本相对应的 .zip 文件，下载并解压缩该 .zip 文件，然后导航到 Samples 文件夹即可访问该示例。

要使用影片剪辑创建简单的菜单，请执行以下操作：

下载并打开名为 movieclip_menu_start.fla 的文件，此文件位于 www.adobe.com/go/learn_flt_samples_and_tutorials_cn。在"示例和教程"页上，找到、下载并解压缩 Flash Lite 版本的 .zip 文件，然后导航到 Samples 文件夹即可访问该示例。
在时间轴中，选择名为 Menu Items 的图层。
打开"库"面板（"窗口">"库"），然后将名为 Menu Item Clip 的影片剪辑元件的一个实例从"库"面板拖到舞台上。
此影片剪辑包含两个关键帧，或称可视状态：一个用于菜单项的初始未选中状态，另一个用于其选中状态，当菜单项接收焦点时显示。下面的图像显示了影片剪辑的时间轴的第一个关键帧。它包含一个显示菜单项标签的动态文本字段和一个红色的背景图形。该文本字段和背景图形扩展到影片剪辑的时间轴中的所有帧。

下面的图像显示了影片剪辑的时间轴中的第 5 帧。此帧与第一帧的唯一可视差别是在菜单项的红色背景周围具有黄色的边框加亮显示。
将另两个菜单项影片剪辑的实例拖到舞台上，并将它们在一列中垂直对齐。
选择上部的影片剪辑，然后在属性检查器的"实例名称"文本框中键入"menu_1"。
分别为中间和下部的影片剪辑指定实例名称"menu_2"和"menu_3"。

附加到每个实例名称后面的数字后缀允许您在稍后添加的代码中引用每个影片剪辑。
使用"文本"工具沿着舞台的底部边缘创建一个文本字段。
在属性检查器中，从"文本类型"弹出菜单中选择"动态"，然后在"变量"文本框中键入"status"。
和在简单菜单示例中一样，此文本字段显示有关当前选中的菜单项的状态消息。
在时间轴中，选择名为 Actions 的图层上的第一帧。

打开"动作"面板（"窗口">"动作"），然后输入以下代码：

// 初始化菜单项标签：
menu_1.label = "News";
menu_2.label = "Sports";
menu_3.label = "Weather";

// 初始化指定菜单项数量的变量
numItems = 3;

// 初始化 selectedItem 变量，它包含
// 当前菜单选择项的索引
selectedItem = 1;

// 初始化状态文本字段
currentLabel = eval("menu_" add selectedItem add ":label");
status = "Press to select " add currentLabel;

// 将第一个菜单项发送为其"指针经过"状态
tellTarget("menu_1") {
    gotoAndStop("over");
}

在时间轴中，选择名为 Key Catcher 的图层。
打开库"面板，然后将名为 key catcher 的按钮的一个实例拖到舞台上。
接下来，要将事件处理函数代码附加到处理用户按键事件并更新用户界面的按钮。
在舞台上的按钮处于选定状态下，打开"动作"面板。

向"动作"面板中键入（或复制和粘贴）以下代码：

on(keyPress "<Down>") {
    if(selectedItem < numItems) {
        // 关闭先前选择的菜单项的加亮显示：
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("off");
        }
        // 递增 selectedItem 变量
        // 并打开新选择项的加亮显示
        selectedItem++;
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("over");
        }
        // 用所选项的标签更新状态文本字段：
        currentLabel = eval("menu_" add selectedItem add ":label");
        status = "Press to select " add currentLabel;
    }
}
        
on(keyPress "<Up>") {
    if(selectedItem > 1) {
        // 关闭先前选择的项的加亮显示：
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("off");
        }
        // 递增 selectedItem 并打开新选择项的加亮显示
        selectedItem--;
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("over");
        }
        // 用所选项的标签更新状态文本字段：
        currentLabel = eval("menu_" add selectedItem add ":label");
        status = "Press to select " add currentLabel;

    }
}

on(keyPress "<Enter>") {
    // 用所选项更新状态字段
    status = "You selected " add currentLabel;

}

选择"控制">"测试影片"以在 Adobe Device Central 模拟器中测试应用程序。
要与菜单交互，请用鼠标单击模拟器上的上箭头键和下箭头键，或按键盘上的相应箭头键。