创建按钮的基本步骤

  1. 分辨哪种按钮类型最适合您的需求。

    按钮元件

    大部分人选择按钮元件是因为它们具有灵活性。按钮元件包含专门的内部时间轴用于按钮状态。您可以轻松创建视觉效果不同的“弹起”“按下”“滑过”状态。按钮元件还可以回应用户的操作,自动更改其状态。

    影片剪辑按钮

    您可以使用影片剪辑元件来创建复杂的按钮效果。影片剪辑元件可以包含几乎任何类型的内容,包括动画。不过,影片剪辑元件没有内置的“弹起”“按下”“滑过”状态。您可以使用 ActionScript 自己创建这些状态。其中一个缺点是,影片剪辑文件大于按钮文件。

    ActionScript 按钮组件

    如果仅需要标准按钮或切换,并且不需要对其进行深入自定义,则使用按钮组件。ActionScript 2.0 和 3.0 按钮组件都带有内置的代码,支持状态更改。因此,您无需定义按钮状态的外观和行为。只需将组件拖到舞台上即可。

    • ActionScript 3.0 Button 组件可以进行一些自定义。您可以将按钮与其他组件绑定,并共享和显示应用程序数据。它们是内置的功能,如辅助支持。可用的组件有 ButtonRadioButtonCheckBox 组件。

    • ActionScript 2.0 按钮组件不可进行自定义。组件支持状态更改。

  2. 定义按钮状态。

    弹起帧

    用户没有与按钮进行交互时按钮显示的外观。

    滑过帧

    用户要选择按钮时按钮显示的外观。

    按下帧

    用户选中按钮时按钮显示的外观。

    点击帧

    对用户的点击有响应的区域。定义此点击帧是可选的。如果按钮比较小,或者其图形区域不是连续的,定义此帧会非常有用。

    • 在播放期间,点击帧的内容在舞台上不可见。

    • 点击帧的图形是一个实心区域,它的大小应足以包含“弹起”“按下”“滑过”帧的所有图形元素。

    • 如果没有指定点击帧,则使用“弹起”状态的图像。

      可以制作在单击或滑过(也称为脱节的图像变换)舞台的不同区域时进行响应的按钮。请将点击帧图形放在一个不同于其他按钮帧图形的位置上。

  3. 将操作与按钮关联。

    要使用户选中一个按钮时触发某事件,可以在时间轴上添加 ActionScript 代码。请将 ActionScript 代码放入与按钮相同的帧中。“代码片段”面板中有针对许多常见的按钮用途预编写的 ActionScript 3.0 代码。请参阅使用代码片段添加交互

    注意:

    ActionScript 2.0 与 ActionScript 3.0 不兼容。如果您的 Animate 版本使用 ActionScript 3.0,则无法将 ActionScript 2.0 代码粘贴到按钮中(反之亦然)。在将其他源的 ActionScript 粘贴到您的按钮中之前,请验证此版本是可兼容的。

创建具有按钮元件的按钮

要制作一个交互式按钮,可将该按钮元件的一个实例放置在舞台上,然后为该实例分配动作。请将动作分配给 FLA 文件的根时间轴。不要将动作添加到按钮元件的时间轴。要在按钮时间轴上添加动作,请改用影片剪辑按钮。

  1. 选择“编辑”>“取消全选”,或者单击舞台的空白区域以确保未选择舞台上的任何对象。

  2. 选择“插入”>“新建元件”

  3. “创建新元件”对话框中,输入一个名称。对于元件“类型”,请选择“按钮”

    Animate 会切换到元件编辑模式。 时间轴将变化以显示四个标签分别为“弹起”“指针经过”“按下”“点击”的连续帧。第一个帧(“弹起”)是一个空白关键帧。

  4. 要创建“弹起”状态的按钮图像,请在时间轴中选择“弹起”帧,然后使用绘画工具、导入一个图形或者在舞台上放置另一个元件的实例。

    您可在按钮内部使用图形元件或影片剪辑元件,但不能使用其他按钮元件。

  5. 时间轴中,单击“指针经过”帧,然后选择“插入”>“时间轴”>“关键帧”

    Animate 将插入一个关键帧,它会重复上一个“弹起”帧的内容。

  6. 在仍然选中“指针经过”帧的情况下,更改或编辑舞台上的按钮图像以创建您希望“指针经过”状态具有的外观。

  7. “按下”帧和可选的“点击”帧重复步骤 5 和 6。

  8. 要将声音分配给按钮的某个状态,请在时间轴上选中此状态的帧,然后选择“窗口”>“属性”。然后,在“属性”检查器的“声音”菜单中选择一个声音。只有已经导入的声音会出现在“声音”菜单中。

  9. 完成之后,选择“编辑”>“编辑文档”。Animate 将返回至 FLA 文件的主时间轴。要创建您在舞台上创建的按钮的实例,请将按钮元件从“库”面板拖到舞台上。

  10. 要测试按钮的功能,请使用“控制”>“测试”命令。您也可以通过选择“控制”>“启用简单按钮”,预览按钮元件在舞台上的状态。通过此命令,您无需使用“控制”>“测试”即可查看按钮元件的“弹起”、“滑过”和“按下”状态。

启用、编辑和测试按钮元件

默认情况下,Animate 将像您创建时一样,保持按钮元件为禁用状态。选中一个按钮,然后启用以查看它是否响应鼠标事件。最好是在工作时禁用这些按钮,然后启用它们以快速测试其行为。

  • 要选择某个按钮,请使用选择工具围绕按钮拖出一个选择矩形。

  • 要在舞台上启用或禁用按钮,请选择“控制”>“启用简单按钮”。此命令的作用类似在两个状态之间切换。

  • 要移动按钮,请使用箭头键。

  • 要编辑按钮,请使用“属性”检查器。如果“属性”检查器未显示,请选择“窗口”>“属性”

  • 要在创作环境中测试按钮,请选择“控制”>“启用简单按钮”

  • 要在 Flash Player 中测试按钮,请选择“控制”>“测试影片”[或“测试场景”] >“测试”。此方法是测试影片剪辑按钮的唯一方法。

  • 要在“库预览”面板中测试按钮,请在中选择按钮,然后单击“播放”

按钮疑难解答

使用下列资源了解按钮常见问题的疑难解答:

其他按钮资源

以下技术说明包含对一些特定按钮脚本的说明:

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

法律声明   |   在线隐私策略