在WordPress中嵌入Edge Animate作品HTML5动画

  次阅读 作者:智能小宝 来源:互联网 2016-01-19 11:20 我要评论(0)

Edge Animate是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro。在之后的文章中,我会逐一的介绍这款新的HTML5动画神器。这篇文章先说一说如何把Edge Animate制作的HTML5动画作品嵌入到Wordpress中。

Edge Animate是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro。在之后的文章中,我会逐一的介绍这款新的HTML5动画神器。这篇文章先说一说如何把Edge Animate制作的HTML5动画作品嵌入到Wordpress中。

一、下载Adobe Edge Animate制作工具

在本文发布的时间,Edge Animate版本为1.5,可以在Adobe云创意平台http://t.cn/zYQTdJB注册即可登录 (http://t.cn/zYHR0WT)下载。

二、下载Edge Animate示例文件

Edge示例作品项目源文件可从此下载:SpriteSheet+Symbol+Loop.zip

本文只介绍如何将其集成到Wordpress中。

三、下载并安装Wordpress插件:Edge Suite

Edge Suite是Wordpress插件,可以帮助你把以.oam格式发布的Edge Animate作品插入到Wordpress博客文章中。你可以在http://wordpress.org/extend/plugins/edge- suite/下载该插件,或者直接在Wordpress管理后台搜索Edge Suite然后添加新的插件,如下图:

安装并激活后你可以在Wordpress管理后台的边栏上看到 Edge Suite 菜单:如下图:

通过 Edge Suite ,你可以上传Edge Animate动画,然后在Post中引用。

四、创建一篇新blog并嵌入Edge Animate作品

在继续之前,你需要注册Creative Cloud,登录后下载Edge Animate工具,并下载示例文件:SpriteSheet+Symbol+Loop.zip

1. 在EDGE ANIMATE中发布.OAM格式HTML5动画

启动Edge Animate,并打开SpriteSheet+Symbol+Loop项目中的Animate项目文件:Spritesheet+Loop.an 。如下图:

Edge Animate提供了三种方式允许你发布HTML5动画,分别是Web、Animation Deployment Package(动画部署包)、iBooks/OS X。通过菜单File>Publish Settings,可以调出发布设置(Publishing Settings),如下图:

选择 Animation Deployment Package ,指定发布目录,以及文件名,点击左下角的 Publish 按钮,Edge Animate即把html5动画发布成.oam格式文件。.oam格式文件实际上是zip格式文件(你可以把其后缀改为.zip,然后解压看其内部结 构)。通常的HTML5动画要包含诸多html、js、css以及图片等资源文件,不易交换和传播。通过.oam,可以比较方便的集成在其他环境中,比如 Adobe的数字出版方案DPS,以及Wordpress中。

2. 通过EDGE SUITE上传到WORDPRESS中

进入你的Wordpress管理后台,点击边栏菜单的Edge Suite,进入Edge Suite管理界面。在该界面上,你可以上传.oam文件。如下图,上传的.oam文件会在后台自动解压,上传成功后,你可以看到解压的文件提示。

3. 创建POST,嵌入动画

现在,在Wordpress中创建一篇新的post。你会注意到,在Post编辑界面的最下方出现新的Edge Suite功能,如下图。该条目提供了你上传到WordPress中所有Edge Animate动画作品的列表,每个条目的第一个数字即其id。通过改id,我们即可把动画内容插入到post中。比如下图中显示条目为 3- LoopAnimation Edge-69072481 ,3即为其id。

在post中正文中,我们可以按照如下方式嵌入该动画:

至此,你已经成功的在blog中嵌入了HTML5动画。

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...