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、制作主框架控制按钮
这种控制按钮在上一篇教程中已经介绍过，在此不再敖述
在第一个按钮“btn”添加“click”事件：
添加load composition代码：
EC.loadComposition("comp-one/comp-one.html", sym.getSymbol("content"));
复制按钮，在复制出来的按钮“btnCopy”同样添加click事件，加载第二个工程，但是添加功能：修改工程中的文字，还可以为工程添加动画控制
在加载完成之后添加function，获得工程的stage，就可以对工程进行控制，其中stage.play()播放的是加载工程的动画，而sym.play()播放的则是框架工程的动画。
var promise = EC.loadComposition("comp-two/comp-two.html", sym.getSymbol("content"));
promise.done(function(comp){
var stage = comp.getStage();
stage.$("Title").html("Edge Animate");
stage.$("Sub-title").html("Something about The Usages of Edge Commons, A Specific JS in Edge...");
stage.$("btn").click( function(){
stage.play();
});
});
原文地址：http://www.cnblogs.com/adobeedge/p/Adobe_Edge_LoadComposition.html
