Adobe Edge Animate –使用css制作菜单 - Adobe Edge - 推酷
Adobe Edge Animate –使用css制作菜单 - Adobe Edge
Adobe Edge Animate –使用css制作菜单
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。
下拉菜单：
使用css制作菜单与用Edge作图工具制作菜单是两个思路两种方法，css的方法纯粹使用代码控制菜单的艺术效果。
一、制作菜单容器
使用矩形工具，创建一个菜单显示区域，命名为menucontainer，转换为原件，命名为menu，完成菜单容器的制作，接下来菜单将显示在这个原件中。
二、制作点击菜单后显示内容的容器
同样使用矩形工具，创建内容显示区域，转换为原件，并且命名为content，完成内容显示容器的制作，点击菜单之后，加载的相关内容将显示在这个原件中。
三、制作菜单的css文件
菜单的css文件可自己design，也可以用已有的css文件，制作完成后，将之命名为menu.css，保存在工程目录下的style文件夹中，以便在Edge中yepnope。
四、加载css文件和Edge commons，定义菜单项目
在stage添加Actions：compositionReady
yepnope({load: &style/menu.css&});&&&&&&&&& //加载css文件
&&&&&&&& load: &http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js&,&& //也可以下载到本地加载，加载速度更快
&&&&&&&& complete: function(){
&&&&&&&&&&&&&&&&&& EC.centerStage(sym);
&&&&&&&&&&&&&&&&&& EC.loadComposition(&composition/home/home.html&,sym.getSymbol(&content&));
&&&&&&&&&&&&&&&&&& //loadPage函数用于加载工程文件或者网页，url参数用于传递地址
&&&&&&&&&&&&&&&&&& var loadPage = function(url){
&&&&&&&&&&&&&&&&&&&&&&&&&&& console.log(&loadPage: &,url);
&&&&&&&&&&&&&&&&&&&&&&&&&&& EC.loadComposition(url, sym.getSymbol(&content&));
&&&&&&&&&&&&&&&&&& };
&&&&&&&&&&&&&&&&&& // &dataProvider& 定义了菜单项，可根据需要增删项目和修改项目名称及链接地址
&&&&&&&&&&&&&&&&&& var config = {
&&&&&&&&&&&&&&&&&&&&&&&&&&& dataProvider: [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {label: &Home&, onClick: function(){loadPage(&composition/home/home.html&)}},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {label: &Development&, onClick: function(){loadPage(&composition/development/android.html&)},items:[
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {label: &Android&, onClick: function(){loadPage(&composition/development/android.html&)}},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {label: &iOS&, onClick: function(){loadPage(&composition/development/ios.html&)}},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ]},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {label: &About&, onClick: function(){loadPage(&composition/about/about.html&)},items:[
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& {label: &Author&, onClick: function(){sym.play()}}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ]},
&&&&&&&&&&&&&&&&&&&&&&&&&&& ]
&&&&&&&&&&&&&&&&&& };
&&&&&&&&&&&&&&&&&& //开始设置菜单，对象即为自定义的容器menu
&&&&&&&&&&&&&&&&&& sym.getSymbol(&menu&).getVariable(&setup&)(config);
&&&&&&&& }
五、在menu容器内，添加creationComplete函数
&&&&&&&& //先将菜单透明度降低，加载菜单时间较长
&&&&&&&& sym.getSymbolElement().css(&opacity&,&0.3&);
&&&&&&&& //开始设置菜单
&&&&&&&& sym.setVariable(&setup&, function(config){
&&&&&&&&&&&&&&&&&& var menuContainer = sym.$(&menucontainer&);
&&&&&&&&&&&&&&&&&& var tplOuterMenu = ''
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&div id = &nestedmenu&&'
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&& &ul&&/ul&'
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&/div&';
&&&&&&&&&&&&&&&&&& var tplLevel1_withoutSubItems = '&li&&a&&div style=&padding: 0 20&&#LABEL#&/div&&/a&&/li&';
&&&&&&&&&&&&&&&&&& var tplLevel1_withSubItems = ''
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&li class=&has-sub &&'
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&& &a&&div style=&padding: 0 20&&#LABEL#&/div&&/a&'
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&& &ul&&/ul&'
&&&&&&&&&&&&&&&&&&&&&&&&&&& +'&/li&';
&&&&&&&&&&&&&&&&&& var tplLevel2 = '&li class=&has-sub &&&a&&div style=&padding: 0 20&&#LABEL#&/div&&/a&&/li&';
&&&&&&&&&&&&&&&&&& var outerMenu = menuContainer.html(tplOuterMenu);
&&&&&&&&&&&&&&&&&& var ul = $(outerMenu).find(&ul&);
&&&&&&&&&&&&&&&&&& var level1 = &&;
&&&&&&&&&&&&&&&&&& $.each(config.dataProvider, function(index1, item1){
&&&&&&&&&&&&&&&&&&&&&&&&&&& if($.isArray(item1.items)){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //修改菜单中的项目
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ul.append(tplLevel1_withSubItems.replace(&#LABEL#&, item1.label).replace(&#URL#&, item1.url));
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var ul2 = ul.find(&li&).last().find(&ul&).first();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& $.each(item1.items, function(index2, item2){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ul2.append(tplLevel2.replace(&#LABEL#&, item2.label).replace(&#URL#&, item2.url));
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& if(item2.onClick){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var li2 = ul2.find(&li&).last();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& li2.click(item2.onClick);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& li2.css(&cursor&, &pointer&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& });
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& if(item1.onClick){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var li = ul.find(&& li&).last().find(&& a&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& li.click(item1.onClick);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& li.css(&cursor&, &pointer&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&& else{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //一级菜单项
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ul.append(tplLevel1_withoutSubItems.replace(&#LABEL#&, item1.label).replace(&#URL#&, item1.url));
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& if(item1.onClick){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var li = ul.find(&li&).last();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& li.click(item1.onClick);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& li.css(&cursor&, &pointer&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&& });
&&&&&&&&&&&&&&&&&& //将菜单的index值调到最大，显示在最顶端，并且将透明度调至1
&&&&&&&&&&&&&&&&&& sym.getSymbolElement().css(&z-index&, &999&);
&&&&&&&&&&&&&&&&&& sym.getSymbolElement().css(&opacity&, &1&);
&&&&&&&& });
catch(err){
&&&&&&&& console.error(err.toString());
六、制作链接工程
可简单制作几个工程文件，当点击不同的菜单项时，链接到不同的页面，我们也可以直接将链接修改为网络页面，如新浪，网易，百度，谷歌等。
附：menu.css
#nestedmenu ul,
#nestedmenu li,
#nestedmenu span,
#nestedmenu a {
& margin: 0;
& padding: 0;
& position:
& cursor:}
#nestedmenu {
& height: 49
& background: #141414;
& background: -moz-linear-gradient(top, #32323a 0%, #%);
& background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
&&background: -webkit-linear-gradient(top, #32323a 0%, #%);
& background: -o-linear-gradient(top, #32323a 0%, #%);
& background: -ms-linear-gradient(top, #32323a 0%, #%);
& background: linear-gradient(to bottom, #32323a 0%, #%);
& border-bottom: 4px solid #e00f16;}
#nestedmenu:after,
#nestedmenu ul:after {
& content: '';
& display:
#nestedmenu a {
& background: #141414;
& background: -moz-linear-gradient(top, #32323a 0%, #%);
& background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
& background: -webkit-linear-gradient(top, #32323a 0%, #%);
& background: -o-linear-gradient(top, #32323a 0%, #%);
& background: -ms-linear-gradient(top, #32323a 0%, #%);
& background: linear-gradient(to bottom, #32323a 0%, #%);
& color: #
& display: inline-
& font-family: Helvetica, Arial, Verdana, sans-
& font-size: 12
& line-height: 49
& padding: 0;
& text-decoration:}
#nestedmenu ul {
& list-style:}
#nestedmenu & ul {
#nestedmenu & ul & li {
#nestedmenu & ul & li:hover:after {
& content: '';
& display:
& width: 0;
& height: 0;
& position:
& left: 50%;
& bottom: 0;
& border-left: 10
& border-right: 10
& border-bottom: 10px solid #e00f16;
& margin-left: -10}
#nestedmenu & ul & li.active & a {
& box-shadow: inset 0 0 3px #000000;
& -moz-box-shadow: inset 0 0 3px #000000;
& -webkit-box-shadow: inset 0 0 3px #000000;
& background: #070707;
& background: -moz-linear-gradient(top, #26262c 0%, #%);
& background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
& background: -webkit-linear-gradient(top, #26262c 0%, #%);
& background: -o-linear-gradient(top, #26262c 0%, #%);
& background: -ms-linear-gradient(top, #26262c 0%, #%);
& background: linear-gradient(to bottom, #26262c 0%, #%);}
#nestedmenu & ul & li:hover & a {
& background: #070707;
& background: -moz-linear-gradient(top, #26262c 0%, #%);
& background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
& background: -webkit-linear-gradient(top, #26262c 0%, #%);
& background: -o-linear-gradient(top, #26262c 0%, #%);
& background: -ms-linear-gradient(top, #26262c 0%, #%);
& background: linear-gradient(to bottom, #26262c 0%, #%);
& box-shadow: inset 0 0 3px #000000;
& -moz-box-shadow: inset 0 0 3px #000000;
& -webkit-box-shadow: inset 0 0 3px #000000;}
#nestedmenu .has-sub {
& z-index: 1}
#nestedmenu .has-sub:hover & ul {
& display:}
#nestedmenu .has-sub ul {
& display:
& position:
& width: 200
& top: 100%;
& left: 0;}
#nestedmenu .has-sub ul li {
& *margin-bottom: -1}
#nestedmenu .has-sub ul li a {
& background: #e00f16;
& border-bottom: 1px dotted #ec6f73;
& font-size: 11
& display:
& line-height: 120%;
& padding: 10}
#nestedmenu .has-sub ul li:hover a {
& background: #b00c11;}
#nestedmenu .has-sub .has-sub:hover & ul {
& display:}
#nestedmenu .has-sub .has-sub ul {
& display:
& position:
& left: 100%;
& top: 0;}
#nestedmenu .has-sub .has-sub ul li a {
& background: #b00c11;
& border-bottom: 1px dotted #d06d70;}
#nestedmenu .has-sub .has-sub ul li a:hover {
& background: #80090d;}
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和。
：/content/help/en/edge-animate/using/add-interactivity-javascript.html
你可以使用JavaScript对工程添加交互功能，你可以对每一个元素定义动作控制函数，直接使用Edge内置的代码编辑器和代码库片段即可。每一个单独的处理事件都可以通过添加一个动作控制函数实现。
一、定义动作控制函数：
1.如图，在时间线上，点击你想要添加代码的元素左侧按钮，打开代码编辑器。你也可以在元素面板中打开代码编辑器。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/images//5723.jpg" STYLE="max-width:690" WIDTH="164" HEIGHT="73"
ALT="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》"
TITLE="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》" />
2.选择一种事件触发机制。代码编辑器左侧是代码编辑区域，右侧则是代码片段列表，只要点击相应的按钮，就可以自动添加代码段。
3.为处理事件编辑代码段。你既可以使用右侧的代码片段，也可以自己编辑代码，关于代码如何使用，可以查看帮助菜单中的Edge
Animate JavaScript API。
二、如何使用代码编辑器：
通过代码编辑器，你可以查看整个工程文件的JavaScript代码。
1.选择菜单Window--&Code可以打开代码编辑器，你也可以使用快捷键Ctrl/Command + E。
2.如上图，打开一个元素的动作控制事件，只需要点击元素左侧的按钮。
3.如果你要对整个JavaScript代码进行编辑，如下图点击代码编辑器右上角的“Full Code”按钮。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/images//5754.jpg" STYLE="max-width:690" WIDTH="164" HEIGHT="71"
ALT="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》"
TITLE="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》" />
三、在时间线上添加标签：
你可以在时间线上添加标签，然后在代码中作为函数参数传递。在Edge中假如一个回调函数需要一个时间点来作为参数，你也可以使用标签名作为参数，因为标签名代表的就是一个时间点。
如何添加标签：
1.将播放头移至确切时间点。
2.点击时间线右上角的插入标签按钮（Insert Label），你也可以使用快捷键Ctrl/Command + L。
3.设置标签的标签名。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/images//1290.jpg" STYLE="max-width:690" WIDTH="125" HEIGHT="82"
ALT="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》"
TITLE="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》" />
这样你就可以在函数中使用标签名作为参数调用某一个时间点或者说，调用某一段动画了。比如：你可以用sym.play("mylabel")代替sym.play(1000)。
四、在时间线上添加触发器：
你可以在时间线上添加触发器，在这个时间点上触发器就会执行相应的代码。
如何添加触发器：
1.将播放头拖动至确切时间点。
2.点击时间线右上角的插入触发器按钮（Insert Trigger）。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/images//2894.jpg" STYLE="max-width:690" WIDTH="140" HEIGHT="98"
ALT="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》"
TITLE="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》" />
你也可以使用快捷键Ctrl/Command + T打开代码面板。
3.添加相应的执行代码。
双击时间线上的某一触发器即可对之进行修改。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/images//4986.jpg" STYLE="max-width:690" WIDTH="207" HEIGHT="97"
ALT="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》"
TITLE="转《Adobe&Edge&Animate1.0&--使用JavaScript添加交互功能》" />
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Adobe edge animate制作HTML5动画可视化工具（一）
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
Edge Animate for mac是Adobe最新出品的制作动画的可视化工具，简单的可以理解为HTML5版本的Flash Pro。在之后的文章中，我会逐一的介绍这款新的HTML5动画神器。这篇文章先说一说如何把Edge Animate制作的HTML5动画作品嵌入到Wordpress中。Adobe Edge Animate的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上，将增加更多HTML5功能，比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。
Adobe edge animate CC功能：
1.精确的动画。
2.直觉化的使用者界面。
3.绘图和文字工具。
4.移动路径。
5.可重复使用的符号。
mac下载地址：
window下载地址：
参考资料：
神器ANIMATE教程：使用SPRITESHEET创建HTML5动画
基于EDGE ANIMATE可视化工具开发CSS3动画
利用ADOBE神器十分钟零代码实现HTML5视差滚动特效
EDGE ANIMATE为IOS设备开发HTML5动画
adobe edge animate 教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
把一件件小事做好,最后就做成了大事。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net如何把edge animate插入你的web页面(在html文件中插入edge animate作品):
1.发布edge作品为.oam格式发布包:
& &在edge animate cc界面选择&File-Publish Setting
& &在Publish Setting界面勾选Animate Deployment Package
& &然后点发布(Publish)
发布的.oam格式文件在当前目录的publishanimate_package下面
2.在Dreamveaver中插入&Adobe Edge Animate 排版（OAM 文件）
可以将 Adobe Edge Animate 排版（OAM 文件）导入 Dreamweaver。排版被置于光标所在位置。
Dreamweaver 将导入的 OAM 文件的内容提取到名为&assets&的文件夹中。可以在&站点设置&(Site Setup) 对话框中更改默认位置。
作品文件会自动生成到html文件同级目录
确保光标位于要插入 Edge Animate 排版的位置。
选择&插入&(Insert) > &媒体&(Media) > &Edge Animate 作品&(Edge Animate Composition)。
选取刚才保存的.oam文件就可以了