html5动画教程-Adobe Artifact Animate教程：创建HTML5动画（二）

已经很久了。 在上一集中，我们制作了一个带有行走动作的蓝精灵动画。 本期节目我们将体会一下来回行走对蓝精灵的疗效。

符号，即装置，是动画制作中常用的概念。 通过Symbol，我们可以封装独立的动画元素，方便管理和复用。 脚本是动画制作中的另一个重要概念。 在HTML5动画制作中，脚本就是JavaScript脚本。 通过脚本，我们可以应对动画风暴，实现交互，更自由地操控动画元素，比如设备动画的重复播放。

准备

在《Artifact ANIMATE教程：使用SPRITESHEET创建HTML5动画》教程中，我们制作了一个带有行走动作的Smurf动画。

在本教程中，我们将实现蓝精灵的来回效果。

下载 Adob​​e Edge Animate Maker

在本教程发布时，Edge Animate 1.5 版可在 Adob​​e Cloud Creative Platform 上免费下载。 您只需在注册地址注册即可登录并下载。

下载 Edge Animate 示例项目文件

本教程将在《Artifact ANIMATE教程：使用SPRITESHEET创建HTML5动画》的基础上继续，需要下载项目文件smurf+spriteSheet+Tutorial+1.zip。

资源

资源文件如下：

Smurf SpriteSheet 教程 1. 生成符号

启动Edge Animatehtml5动画教程，解压后打开/a>smurf+spriteSheet+Tutorial+1.zip中的smurf.an文件。

选择舞台上的Smurf元素（或者在右上角的Elements面板中选择smurf_sprite），单击鼠标右键，然后单击“转换为符号”命令，将元素转换为设备。 转换后的设备不仅包含原始元素的资源，还包含其中设置的独立时间轴动画和脚本。

边缘动画组件

在弹出的“创建符号”提示框中输入新的设备名称，例如“Smurf”。 默认选择“自动播放时间线”，单击“确定”。 此时，您可以在左侧 Lirary 面板的 Symbols 子面板中看到生成的新 Smurf 设备。 此时html5动画教程，舞台上原来的Smurf_Sprite元素也变成了名为“Smurf”的元素，并且在时间轴上也做了相应的改变。 如下所示：

蓝精灵符号

组件是可重用的对象。 在舞台上，您可以将组件从库的组件面板拖到舞台上以创建多个新的组件实例。 例如，我们可以删除当前舞台上的蓝精灵，然后在设备面板中将蓝精灵设备拖放到舞台上。 每当您将 Smurf 组件拖放到舞台上时，Animate 都会为您生成一个新的 Smurf 实例，并手动命名新的能量元素。

如下所示：

符号实例

现在，在舞台上仅保留一个 Smurf 设备实例，并在“元素”面板中将其命名为“SmurfBoy”（双击元素面板中的名称进行重命名）。

2.使用脚本控制设备动画重复播放

在时间轴上，Animate 在 0-1 秒内手动为 SmurfBoy 元素生成了“人类纸条轨迹”，即 Chevron 轨迹。 这意味着SmurfBoy将手动播放Smurf设备中的时间线动画。

雪佛龙轨道

通过Ctrl+Enter/Cmd+Enter可以调用浏览器查看动画运行状态。 蓝精灵走了一秒钟，然后手动停下来。 接下来，让我们不断重复蓝精灵的行走动作。

在设备面板中，选择Smurf，单击右键，选择“编辑”，即可编辑Smurf设备，并进入Smurf设备编辑状态。 舞台面板的标签现在显示为“Stage/Smurf”。

Edge Animate允许设计者在时间轴中嵌入JavaScript脚本，以提供更精确的动画控制和交互功能。 将键盘移至时间轴动作条目右侧的大括号图标以显示“打开时间轴动作”提示。 如下所示：

时间轴行动

单击 {} 图标并选择“Complete”事件，为 Smurf 设备的 Complete 事件添加操作脚本。 完整风暴意味着时间线动画已经播放完毕。 我们添加一个脚本，让Smurf设备在时间线动画结束时从0秒处重新启动，从而实现动画的重复播放。 单击 ActionScript 窗口左侧的“PlayFrom”脚本按钮，将插入的脚本更改为 sym.play(0)。 如下所示：

时间线动作脚本

关闭脚本窗口，单击“Stage/Smurf”舞台标题中的“Stage”，返回舞台时间轴编辑状态。 通过ctrl+Enter/cmd+Enter运行动画，可以看到蓝精灵的行走动作可以连续播放。

3.使用Pin生成前进动画

接下来，我们为蓝精灵添加行进动画效果。 在 Edge Animate 中，提供了多种方法来生成关键帧和过渡。 在这里，我们使用“固定”按钮来生成关键帧和关键帧期间的过渡。 激活“自动关键帧模式”。 并将播放头移至 0:00 秒。

“固定”按钮的作用是将当前状态（动画的属性值）“固定”到时间轴上的当前播放头位置。 现在，当我们单击“Pin”按钮时，我们可以看到在时间轴上播放头所在的 0:00 秒处生成了一个红色的“Pin”标记。 如下所示：

固定按钮

接下来，将播放头移动到0:03秒，并将舞台上的蓝精灵水平连接到舞台的最右侧，例如X=418px。 可以看到，在连接过程中，Edge Animate在0:03秒的位置自动生成了一个新的关键帧，并在0:00和0:03秒的两个关键帧之间手动生成了补间动画。 如下所示：

Pin 生成的动漫

跟进

现在，蓝精灵已经继续前进。 我们将在下面的教程中添加其他效果，例如转弯和背景。

本教程的完整项目可以在这里下载：+spriteSheet+Tutorial+2.zip