Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实

Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

Edge Commons CDN:

Edge刚刚发布第一个版本的时候,一直在考虑如何让Edge实现团队开发,当时Edge的功能还十分有限,而可实现的方法是:将做好的动画打包为一个原件导出,在Edge大框架中导入的方法。

然而近来Adobe Edge Animate官方开发技术团队(以Simon Widjaja为代表)发布了Edge Commons CDN,这是一个扩展的javascript库,旨在提高Edge开发工作效率,并且提供Edge团队合作开发的功能。

Edge Commons提供了多个版本,其中包含多个已经测试完毕的组件:Parallax Scrolling, Spotlight Overlay or Adaptive Layouts

Edge Commons 1.0.0版本(包含所有组件和功能)下载地址:

http://cdn.edgecommons.org/downloads/EdgeCommons.1.0.0.zip

以下通过一个例子讲解Edge Commons的一些功能:

效果图:

Edge工程文件框架:

 

工程文件一:

 

工程文件二:

 

测试图:

1、  点击comp-one:

 

2、  点击comp-two:对工程文件二内部显示文字进行修改

 

3、点击工程文件二,既可以控制工程文件二的动画,也可以控制主体框架的动画:

 

一、Edge Commons的加载

在Stage中添加Actions,compositionReady函数

 

1、  将Edge Commons下载到本地进行加载,这样当页面加载的时候,不用等待从服务器下载js的时间

yepnope({

         load: "lib/EdgeCommons.js",

         complete: function(){

                   //add your code here

         }       

}

);

2、  直接从服务器加载js文件

yepnope({

         load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",

         complete: function() {

                   //add your code here

         }

});

二、Edge Commons功能一:居中舞台

在加载完毕之后执行的函数complete:functions中,添加居中舞台的函数:

EC.centerStage(sym);

一句话就搞定了居中,之前没有Edge Commons的时候,还需要写css来实现居中。

三、Edge Commons功能二:加载工程

这就是Edge Commons最大的用处所在了,有了它就可以实现团队开发的可能!只需要每个人完成工程的一部分,最后通过Edge Commons整合到一起,就ok了。

EC.loadComposition("comp-one/comp-one.html",sym.getSymbol("content"));

comp-one是加载的第一个工程,content是用于显示comp-one的原件。

1、首先我们制作一个用于显示comp-one的“容器”:content,使用矩形工具制作即可,然后将之转换为原件,命名为content

 

记住content的width和height,接下来我们创建的新工程comp-one原则上是跟这个content的宽高相符的,这里width为:800,height为:380

2、新建一个工程,命名为comp-one,保存在工程目录下的comp-one目录下

 

在此,我们为comp-one添加两个text,可以将舞台背景设置为透明。

 

这时,在浏览器中预览就可以看到comp-one已经被加载进来了。

三、控制工程动画

1、制作comp-two,与comp-one相同,但是可以考虑添加一个按钮和一个动画

 

2、制作主框架控制按钮