adobe神器Animate教程:创建HTML5动画(二)

久等了,上集我们制作了一个具有行走动作的蓝精灵动画,本集我们来为蓝精灵实现往返走动的效果。

Symbol,即元件,是动画制作中常用的概念。通过Symbol我们可以封装独立的动画元素,便于管理和重用。脚本,是动画制作中另一个重要的概念。在HTML5动画制作中,脚本即JavaScript脚本,通过脚本我们可以响应动画事件,实现交互,更自由的操控动画元素,比如元件动画的重复播放。

准备工作

在教程《神器ANIMATE教程:使用SPRITESHEET创建HTML5动画》中,我们制作了一个具有行走动作的蓝精灵动画。

在本教程中,我们来为蓝精灵实现往返走动的效果。

下载Adobe Edge Animate制作工具

在本教程发布的时间,Edge Animate版本为1.5,可以在Adobe云创意平台上免费下载。 您只需要在注册地址注册即可登录下载。

下载Edge Animate示例项目文件

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

资源文件

资源文件如下:

  1. Smurf SpriteSheet

教程

1. 生成Symbol

启动Edge Animate,打开/a>smurf+spriteSheet+Tutorial+1.zip解压后其中的smurf.an文件。
在舞台上选择蓝精灵元素(或者可以在右上角的Elements面板中选择smurf_sprite),点击右键,点击“Convert to Symbol”命令,转换元素为元件。转换后的元件不仅包含原有元素的资源,而且包括其中设置的独立时间线动画和脚本。

adobe神器Animate教程:创建HTML5动画(二)

Edge Animate 元件

在弹出的“Create Symbol”提示框中输入新的元件名称,比如“Smurf”。默认选中Autoplay Timeline,点击OK。此时,你可以在右边Lirary面板的Symbols子面板中,看到生成的新的Smurf元件。此时,舞台上的原有Smurf_Sprite元素也变为名为“Smurf”的元素,时间轴上也对应做出修改。如下图:

adobe神器Animate教程:创建HTML5动画(二)

Smurf Symbol

元件是一个可复用的对象,在舞台上,你可以从Library的元件面板中,拖拽元件到舞台上来创建多个新的元件实例。比如,我们可以把现在舞台上的蓝精灵删除,然后在元件面板中拖拽Smurf元件到舞台上。每当你拖拽Smurf元件到舞台上,Animate都会为你生成一个新的Smurf实例,并为新的实力元素自动命名。
如下图:

adobe神器Animate教程:创建HTML5动画(二)

Instance of Symbol

现在,在舞台中只留下一个蓝精灵元件实例,并在Elements面板中命名其为SmurfBoy(双击元素面板中名称即可重新命名)。

2. 使用脚本控制元件动画重复播放

在时间轴上,Animate自动在0-1秒中为SmurfBoy元素生成了“人字条轨迹”,即Chevron track。这意味着,SmurfBoy会自动播放Smurf元件中的时间线动画。

adobe神器Animate教程:创建HTML5动画(二)

Chevron Track

通过Ctrl+Enter/Cmd+Enter,可以调用浏览器查看动画运行状态。蓝精灵走了1秒就自动停止了。下面我们让蓝精灵的行走动作能够不断重复。

在元件面板中,选择Smurf点击右键,选择“Edit”来编辑Smurf元件,进入Smurf元件编辑状态。此时,舞台面板的标签显示为“Stage/Smurf”。

Edge Animate允许设计师在时间线中嵌入JavaScript脚本,来提供更精确的动画控制和交互能力。把鼠标移至时间线“Actions”条目左侧的大括号图标,会显示“Open Timeline Actions”提示。如下图:

adobe神器Animate教程:创建HTML5动画(二)

Timeline Actions

点击{}图标,并选择“Complete”事件,来为Smurf元件的Complete事件添加动作脚本。Complete事件意味着时间线动画播放完毕。我们通过添加脚本来让Smurf元件在时间线动画播放完毕时能够从0秒开始重新播放,来实现动画的反复播放。点击动作脚本窗口右侧的“PlayFrom”脚本按钮,并修改插入的脚本为sym.play(0)。如下图:

adobe神器Animate教程:创建HTML5动画(二)

TImeline动作脚本

关闭脚本窗口,点击“Stage/Smurf”舞台标题的“Stage”,回到舞台时间线编辑状态。通过ctrl+Enter/cmd+Enter运行动画,可以看到蓝精灵的行走动作可以不断播放。

3. 使用Pin生成前行动画

下面,我们为蓝精灵加入行进动画效果。在Edge Animate中,提供了多种方式来生成关键帧和过渡。这里,我们来使用Pin按钮生成关键帧和期间的过渡。激活“Auto-Keyframe Mode”。并把播放头移至0:00秒。
“Pin”按钮的作用是在时间轴上把当前状态(动画的属性值)“钉”在时间轴上当前的播放头位置。现在,我们点击Pin按钮,可以看到在时间轴的播放头所在位置0:00秒,生成了一个蓝色的Pin标志。如下图:

adobe神器Animate教程:创建HTML5动画(二)

Pin按钮

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

adobe神器Animate教程:创建HTML5动画(二)

Pin生成的动画

后续

现在,蓝精灵已经实现了行进。我们将在下面的教程中加入转身行进和背景等其他效果。
本教程完成后的项目可以在此下载:http://www.donglongfei.com/download/smurf+spriteSheet+Tutorial+2.zip

点赞 1
收藏 5

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。

收藏