如何在WordPress中嵌入Edge Animate作品

一、下载Adobe Edge Animate制作工具

成都创新互联公司是一家专业提供淮滨企业网站建设,专注与网站设计、网站制作、H5网站设计、小程序制作等业务。10年已为淮滨众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

二、下载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中正文中，可以按照如下方式嵌入该动画：

有哪些好看的极简的 WordPress 主题

好看的主题建议用国外的，人家都是专业设计师设计的，不过使用复杂，有些人连怎么使用都不知道。我也承认国人有个别好的作品

将全景图插入到wordpress制作的网页中

方法一、将网页上传到网站目录下再通过链接来调用这个独立的页面。将连接添加至菜单(再将菜单放在网站导航上)，或者放在侧栏的小工具，就可以在网站页面进行访问了。

注意事项：

1.要保证下载下来的网页可以打开，注意有无图片调用的文件夹，保证上传文件的完整性。

2.网页的编码(wordpress一般为UTF-8,国内网站多为GBK)是否和网站相同，如果不同就需要转码。用网页编辑小工具就可以进行转码(只需要另存的时候选择对应的编码就行了)，这里推荐EditPlus。

3.在用EditPlus打开另存换编码的过程中，希望大家研究一下代码，更改该一下标题和一些文字信息，让它更符合自己的网站。

方面二、将网页上传到网站目录下，在wordpress文章页面编辑时通过代码(如下文红色代码)来调用这个独立的页面。

div class="title"h1电声设计(标题)/h1nbsp;/divdiv id="ff_content" class="newstext"iframe id="content01" src="/文件夹名称/文件名.html" name="content01" width="100%" height="560(调用页面的高度)" frameborder="0" scrolling="no"/iframe/div

注意事项：

1.height="560(调用页面的高度)"这个需要反复调试，最终确认合适的高度。

2.scrolling="no"表示不自适应（固定值），可以选"yes"一直自适应，"auto"自动自适应（建议）其实，这种方法还可以用来调用别人的网页，将src="你要调用的页面网址" 。

当前文章：wordpress作品 wordpress作品展示
文章起源：http://kswjz.com/article/dddeppi.html