优界网

首页 > 教程经验 > 神器Animate教程:使用SpriteSheet创建HTML5动画

神器Animate教程:使用SpriteSheet创建HTML5动画

102

0

0

2015-04-23 19:45:50

〆色計ㄕ╄

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

在Flash动画制作中,使用SpriteSheet制作动画元素是一个常见和普遍的方法。在Edge Animate中,我们也可以利用SpriteSheet来制作HTML5动画。本文将从一个示例出发,介绍在Edge Animate中如何使用SpriteSheet

准备工作

在文章《EDGE ANIMATE:ADOBE新推制作HTML5动画可视化工具》中,可以看到一个简单的蓝精灵动画,一个蓝精灵从屏幕左侧走到右侧,又返回,然后不断重复。

示例分析

在接下来的几篇文章中,我们基于这个小例子来介绍Adobe Edge Animate的部分功能。
通过这个示例我们可以学到:

  1. 如何使用SpriteSheet在Edge Animate中制作动画:用来实现smurf(蓝精灵)的行走动作
  2. Edge Animate中元件(Symbol)的使用:用来复用蓝精灵人物
  3. 如何通过脚本控制动画的重复播映:用来实现蓝精灵不间断地行走动作和行进
  4. Edge Animate中的CSS Transform : 用来实现蓝精灵的转身

下载Adobe Edge Animate制作工具

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

下载Edge Animate示例项目文件

这个Edge作品项目源文件可从此下载:smurf+spriteSheet+Tutorial+1.zip

资源文件

本教程用到的资源文件如下:

  1. Smurf SpriteSheet

教程

1. 创建新的Edge Animate作品

启动Edge Animate,创建一个新项目。设定Stage(舞台)宽度为550px, 高度为250px。Ctrl+S保存为smurf.html。一个标准的Edge Animate项目是由一系列html,css,js和相关资源文件组成的。如下图所示:

  • Edge Animate的工程文件: .an 格式文件更像一个空壳文件或者索引文件,标明了项目的必要信息。你可以使用记事本打开.an文件了解其中具体内容。
  • edge_includes目录:该目录下是Edge制作的HTML5动画所依赖的JS类库:edge.1.5.0.min.js 和jquery-1.7.1.min.js 。
  • 其他.js文件:诸如smurf_edge.js等js文件是专门针对当前动画所生成js文件。
  • .html文件:主html文件。
Edge Animate项目文件结构

Edge Animate项目文件结构

已有0人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×