一、下载Adobe Edge Animate制作工具
创新互联主营依安网站建设的网络公司,主营网站建设方案,APP应用开发,依安h5小程序定制开发搭建,依安网站营销推广欢迎依安等地区企业咨询
二、下载Edge Animate示例文件
三、下载并安装Wordpress插件:Edge Suite
Edge Suite是Wordpress插件,可以帮助你把以.oam格式发布的Edge Animate作品插入到Wordpress博客文章中。你可以在下载该插件,或者直接在Wordpress管理后台搜索Edge Suite然后添加新的插件,如下图:
安装并激活后可以在Wordpress管理后台的边栏上看到“Edge Suite”菜单:如下图:
通过“Edge Suite”,可以上传Edge Animate动画,然后在Post中引用。
四、创建一篇新blog并嵌入Edge Animate作品
1、在EDGE ANIMATE中发布.OAM格式HTML5动画
启动Edge Animate,并打开SpriteSheet+Symbol+Loop项目中的Animate项目文件:Spritesheet+Loop.an 。如下图:
2、Edge Animate提供了三种方式允许你发布HTML5动画,分别是Web、Animation Deployment Package(动画部署包)、iBooks/OS X。通过菜单FilePublish Settings,可以调出发布设置(Publishing Settings),如下图:
选择“Animation Deployment Package”,指定发布目录,以及文件名,点击左下角的“Publish”按钮,Edge Animate即把html5动画发布成.oam格式文件。.oam格式文件实际上是zip格式文件(你可以把其后缀改为.zip,然后解压看其内部结构)。通常的HTML5动画要包含诸多html、js、css以及图片等资源文件,不易交换和传播。通过.oam,可以比较方便的集成在其他环境中,比如Adobe的数字出版方案DPS,以及Wordpress中。
3、通过EDGE SUITE上传到WORDPRESS中
进入Wordpress管理后台,点击边栏菜单的Edge Suite,进入Edge Suite管理界面。在该界面上,可以上传.oam文件。如下图,上传的.oam文件会在后台自动解压,上传成功后,可以看到解压的文件提示。
4、创建POST,嵌入动画。
现在,在Wordpress中创建一篇新的post。用户会注意到,在Post编辑界面的最下方出现新的Edge Suite功能,如下图。该条目提供了你上传到WordPress中所有Edge Animate动画作品的列表,每个条目的第一个数字即其id。通过改id,即可把动画内容插入到post中。比如下图中显示条目为“3-LoopAnimation Edge-69072481”,3即为其id。
5、在post中正文中,可以按照如下方式嵌入该动画:
1、首先转到需要的iframe的页面,单击添加(+)块按钮并从弹出窗口中选择HTML。
2、其次在要嵌入的页面的编辑器中插入iframe标记,找到需要要保存进度并发布页面,单击“发布”按钮。
3、最后新选择网页wordpress,点击进入到主页面,选择嵌入按钮即可。
1、使用文库或网盘的分享代码
这种方法使用与百度文库、豆丁和大多数网盘,以百度文库为例,在百度文库中找到需要嵌入的文档,点击文档左下角的“分享”按钮,选择“把文档贴到Blog、BBS或个人站”,获取分享代码,将这个代码插入wordpress文档即可完成分享。
这种方法的有点是速度快,资源不在自己站,所以不会浪费自己的流量。但缺点也很明显,向百度文库上传文档会有个审核问题,而审核权在百度的手中,审核速度不能保证,有很多东西会莫名其妙地无法通过审核,而且就算通过了审核,也有可能因为某些不可预知的原因被删除。
2.使用Wordpress插件Google-Doc-Embedder