Animate(以前称为 Flash Professional)中的按钮是包含四帧的元件。按钮元件的每一帧分别代表了按钮的不同状态:弹起、指针经过、按下和点击。这些状态决定了在鼠标滑过按钮或用户单击按钮时按钮的视觉效果。本文档介绍了如何创建基本按钮和高级按钮。

创建基本按钮

  1. 选择“插入”>“新建元件”,或按 Control+F8 (Windows) 或 Command+F8 (Mac OS)。
    注意:在 Flash 3 及更早版本中,取消选择舞台上的任何内容,然后选择“插入”>“创建元件”。

  2. 在“元件属性”对话框中,输入新按钮元件的名称,然后在“行为”选项中选择“按钮”。单击“确定”。

    Flash 将切换到元件编辑模式。时间轴标题更改为显示四个连续帧,标签分别为“弹起”、“指针经过”、“按下”和“点击”。第一帧(“弹起”)是一个空白关键帧。
  3. 要创建“弹起”状态按钮图像,请使用绘图工具、导入图片,或在舞台上放置其他元件的实例。您可以在按钮中使用影片剪辑或图形元件。但不能在按钮中使用其他按钮。如果要创建动画按钮,请使用影片剪辑元件。
  4. 选择第二帧(标签为“指针经过”),然后选择“插入”>“关键帧”。第一帧中的按钮图像将显示在舞台上。
  5. 更改“指针经过”状态的按钮图像。对“按下”和“点击”帧重复步骤 4 和 5。

    注意:
    播放时“点击”帧不会显示在舞台中,但会定义在进行单击操作时作出响应的按钮区域。确保“点击”帧图形是足够大的实心区域,以包含“弹起”、“按下”和“指针经过”帧的所有图形元素。它也可以比可见按钮大。如果没有指定“点击”帧,“弹起”状态中的对象会被用作“点击”帧。
  6. 定义四个按钮状态的图像后,选择“编辑”>“编辑影片”以退出“元件编辑”模式。
  7. 选择“窗口”>“库”以打开“库”窗口。在“库”窗口找到按钮,然后将按钮元件从“库”中拖动到舞台上。此步骤将在影片中创建一个按钮实例。

有关将动作分配给按钮实例的信息,请参阅您所使用的 Animate 版本的适用文档。文档如下所示:

将简单动作分配给按钮 (Flash 5)

  1. 在“编辑影片”模式下,选择上述步骤 7 中创建的按钮实例。
  2. 选择“窗口”>“动作”以打开“动作”面板。
  3. 在面板左侧的工具箱列表中,单击“基本动作”类别以显示基本动作。
  4. 要分配动作,请执行以下操作之一:
    • 双击“基本动作”类别中的动作。
    • 将左侧“基本动作”类别中的动作拖动到面板右侧的“动作”列表中。
    • 单击“添加”(+) 按钮并从弹出菜单中选择动作。
    • 使用键盘快捷键。
  5. 如果选择的动作有任何关联参数,这些参数会显示在“动作”面板底部的“参数”窗格中。(如果未显示“参数”窗格,请单击面板右下角的小三角形。)选择或键入该动作对应的参数。例如,下面显示的 gotoAndPlay 动作包含三个参数:SceneTypeFrameGoto and Play 的选项。

将简单动作分配给按钮(Flash 4 和早期版本)

  1. 在“编辑影片”模式下,选择上述步骤 7 中创建的按钮实例。
  2. 确保从“控制”菜单取消选中“启用按钮”。
  3. 双击该按钮以打开“实例属性”对话框。
    注意:在 Flash 2 中,此对话框是“链接属性: 按钮”对话框。

  4. 选择“实例属性”对话框中的“动作”选项卡以分配动作。然后,单击加号 (+) 按钮并双击相应的动作。

    注意:
    在 Flash 2 中,使用“链接属性: 按钮”对话框中的“动作”弹出菜单来分配动作。一个按钮只能分配一个动作。
  5. 确保“控制”菜单中的“启用按钮”已切换回打开状态(旁边有一个对勾标记)。

  6. 如果选择的动作有任何关联参数,这些参数会显示在“动作”面板右侧的“参数”面板中。选择或键入该动作对应的参数。

创建高级按钮

掌握了简单按钮后,请尝试较为复杂的 Animate 按钮。您可以创建不可见的按钮、具有动画状态的按钮和具有鼠标滑过效果的按钮。 

设计复杂按钮时,务必要了解“点击”状态。按钮的形状和区域表示按钮的活动区域。要尝试使用“点击”状态,请执行以下操作:

  1. 将“公用库”中的按钮放置在舞台上。编辑该按钮。
  2. 高亮显示按钮“点击”状态中的帧,然后插入关键帧。在影片中测试此行为。

  3. 大幅调整“点击”状态中对象的大小并进行测试。
  4. 删除“点击”状态中的关键帧,然后测试该按钮。

  5. 请注意按钮指针上的效果,以及启用按钮时显示的“弹起”、“指针经过”和“按下”状态。 

不可见按钮

您可以将按钮的“弹起”、“指针经过”和“按下”状态保留为空。如果这些状态为空,则需要定义“点击”状态,以使其包含内容。

当按钮的“弹起”状态为空或不可见时,按钮会在舞台上表示为蓝色形状。该形状等同于按钮中下一个关键帧的内容。此蓝色形状不会显示在最终影片中。请参阅下面的示例

具有动画状态的按钮

要在 Animate 中制作动画按钮,请将影片剪辑放置在要制作动画的按钮状态中。

  1. 为希望具有动画效果的每个按钮状态创建影片剪辑。
  2. 创建按钮。
  3. 将影片剪辑放置在按钮状态中以制成动画。
  4. 将按钮放置在舞台上。
    注意:无法在 Animate 编辑器中测试影片剪辑。请选择“控制”>“测试影片”或导出为 SWF 文件以进行测试。

请参阅下面的示例

影片中一个区域的鼠标滑过效果会影响影片的其他区域

要创建此效果,请移动“点击”状态元素,使其在舞台上的区域不同于按钮“指针经过”状态中元素所在的区域。此方法适用于制作简单的鼠标滑过效果。按钮的活动区域在舞台上的位置不同于鼠标滑过效果所在的区域。请参阅下面的示例

示例

注意:需要有 Flash Player 才能查看示例。

  • 下载 Windows 源文件 advanced_buttons.zip (17 K)
  • 下载 Mac OS 源文件 advanced_buttons.sit (18 K)

注意:需要有 Flash 4 或更高版本才能打开源文件。

其他信息

详细了解按钮及其结构的好方法是研究 Animate 提供的按钮示例。在版本 5 中,可以通过“窗口”>“公用库”>“按钮”菜单使用这些示例按钮。如果您使用的是版本 4,则可以通过选择“库”>“按钮”来访问这些按钮。对于版本 2,可以从“附加功能”菜单访问示例按钮库。

也可以通过版本 5 附带的课程来了解创建按钮的分步说明。在 Flash 中选择“帮助”>“课程”>“06 按钮”可访问本课程。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略