Adobe edge animate制作HTML5动画可视化工具(一)

HTML5网页动画工具:Adobe Edge

2011/08/02 · HTML5 ·
HTML5

Adobe刚刚发布了一个新的工具{Adobe
Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。

Adboe
Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、
HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。产品界面如下。

Flash在网页动画领域仍占统治地位,Adobe此举显然是为了在巩固Flash地位的同时,紧跟潮流,不把鸡蛋放在同一个篮子里。穷则思变,这是好事。

从去年4月份起Adobe针对HTML5发布了一系列功能和产品,其中比较引人注目的一款就是把Flash变成HTML5的转换工具Wallaby。

图片 1

Adobe认为HTML5对公司来说是一个机会,并且Flash并非没有机会,两者是互补关系。比如在3D游戏方面Flash仍是不可或缺的工具。另外,某些HTML5在各个浏览器上的体验并不一致。

目前Adobe
Edge提供的是公测预览版产品,你可以在这里下载(需注册Adobe
ID才能下载),1.0版产品将在明年发布。

原文:36kr

赞 收藏
评论

图片 2

  Edge Animate for
mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash
Pro。在之后的文章中,我会逐一的介绍这款新的HTML5动画神器。这篇文章先说一说如何把Edge
Animate制作的HTML5动画作品嵌入到Wordpress中。
  Adobe Edge
Animate的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上,将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果。正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下:

 

  一、HTML5全栈开发工具之Adobe
Dreamweaver

图片 3

  首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver
软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe
CS Live 在线服务 Adobe BrowserLab
集成,您能以可视方式或直接在代码中进行设计,使用内容管理系统开发页面并实现精确的浏览器兼容性测试。

 

  Adobe Dreamweaver CS5版本通过Adobe HTML5
Pack这一扩展,用户可以更轻松地创建和优化其作品。 Adobe
HTML5开发工具Pack包括标识HTML5 和 CSS3 功能的新代码,从而使Dreamweaver
用户能够方便地使用HTML5标记。HTML5开发工具扩展包还更新和改进了WebKit引擎以支持Dreamweaver
CS5
实时视图中的视频和音频。用户利用CSS3新功能能够更方便地设计多屏网页,并且可以预览在多种浏览器和设备之间进行渲染的过程。

Adobe edge animate CC功能:

  而最新版本的Adobe Dreamweaver
CS5.5的突出新特点就是直接提供了对HTML5的支持:

1.精确的动画。
2.直觉化的使用者界面。
3.绘图和文字工具。
4.移动路径。
5.可重复使用的符号。

  通过 CSS 面板设置样式,该面板经过更新可支持新的 CSS3
规则。设计视图现在支持媒体查询,在您调整屏幕尺寸的同时可应用不同的样式。使用
HTML5 进行前瞻性的编码,同时提供代码提示和设计视图渲染支持。

mac下载地址:

  二、HTML5全栈开发开发工具之Adobe Edge Preview

图片 4Adobe edge
animate

  Adobe公司考虑到,当HTML5成为标准网页的时候,开发者们仍然将会在Adobe的软件上进行开发。所以推出一种新型的网页开发工具Edge,以帮助开发者在HTML5网页上创造更复杂的动画和互动效果。

window下载地址:

  Adobe网络专家组产品经理德汶·费南德(Devin
Fernandez)称,随着HTML应用与开发越来越丰富,曾经通过Flash才能实现的工作,现在可通过Adobe
Edge轻松完成。Edge支持事件连发操作,支持和元素,支持svg/png/gif/jpg图片,支持圆角矩形以及更多形状,支持元素与2D图形界面,支持SVG动画。

图片 5Adobe edge
animate

  目前来看,Edge似乎和Flash运行在一个相似的界面上。Edge的时间轴和其他工具都位于和目前版本Flash的相同位置。但是界面背后,Edge是非常不同的。它是代替Adobe动作脚本形式的,动画效果创造基于JSON编码,所以代替动作脚本,动画效果是编码在html和javascript上,并运行在所有现代桌面浏览器和所有移动设备浏览器上,比如Safari浏览器。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website