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

Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实的更多相关文章

  1. edge animate从入门到放弃

    一.什么是edge animate edge animate这是一款方便网页设计师和前端工程师实现动画交互的一款工具,虽然是adobe出品的,但是属于Flash和H5时代的过渡产物,这一款产品在201 ...

  2. Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频

    Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...

  3. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  4. Adobe Edge Animate CC 不再开发更新!

    Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...

  5. Adobe Edge Animate –EdgeCommons Log和全局变量设置功能

    Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...

  6. Adobe Edge Animate –使用EdgeCommons加载和播放音频

    Adobe Edge Animate –使用EdgeCommons加载和播放音频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在Edge中,可以new一 ...

  7. Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换

    Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...

  8. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  9. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

随机推荐

  1. Spark SQL概念学习系列之Spark生态之Spark SQL(七)

    具体,见

  2. Spark RDD概念学习系列之Spark的算子的作用(十四)

    Spark的算子的作用 首先,关于spark算子的分类,详细见 http://www.cnblogs.com/zlslch/p/5723857.html 1.Transformation 变换/转换算 ...

  3. linux下开发c++第二弹--helloworld与makefile

    一:hello world sudo vim hello.cpp 输入  g++ -o hello hello.cpp  获得hello 输入  ./hello 运行,显示结果hello world! ...

  4. Servlet学习笔记(1)--第一个servlet&&三种状态对象(cookie,session,application)&&Servlet的生命周期

    servlet的404错误困扰了两天,各种方法都试过了,翻书逛论坛终于把问题解决了,写此博客来纪念自己的第一个servlet经历. 下面我会将自己的编写第一个servlet的详细过程提供给初学者,大神 ...

  5. Java设计模式系列之责任链模式

    责任链模式 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道 ...

  6. Android实例-读取设备联系人(XE8+小米2)

    相关资料: http://www.colabug.com/thread-1071065-1-1.html 结果: 1.将权限打开Read contacts设置为True,不然报图一的错误. 2.搜索空 ...

  7. Gradle – Spring 4 MVC Hello World Example

    In this tutorial, we will show you a Gradle + Spring 4 MVC, Hello World Example (JSP view), XML conf ...

  8. STC89C52RC片内资源介绍

    STC89C52RC片内有:用户应用程序区(AP)8K,地址0000h-1FFFh. 数据flash区(EEPROM)4K,2000h-2FFFh ISP引导区空间1K/2k/4k. RAM 512B ...

  9. ASP防注入

    因为在改进公司的一套ASP代码,所以考虑了一下防注入的问题. 参考了网上的几处代码,进行了修改和整合,都转换成小写再处理. 还考虑了script注入. 代码如下: 'Asp防注入代码 SQL_injd ...

  10. JSF教程(10)——生命周期之Update Model Values Phase

    在整个JSF生命周期中经历了取值.验证的阶段终于从request中拿到合理的值,以下就是在本阶段给相应的服务端对象(ManageBean)赋值了.JSF实现仅仅是去更新和input组件中value属性 ...