创建按钮

准备事项

当开始使用按钮时，了解以下 Flash Pro 基础知识很重要：

• 在 Flash Pro 中创建按钮有许多不同的方法。

• 按钮行为分为两部分。第一部分是滑过或单击按钮时按钮自身如何响应。第二部分是单击按钮时 Flash Pro 文件中会出现什么情况。

• 多数按钮设计为具有不同的“弹起”、“按下”和“指针经过”状态。这些状态使按钮在光标移动到其上方时和被单击时看起来不同。

• Flash Pro 中的按钮始终要求 ActionScript 执行任务。可以在“代码片段”面板中查看为许多常用按钮用法预先编写的 ActionScript 3.0 代码。请参阅使用代码片断添加交互。

• ActionScript 有 2.0 和 3.0 两个版本。这些版本彼此互不兼容。仅选择一个版本才能在任何单个 Flash Pro 文件中使用所有按钮。

• 按钮的 ActionScript 代码必须与按钮位于同一帧中。

• 请确保对如何使用 Flash 中的时间轴有一个基本的了解。这种了解对于创建要在时间轴的多个帧中显示的按钮十分重要。请参阅使用时间轴。

• 要测试按钮的功能，请使用“控制”>“测试影片”>“测试”命令。您可以通过选择“控制”>“启用简单按钮”来预览舞台上按钮元件的状态。此命令允许您无需使用“控制”>“测试影片”>“测试”即可查看按钮元件的状态。

创建按钮的方法

在 Flash Pro 中，创建按钮有多种不同的方法，每种方法在不同情况下各有优点和缺点。以下是一些最常用的方法：

• 使用按钮元件

  按钮元件包含专用的内部时间轴，允许您轻松创建视觉上不同的按钮状态：“弹起”、“按下”和“指针经过”。按钮元件还会自动更改其状态来响应鼠标光标。如果您使用的是其他类型的元件，则必须使用 ActionScript 创建不同的按钮状态。

• 使用影片剪辑元件

  使用影片剪辑元件使按钮的外观更具灵活性，因为影片剪辑几乎可以包含任何类型的内容，包括动画。影片剪辑不提供自动的“弹起”、“按下”和“指针经过”状态。

• 使用 ActionScript 3.0 Button 组件

  此组件包含预先编写的 ActionScript 3.0，能够更改状态，并可以将该组件用作标准按钮或切换按钮。有关使用此组件的详细信息，请参阅使用 Adobe ActionScript 3.0 组件中的使用 Button 组件。有关 Button 组件常见任务示例，请参阅 AS3 Button 组件快速入门。

  使用按钮组件允许将按钮绑定到其他组件上，并在应用程序中共享和显示数据。按钮组件还包含预置功能（如辅助支持）并且可以进行自定义。 按钮组件包括按钮、单选按钮和复选框。

• 使用 ActionScript 2.0 Button 组件

  此组件包含预先编写的 ActionScript 2.0，能够更改状态，并可以将该组件用作标准按钮或切换按钮。有关使用此组件的详细信息，请参阅 Button 组件。

创建具有按钮元件的按钮

实际上，按钮元件是一种特殊的四帧交互式影片剪辑。当在创建元件时选择按钮类型时，Flash Pro 会创建一个包含四帧的时间轴。前三帧显示按钮的三种可能状态：弹起、指针经过和按下；第四帧定义按钮的活动区域。按钮元件时间轴实际播放时不像普通时间轴那样以线性方式播放；它通过跳至相应的帧来响应指针移动和动作。

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

按钮元件的时间轴上的每一帧都有一个特定的功能：

• 第一帧是弹起状态，代表指针没有经过按钮时该按钮的状态。

• 第二帧是指针经过状态，代表指针滑过按钮时该按钮的外观。

• 第三帧是按下状态，代表单击按钮时该按钮的外观。

• 第四帧是点击状态，定义响应鼠标单击的物理区域。只要在 Flash Player 中播放 SWF，此区域便不可见。

创建按钮元件：

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

2. 选择“插入”>“新建元件”，或者按 Ctrl+F8 (Windows) 或 Command+F8 (Macintosh)。

3. 在“创建新元件”对话框中，输入新按钮元件的名称。对于元件“类型”，选择“按钮”。

   Flash Pro 会切换到元件编辑模式。 时间轴将更改以显示四个标签分别为“弹起”、“指针经过”、“按下”和“点击”的连续帧。第一帧（“弹起”）是一个空白关键帧。

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

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

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

   Flash Pro 将插入重复上一个“弹起”帧的内容的关键帧。

6. 仍使“指针经过”帧处于选中状态，更改或编辑舞台上的按钮图像以创建您希望“指针经过”状态具有的外观。

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

   编辑“点击”帧是可选的。在播放期间，“点击”帧的内容在舞台上不可见，但是您向其添加的图形将定义响应单击操作的按钮的物理区域。当按钮的图形元素不连续时，此行为很有帮助，图形元素不连续会使用户单击按钮比较困难。

   “点击”帧的图形必须是一个实心区域，它的大小应足以包含“弹起”、“按下”和“指针经过”帧的所有图形元素。它也可以比可见按钮大。 如果没有指定“点击”帧，“弹起”状态的图像会被用作“点击”帧。

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

8. 要为按钮状态分配声音，请在时间轴中选择与该状态对应的帧，选择“窗口”>“属性”，然后在“属性”检查器中的“声音”菜单中选择声音。“声音”菜单中仅显示已经导入的声音。

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

按钮元件教程和示例

其中一些项目显示 Flash CS3 或 CS4，但仍适用于 Flash CS5。

• 视频：创建按钮（长度：9:16，tv.adobe.com）

• 视频：Flash CS4 中的按钮元件和交互（包括部分 ActionScript 3.0，tv.adobe.com）

• 教程：Flash 中的按钮元件（包括部分 ActionScript 3.0，Kirupa.com）

• 示例：动画公文包片段 (Flash Professional) (Adobe.com)

• 示例：使用 ActionScript 3.0 创建用于打开网页的按钮 (Flashthusiast.com)

• 示例：使用 ActionScript 2.0 创建用于打开网页的按钮 (Adobe.com)

• 示例：使用 ActionScript 3.0 创建用于跳至时间轴中其他场景的按钮 (Flashthusiast.com)

• 示例：使用 ActionScript 3.0 创建同时在舞台上存在的多个按钮 (Flashthusiast.com)

• 技术说明：如何创建简单按钮 (Adobe.com)

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

默认情况下，Flash Pro 在您创建按钮元件时会将它们保持在禁用状态，以便更容易选择和使用这些按钮元件。当按钮处于禁用状态时，单击该按钮就可以选择它。当按钮处于启用状态时，它会响应您已指定的鼠标事件，就如同 SWF 文件正在播放时一样。仍然可以选择已启用的按钮。在工作时禁用按钮，可以启用按钮以快速测试当您滑过按钮或单击按钮时按钮的图形行为。

启用和禁用舞台上的按钮

 选择“控制”>“启用简单按钮”。此时在该命令的旁边会出现一个选中标记，表明按钮已被启用。再次选择该命令可禁用按钮。

舞台上的任何按钮现在都响应状态更改。当指针滑过按钮时，Flash Pro 会显示“指针经过”帧；当单击按钮的活动区域时，Flash Pro 会显示“按下”帧。

选择、移动或编辑已启用的按钮

 请执行下列操作之一：

• 使用选取工具围绕按钮拖出一个矩形选择区域。

• 使用箭头键移动按钮。

• 如果未显示属性检查器，请选择“窗口”>“属性”，在属性检查器中编辑该按钮。也可以按住 Alt 并双击按钮 (Windows) 或按住 Option 并双击按钮 (Macintosh)。

测试按钮

 请执行下列操作之一：

• 选择“控制”>“启用简单按钮”。将指针滑过已启用的按钮以对它进行测试。此命令允许您在创作环境中测试按钮。

• 在“库”面板中选择该按钮，然后在库预览窗口内单击“播放”按钮。

• 选择“控制”>“测试场景”或“控制”>“测试影片”>“测试”。此命令允许您在 Flash Player 中测试按钮。

  在 Flash Pro 创作环境中，不显示按钮元件内的影片剪辑实例。使用“测试场景”或“测试影片”可以查看。

创建影片剪辑按钮

使用影片剪辑创建按钮时，可以将更多的帧添加到按钮或添加更复杂的动画。但是，影片剪辑按钮的文件大小要大于按钮元件。

下列资源提供了使用影片剪辑元件创建按钮的逐步说明：

• 教程：影片剪辑按钮（ActionScript 3.0，Schoolofflash.com）

• 视频：创建影片剪辑按钮（ActionScript 2.0，Kirupa.com）

按钮疑难解答

以下这些资源对于解决按钮相关常见问题很有帮助：

• 技术说明：按钮动作不工作 (Adobe.com)

• 技术说明：即使按钮被其他对象覆盖，按钮热点仍处于活动状态 (Adobe.com)

• 技术说明：将动作添加到共享按钮 (Adobe.com)

• 视频：ActionScript 2.0 按钮元件疑难解答 (Kirupa.com)

其他按钮资源

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

• 技术说明：如何创建新按钮 (Adobe.com)

• 技术说明：创建高级按钮 (Adobe.com)

• 技术说明：如何创建按钮滑出动画 (Adobe.com)

• 技术说明：如何创建重置按钮 (Adobe.com)

• 技术说明：按钮如何实现在不同时间执行不同的操作？(Adobe.com)

• 技术说明：如何在 SWF 文件中制作“快退”按钮 (Adobe.com)