将导航和文本添加到特色餐屏幕(仅限 Flash Professional)

在本部分中,您将在特色餐屏幕上添加交互,使用户能够控制每个动画之间的过渡。您还将添加动态文本字段,以显示每个图像的名称和说明。

要添加文本以显示特色餐的名称和说明,请执行以下操作:

  1. 在 Flash 中,打开在上一部分中完成的文件(请参见创建主屏幕的菜单(仅限 Flash Professional))。
  2. 在时间轴中,选择 Text 图层上的第 10 帧。
  3. 在"工具"面板中,选择"文本"工具,然后在第一个被遮罩的特色餐图像下方创建一个文本字段。

    此文本字段将显示当前正在显示其图像的特色餐的名称。

  4. 在舞台上选中该文本字段的情况下,在属性检查器中进行以下更改:
    • 从"文本类型"弹出菜单中选择"动态文本"。
    • 从"字体"弹出菜单中选择"Verdana"。
    • 选择"斜体"文本样式选项。
    • 将字体大小设置为 10。
    • 从"字体呈现方法"弹出菜单中选择"位图文本(未消除锯齿)"。
    • 在"变量"文本框中键入"title"。这是分配给动态文本字段的变量名称。
  5. 在第一个文本字段下方创建另一个文本字段,以显示用户正在查看的特色餐的简短说明。
  6. 使用"选择"工具,调整该文本字段的大小,使其高度大约为另一个文本字段的三倍。

  7. 在舞台上选中该文本字段的情况下,在属性检查器中进行以下更改:
    • 从"文本类型"弹出菜单中选择"动态文本"。
    • 从"线条类型"弹出菜单中选择"多行"。
    • 从"字体"弹出菜单中选择"Verdana"。
    • 将字体大小设置为 10。
    • 从"字体呈现方法"弹出菜单中选择"位图文本(未消除锯齿)"。
    • 在"变量"文本框中键入"description"。
  8. 在时间轴中,选择 Actions 图层的第 10 帧上的关键帧。
  9. 打开"动作"面板,然后添加以下代码:
    title = "Summer salad";
    description = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";
    fscommand2("SetSoftKeys", "Home", "Next");
    stop();
    

    这段代码显示用户当前正在查看的特色餐的名称和说明,并停止播放头。SetSoftKeys 命令将注册设备的软键,用户可以使用这些软键返回到主屏幕,并可在特色餐之间导航。

  10. 在 Actions 图层上,选择第 20 帧上的关键帧,然后在"动作"面板中输入以下代码:
    title = "Chinese Noodle Salad";
    description = "Rice noodles with garlic sauce, shitake mushrooms, scallions, and bok choy.";
    stop();
    
  11. 在 Actions 图层上,选择第 30 帧上的关键帧,然后在"动作"面板中输入以下代码:
    title = "Seared Salmon";
    description = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.";
    stop();
    
  12. 在 Actions 图层上,选择第 40 帧上的关键帧,然后在"动作"面板中输入以下代码:
    title = "New York Cheesecake";
    description = "Creamy traditional cheesecake served with chocolate sauce and strawberries.";
    stop();
    
  13. 在 Actions 图层上,选择第 50 帧上的关键帧,然后在"动作"面板中输入以下代码:
    gotoAndStop("specials");
    

    这段代码将播放头返回到动画序列的开始处。动画序列中的第一个和最后一个图像相同,这会产生一种连续动画的幻觉。

  14. 保存所做的更改。

接下来,您将在特色餐屏幕上添加导航,使用户能够在每种特色餐的图像和说明之间导航。

若要向特色餐屏幕添加导航,请执行以下操作:

  1. 打开在上一部分中完成的文件。
  2. 在"库"面板("窗口">"库")中,找到名为 Home 的元件,然后将其拖到舞台的左下角。
  3. 在属性检查器中,将 Home 图像的 x 坐标设置为 0y 坐标设置为 188
  4. 将名为 Next 的元件从"库"中拖到舞台的右下角。
  5. 在属性检查器中,将图像的 x 坐标设置为 120y 坐标设置为 188

    应用程序中的舞台看上去应该类似于下面的屏幕快照:

  6. 在时间轴中,选择名为 Key Catcher 的图层的第 10 帧上的关键帧。
  7. 将 Key Catcher 按钮元件从"库"中拖到舞台以外的工作区中。

    注意

    要查看该工作区,请在 Flash 中选择"视图">"工作区"。

    此按钮的目的是"捕获"由用户触发的 ActionScript 按键事件,然后采取适当的动作。有关使用按键捕获按钮的更多信息,请参见"开发 Flash Lite 应用程序"中的创建按键捕获按钮(仅限 Flash Professional)

  8. 选择按键捕获按钮,然后在"动作"面板中输入以下代码:
    // 处理右软键事件("Next"按钮):
    on(keyPress "<PageDown>") {
        play();
    }
    // 处理左软键事件("Home"按钮):
    on(keyPress "<PageUp>") {
        gotoAndStop("main");
    }
    

    第一个 on(keyPress) 处理函数使图像动画前进到序列中的下一个图像;第二个处理函数使播放头移动到应用程序主屏幕。

  9. 选择"控制">"测试影片"以在模拟器中测试最终的应用程序。