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

标签: Adobe Edge Animate HTML5动画 神器下载 | 发表时间:2013-03-18 14:27 | 作者:Adobe
出处:http://www.uisdc.com

Edge-Animate:Adobe新推制作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”命令,转换元素为元件。转换后的元件不仅包含原有元素的资源,而且包括其中设置的独立时间线动画和脚本。

Edge Animate 元件

Edge Animate 元件

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

Smurf Symbol

Smurf Symbol

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

Instance of Symbol

Instance of Symbol

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

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

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

Chevron Track

Chevron Track

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

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

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

Timeline Actions

Timeline Actions

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

TImeline动作脚本

TImeline动作脚本

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

3. 使用Pin生成前行动画

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

Pin按钮

Pin按钮

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

Pin生成的动画

Pin生成的动画

后续

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

优设哥向您推荐:

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

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

Open Web新功能探索 – CSS3 Animations入门

神器二合一~Sublime Text 2+Zen Coding

CSS 与 HTML5 响应式图片
无觅

相关 [adobe 神器 animate] 推荐:

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

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

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

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

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

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

Adobe Reader for iOS发布

- laguna - Solidot
tbw 写道 "Adobe也许在计算机桌面的PDF市场占统治地位,但是,Adobe基本上把iPhone和iPad等移动设备的PDF市场留给了竞争对手,如GoodReader和苹果的iBooks. Adobe在公司博客中宣布,它已推出iPhone和iPad通用的“Adobe Reader for iOS”软件.

Adobe Edge使用了jQuery

- Wick - Solidot
Adobe发布了Edge Preview 1,允许Web开发者使用HTML5、JavaScript和CSS3等Web标准,为网站开发动画和交互内容. Adobe Edge使用了开源JavaScript库jQuery. jQuery是Edge的重要组件,Edge Preview 1使用jQuery 1.4.2,后续版本将使用较新版的jQuery,Adobe发布的下一个版本预计将使用jQuery 1.6.2.

Adobe CS5.5 Master Collection破解版

- changwei - 软矿
早前Adobe全线产品升级至CS5.5,详见“Adobe CS5.5全系列产品简体中文版下载”,我一度想通过Adobe官方的下载链接下载,但不是速度太慢就是下载到一半时提示软件下载出错. 后来还好有好心网友上传安装文件至电驴. 可惜的是,目前也只有找到Adobe CS5.5 Master Collection(大师版)的电驴下载链接,未下载的朋友可以猛点击这里(此版本只有英文版)下载.

Adobe Flash runtimes路线图

- - 7Yue's Weblog
Adobe官方在今天发表了一篇非常非常重要的声明文档,是Adobe Flash runtimes路线图. 这篇路线图提供了对于Adobe Flash runtimes的开发路线概览,这篇概览的目的是提供一个清楚的指引,告知外界与社区开发者们Adobe现在是如何思考未来1到2年内核心Flash功能的发展计划.

Adobe 发布 HTML5 网页动画工具 Adobe Edge

- Joji - ITeye资讯频道
    Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具Adobe Edge,允许设计师通过HTML5、CSS和JavaScript制作网页动画,无需Flash.     Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具{Adobe Edge}

- Zen - 36氪
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具Adobe Edge

- XcessLeo - GeekPark 捕风捉影
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.