如何使用 Adobe Animate 创建按钮

上次更新日期: 2023年5月24日

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

创建基本按钮

选择“插入”>“新建元件”,或者按Control+F8 (Windows)或Command+F8 (Mac OS)。
注意:在Flash3及更低版本中,取消选择舞台上的所有内容,然后选择“插入”>“创建元件”。

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

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

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

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

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

在“编辑影片”模式下,选择上述步骤 7 中创建的按钮实例。
选择“窗口”>“动作”以打开“动作”面板。
在面板左侧的工具箱列表中,单击“基本动作”类别以显示基本动作。
要分配动作,请执行以下操作之一:
  • 双击“基本动作”类别中的动作。
  • 将左侧“基本动作”类别中的动作拖动到面板右侧的“动作”列表中。
  • 单击“添加”(+) 按钮并从弹出菜单中选择动作。
  • 使用键盘快捷键。

如果选择的动作有任何关联参数,这些参数会显示在“动作”面板底部的“参数”窗格中。 (如果未显示“参数”窗格,请单击面板右下角的小三角形。) 选择或键入该动作对应的参数。 例如,下面显示的 gotoAndPlay 动作包含三个参数:SceneTypeFrameGoto and Play 的选项。

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

在“编辑影片”模式下,选择上述步骤 7 中创建的按钮实例。
确保从“控制”菜单取消选中“启用按钮”。

双击该按钮以打开“实例属性”对话框。
注意:在Flash2中,此对话框是“链接属性:按钮”对话框。

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

注意:在Flash2中,使用“链接属性:按钮”对话框中的“操作”弹出菜单分配操作。 一个按钮只能分配一个动作。

确保“控制”菜单中的“启用按钮”已切换回打开状态(旁边有一个对勾标记)。

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

创建高级按钮

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

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

将“公用库”中的按钮放置在舞台上。 编辑该按钮。

高亮显示按钮“点击”状态中的帧,然后插入关键帧。 在影片中测试此行为。

大幅调整“点击”状态中对象的大小并进行测试。

删除“点击”状态中的关键帧,然后测试该按钮。

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

不可见按钮

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

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

具有动画状态的按钮

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

为希望具有动画效果的每个按钮状态创建影片剪辑。
创建按钮。
将影片剪辑放置在按钮状态中以制成动画。

将按钮放置在舞台上。 
注意:无法在Animate编辑器中测试影片剪辑。 请选择“控制”>“测试影片”或导出为 SWF 文件以进行测试。

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

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

其他信息

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

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