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

标签: Animate SpriteSheet HTML5动画 神器下载 PS 教程 & 设计文章 | 发表时间:2013-03-13 16:21 | 作者:Adobe
出处:http://www.uisdc.com

在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项目文件结构

3. 导入Smurf SpriteSheet

点击菜单“File->Import”,或者快捷键Ctrl+I / Command+I,来导入 smurf_sprite.png到舞台。在舞台上选中导入的图片,在左边栏Position and Size栏目下,设定其X坐标值=0px,y坐标值为45px,保证第一个smurf的位置在舞台最左侧并垂直居中。如下图:

Smurf+SpriteSheet+Sample1

Smurf+SpriteSheet+Sample1

4. 使用Clip切割Spritesheet,显示单一Sprite元素

我们导入的蓝精灵Spritesheet是256*256大小的透明背景png图片,一共描绘了16个蓝精灵行走的姿态。通过序列播放这16个行走姿态,就可以制作一个完整蓝精灵行走动画。
首先,要在舞台上只显示一个Sprite元素,比如最左上角的第一个蓝精灵。在Edge Animate左侧属性面板中,倒数第二个栏目是clip子面板。顾名思义,clip功能区可以帮助我们“切割”舞台上的元素,比如图片。该功能区实际上利用了 CSS的clip属性

点击clip子面板的开关按钮,可以激活clip功能。使用鼠标,可以在clip属性设定面板上的上、下、左、右属性值上滑动,你可以在舞台上实时看到“切割”的图片情况。如下图。 在本例中,请设定clip的top,right,bottom,left属性值分别为0, 128,128,0。

Smurf+SpriteSheet+Sample+Clip

Smurf+SpriteSheet+Sample+Clip

5. 创建16个Keyframe,实现行走动作

接下来,我们创建十六个帧来完成蓝精灵行走的动作。

1) 调整帧间隔

在舞台下方的时间轴上,Edge Animate用竖线网格标记了每帧间距。在Smurf行走动画中,我们希望在1毫秒的时间左右完成一个行走动作,即16帧。因此,我们需要通过时间轴下方的Gird Size图标调整时间轴为15帧/秒。如下图:

Smurf+SpriteSheet+GridSize

Smurf+SpriteSheet+GridSize

2) 激活“Auto-Keyframe Mode (自动创建帧)”

Edge Animate有三个非常重要的按钮分别开启Auto-Keyframe Mode(自动创建关键帧)、Auto-Transition Mode和Toggle Pin(大头针)。图标如下图:

Edge Animate Buttons

Edge Animate Buttons

本例中,我们将启用Auto-Keyframe Mode,而关闭Auto-Transition Mode和Pin。在启用Auto-Keyframe Mode的情况下,每当我们在新的一帧修改舞台中元素的属性,Edge Animate会自动在此创建关键帧。由于我们关闭了Auto-Transition Mode,因此Edge Animate将不会自动在关键帧之间创建过渡效果。设定的效果如下图:

Smurf+SpriteSheet+Sample3

Smurf+SpriteSheet+Sample3

3) 创建第一个关键帧

在时间轴上,把播放头移到0:00秒位置,选中舞台中的蓝精灵,在左边属性面板中的Image子面板下,确认Background Image的x和y属性值为0,然后点击x和y属性边上的小菱形符号(当鼠标移到该菱形符号时,其变为黄色,并显示tips:“Add Keyframe for Background Position”),此时Edge Animate将在时间轴的0:00秒出创建第一个关键帧。如下图:

Smurf+Spritesheet+Sample4

Smurf+Spritesheet+Sample4

4) 创建2-16个关键帧

在时间轴上,移动播放头到第二帧(00:00:066),确认已经激活“Auto-Keyframe Mode”(小钟图标显示为红色),并已关闭Pin和Auto-Transition Mode。选中舞台中的蓝精灵,然后在左边栏Image面板中,修改Background Image的x属性为-128,y保持为0。实际上,我们把SpriteSheet图片向左移动了128像素,来显示第一排第二个Sprite。此时,你应该看到,在时间轴上,Edge Animate自动创建了第二个关键帧。如下图:

Smurf+Spritesheet+Sample5

Smurf+Spritesheet+Sample5

依次类推,分别将播放头移动到第三到第16帧,并通过设定background image的x和y属性值,来顺序显示SpriteSheet中其他的Sprite。1到16帧的background image属性值如下:

1-16关键帧属性值

1-16关键帧属性值

创建完成后,如下图:

16个关键帧

16个关键帧

此时,你可以来回移动播放头,看到舞台上的蓝精灵行走的动画效果。

6.预览

使用快捷键Ctrl+Enter/Command+Enter,可以启动默认浏览器看起运行的效果.

后续

现在,蓝精灵已经实现了行走动作,但是还没有完成行进,还不能移动。而且,行走动作只播放1秒钟(不能循环)即停止了。我们在将在下面的教程中逐步完善。

优设哥向您推荐:

Edge Animate:Adobe新推制作HTML5动画可视化工具

50个PS究极の奥义字体设计教程

设计中的十个基本配色法则

CSS 与 HTML5 响应式图片

一张图读懂HTML5
无觅

相关 [神器 animate spritesheet] 推荐:

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

- - 优设(UISDC)
在Flash动画制作中,使用SpriteSheet制作动画元素是一个常见和普遍的方法. 在Edge Animate中,我们也可以利用SpriteSheet来制作HTML5动画. 本文将从一个示例出发,介绍在Edge Animate中如何使用SpriteSheet. 在文章 《EDGE ANIMATE:ADOBE新推制作HTML5动画可视化工具》中,可以看到一个简单的蓝精灵动画,一个蓝精灵从屏幕左侧走到右侧,又返回,然后不断重复.

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

- - 优设(UISDC)
久等了,上集我们制作了一个具有行走动作的蓝精灵动画,本集我们来为蓝精灵实现往返走动的效果. Symbol,即元件,是动画制作中常用的概念. 通过Symbol我们可以封装独立的动画元素,便于管理和重用. 脚本,是动画制作中另一个重要的概念. 在HTML5动画制作中,脚本即JavaScript脚本,通过脚本我们可以响应动画事件,实现交互,更自由的操控动画元素,比如元件动画的重复播放.

[转]jquery自定义动画animate()

- - dxh_0829的专栏
在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行. 但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash. 说的取代是网页特效部分,而不是动画. 网页特效比如:渐变菜单、渐进显示、图片轮播等;而动画比如:故事情节广告、MV 等等.

神器valgrind

- - 斯巴达第二季
其实早在2006年我就用过valgrind,但当时valgrind不能观测daemon的内存泄漏问题,所以后来渐渐用得少了. 今天又遇到一个内存泄漏问题,程序颇大,手工调试不太现实了,所以又想到了valgrind,毕竟在这7年间,valgrind又强大了不少. 查了一下,它已经可以检测daemon进程了,方法在 这里 对应的官方文档在 这里 其中"monitor leak_check full reachable any"相当于设置gdb的breakpoint.

JavaScript TDD 神器jasmine

- - JavaScript - Web前端 - ITeye博客
今天参加了圣路易斯本地的一个meet up group. 演讲主题是javascript 的tdd. 演讲者展示了jasmine的功能,真的是神器啊. 以下是jasmine的网址:. jasmine的syntax 极其简单:. 还有很多功能还在探索中,在写2500行的js之前知道这个就好了. 已有 0 人发表留言,猛击->> 这里<<-参与讨论.

前端神器 Sublime Text 2

- - 博客园_首页
  博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就好. 这几天突然心血来潮,下了个试了下,结果. 结果博主毫无节操的抛弃了notepad++. 下面根据博主这几天的使用心得,来介绍下这款前端神器,介于使用时间很短,有些说的不妥的地方还望各位看官海涵.

Alfred神器初体验

- - Onlycjeg's Blog
之前一直找不到好用的快捷工具,偶然想起有朋友介绍alfred,今天测试了下,确实神器啊,感觉mac下用的最好用的工具了,没有之一;. 安装完后,一打开都是英文,顿时头都大了,不过静下心来看,还是勉强能了解大概意思的;. 提示开机启动、以及如何调用Alfred,我这里选择按两下command,因为这个功能,本来是用QQ的Swiftly功能的,但是企鹅的做的不是特别专业,虽然功能集成在QQ里面,非常赞;于是果断关闭QQ的Swiftly功能,使用2下command调出可爱的alfred功能.

myMemoir:电子书制作神器

- Smilebox - 雷锋网
连线杂志主编克里斯·安德森直言不讳地宣称从iPad看到了电子出版的未来. iPad上一款名为myMemoir的应用更加让我相信电子出版将创造新的奇迹. 还停留在用智能设备看电子出版物的阶段吗. 赶紧试试这款强大的应用吧,简单操作几下,它就能让你的角色从读者变成作者. 只要1.99美金就能一圆你的作家梦,是不是很划算.

28个Unix/Linux的命令行神器

- - 酷壳 - CoolShell.cn
下面是 Kristóf Kovács收集的28个Unix/Linux下的28个命令行下的工具( 原文链接),有一些是大家熟悉的,有一些是非常有用的,有一些是不为人知的. 这些工具都非常不错,希望每个人都知道. 本篇文章还在 Hacker News上被讨论,你可以过去看看. 我以作者的原文中加入了官网链接和一些说明.

芒果圈:芒果粉必备神器

- - 天涯海阁|Web2.0Share
芒果圈是湖南卫视推出的一款移动APP,通过此应用可轻松参与芒果台的实时互动、节目竞猜和投票, 还可以参加幸运摇号、转盘、芒果机等各类游戏. Watsonxu语:在去年大量 社交电视应用出现的时候,就提到卫士媒体应该迟早也会推出自己的社交电视应用,从逻辑的角度非常合理,当然在我印象中湖南卫视其实在移动互联网这一块也做了不少的探索,从最早的聊天交友到后来的 在线问答社区,也在一步一步摸索最适合的自己的移动应用之路.