使用影片剪辑创建简单的菜单(仅限 Flash Professional)

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

在下面的过程中,您首先要使用一个部分完成的 Flash 文档。您可以在 Flash 安装文件夹下的 /Tutorials and Samples/Samples/Flash Lite/ 文件夹中找到已完成版本的应用程序 (movieclip_menu_complete.fla)。

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

  1. 打开位于 Flash 安装文件夹下的 /Tutorials and Samples/Samples/Flash Lite/ 文件夹中的名为 movieclip_menu.fla 的文件。
  2. 在时间轴中,选择名为 Menu Items 的图层。
  3. 打开"库"面板("窗口">"库"),然后将名为 Menu Item Clip 的影片剪辑元件的一个实例从"库"面板拖到舞台上。

    此影片剪辑包含两个关键帧,或称可视状态:一个用于菜单项的初始未选中状态,另一个用于其选中状态,当菜单项接收焦点时消失。下面的图像显示了影片剪辑的时间轴的第一个关键帧。它包含一个显示菜单项标签的动态文本字段和一个红色的背景图形。该文本字段和背景图形扩展到影片剪辑的时间轴中的所有帧。

    下面的图像显示了影片剪辑的时间轴中的第 5 帧。此帧与第一帧的唯一可视差别是在菜单项的红色背景周围具有黄色的边框加亮显示。

  4. 将另两个菜单项影片剪辑的实例拖到舞台上,并将它们在一列中垂直对齐。
  5. 选择上部的影片剪辑,然后在属性检查器的"实例名称"文本框中键入"menu_1"。
  6. 分别为中间和下部的影片剪辑指定实例名称 menu_2menu_3

    附加到每个实例名称后面的数字后缀允许您在稍后添加的代码中引用每个影片剪辑。

  7. 使用"文本"工具沿着舞台的底部边缘创建一个文本字段。
  8. 在属性检查器中,从"文本类型"弹出菜单中选择"动态",然后在"变量"文本框中键入"status"。

    和在简单菜单示例中一样,此文本字段显示有关当前选中的菜单项的状态消息。

  9. 在时间轴中,选择名为 Actions 的图层上的第一帧。
  10. 打开"动作"面板("窗口">"动作"),然后输入以下代码:
    // 初始化菜单项标签:
    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");
    }
    
  11. 在时间轴中,选择名为 Key Catcher 的图层。
  12. 打开"库"面板,然后将名为 key catcher 的按钮的一个实例拖到舞台上。

    接下来,要将事件处理函数代码附加到处理用户按键事件并更新用户界面的按钮。

  13. 在舞台上的按钮处于选定状态下,打开"动作"面板。
  14. 向"动作"面板中键入(或复制和粘贴)以下代码:
    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;
    
    }
    
  15. 选择"控制">"测试影片"以在模拟器中测试应用程序。

    要与菜单交互,请用鼠标单击模拟器上的上箭头键和下箭头键,或按键盘上的相应箭头键。