如何使用 Animate 创建按钮

  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用传统补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色 Rig
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件:示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用视频提示点
    9. 使用 Animate 绘制和创建对象
    10. 改变线条和形状
    11. Animate CC 中的笔触、填充和渐变
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的颜色面板
    14. 使用 Animate 打开 Flash CS6 文件
    15. 在 Animate 中使用传统文本
    16. 向 Animate 中置入图稿
    17. 在 Animate 中导入的位图
    18. 3D 图形
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 绘制线条和形状
    21. 在 Animate 中使用库
    22. 导出声音
    23. 在 Animate CC 中选择对象
    24. 在 Animate 中使用 Illustrator AI 文件
    25. 使用喷涂刷工具应用图案
    26. 应用混合模式
    27. 排列对象
    28. 使用“命令”菜单自动处理任务
    29. 多语言文本
    30. 在 Animate 中使用摄像头
    31. 将 Animate 与 Adobe Scout 一起使用
    32. 使用 Fireworks 文件
    33. 图形滤镜
    34. 声音和 ActionScript
    35. 绘制首选参数
    36. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. 最佳做法 - 辅助功能指南
    12. Animate 工作区中的辅助功能
    13. 编写和管理脚本
    14. 启用自定义平台支持
    15. 自定义平台支持概述
    16. 创建辅助内容
    17. 使用自定义平台支持插件
    18. 调试 ActionScript 3.0
    19. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 导出 QuickTime 视频文件
    9. 使用 ActionScript 控制外部视频播放
    10. 最佳做法 - 移动设备内容创建技巧
    11. 最佳做法 - 视频惯例
    12. 最佳做法 - SWF 应用程序创作指南
    13. 最佳做法 - 构造 FLA 文件
    14. 在 Animate 中优化 FLA 文件的最佳做法
    15. ActionScript 发布设置
    16. 指定 Animate 的发布设置
    17. 导出放映文件
    18. 导出图像和动画 GIF
    19. HTML 发布模板
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和发布动画

创建按钮的基本步骤

  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 中测试按钮,请选择“控制”>“测试影片”[或“测试场景”] >“测试”。此方法是测试影片剪辑按钮的唯一方法。

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

按钮疑难解答

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

其他按钮资源

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

Adobe 徽标

登录到您的帐户