摘要: Adobe Edge Animate –EdgeCommons Log和全局变量设置功能版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。一、Log功能当工程测试的时候需要使用到Log功能。在EdgeCommons中,比之console.log,可以使用更多Log功能以下是几个简单的使用EdgeCommons的Logging功能示例:1、简单的log信息,传递到控制台EC.info( "Logging with EdgeCommons" );2、其他log方式:EC.info( "Message" );EC.debug 阅读全文
posted @ 2013-08-15 15:24 Adobe Edge 阅读(2422) 评论(1) 推荐(0) 编辑
摘要: Adobe Edge Animate –使用EdgeCommons加载和播放音频版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。在Edge中,可以new一个sound对象,来加载一段音频文件,进而控制播放和音量。此外,Edge官方也在EdgeCommons中加入了音频加载和播放控制功能。控制图:在这里,每个播放按钮控制播放一首歌曲,每个stop按钮控制歌曲的暂停,最后一个stop按钮则控制所有的暂停功能。一、在Stage中加载音频在Stage中添加compositionReady函数yepnope({ load: "lib/EdgeCommons 阅读全文
posted @ 2013-08-15 14:49 Adobe Edge 阅读(1994) 评论(0) 推荐(0) 编辑
摘要: Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。上一篇我们说到了使用jquery加载svg图片,能够解决精确的边缘检测问题,本篇将使用另一种方式来添加svg的精确交互。效果图:一、制作中国陆地版块地图矢量图在Adobe Illustrator中,制作中国地图矢量图(也可从网上下载矢量图,但是也要做相应修改),在图层命名中,对应不同的省份图块,分别命名为相应的省份名称,如下图所示:修改对应名称是为了在选中不同省份的时候,能够显示正确的名称。二、添加显示名称功能1、在Edge中,导入对 阅读全文
posted @ 2013-08-12 11:08 Adobe Edge 阅读(3214) 评论(0) 推荐(0) 编辑
摘要: Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。在edge中,当我们导入一张图片,不管是jpg还是png格式,为图片添加诸如click等事件时,检测的范围总是为矩形,即使将svg图片直接添加到舞台,也是这种情况,那么如果像下图这样一个图片,我们要检测鼠标点击的是五角星还是圆圈部分,这样就涉及到精确判定图形边缘的问题。下面,将通过jquery的svg图片加载,来解决这个问题:一、使用adobe illustrator制作svg图片在AI中我们分别使用图形工具创建圆 阅读全文
posted @ 2013-08-09 15:43 Adobe Edge 阅读(2962) 评论(0) 推荐(0) 编辑
摘要: Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。本例子将为大家讲解如何使用Edge Commons的Spotlight功能。Edge Commons的官方Spotlight功能包括:显示图片、显示html、播放youbube视频三种,在此,将为大家讲解如何修改Edge Commons,来达到播放国内视频门户网站的视频,如:优酷、乐视网、激动网、凤凰网等。效果图:一、制作按钮和相关素材1、首先需要制作按钮,本例子将按钮制作如下图:2、一张图 阅读全文
posted @ 2013-08-06 11:08 Adobe Edge 阅读(1789) 评论(0) 推荐(1) 编辑
摘要: Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。在网络上浏览有关Edge相关问题的时候,看到有人提问如何实现获得鼠标位置的功能,笔者经过一番尝试,终于做出来了,与各位分享之。效果图:一、获得当前鼠标位置值的实现新建一个工程,在stage中添加actions,在这里由于每次鼠标移动都要检测,所以添加mousemove函数:var tempX ;//用于存储鼠标x轴方向的坐标值var tempY ;//用于存储鼠标y轴方向的坐标值if(document.all)//如果浏览器是ie,执行以下 阅读全文
posted @ 2013-07-17 17:02 Adobe Edge 阅读(4700) 评论(0) 推荐(0) 编辑
摘要: Adobe Edge Animate –使用css制作菜单版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。效果图:下拉菜单:使用css制作菜单与用Edge作图工具制作菜单是两个思路两种方法,css的方法纯粹使用代码控制菜单的艺术效果。一、制作菜单容器使用矩形工具,创建一个菜单显示区域,命名为menucontainer,转换为原件,命名为menu,完成菜单容器的制作,接下来菜单将显示在这个原件中。二、制作点击菜单后显示内容的容器同样使用矩形工具,创建内容显示区域,转换为原件,并且命名为content,完成内容显示容器的制作,点击菜单之后,加载的相关内容将显示 阅读全文
posted @ 2013-07-12 18:17 Adobe Edge 阅读(5497) 评论(1) 推荐(2) 编辑
摘要: Adobe Edge Animate –Edge Commons强势来袭,Edge团队开发成为现实版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。Edge Commons CDN:Edge刚刚发布第一个版本的时候,一直在考虑如何让Edge实现团队开发,当时Edge的功能还十分有限,而可实现的方法是:将做好的动画打包为一个原件导出,在Edge大框架中导入的方法。然而近来Adobe Edge Animate官方开发技术团队(以Simon Widjaja为代表)发布了Edge Commons CDN,这是一个扩展的javascript库,旨在提高Edge开发工作 阅读全文
posted @ 2013-07-12 11:53 Adobe Edge 阅读(3092) 评论(5) 推荐(1) 编辑
摘要: Adobe Edge Animate –可重复使用的个性化按钮制作版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。效果图:工程文件中:运行中:当网页加载的时候,按钮的名称会发生变化,这是因为我们使用了不同的Title值的原因,在按钮加载完毕的时候,读取该按钮对应的Title,并且将之显示在文本上,下面通过一个小例子来讲解具体的制作方法。一、制作一个按钮1、首先,我们可以自己design一个按钮,比如说,笔者做了这样的:分别是normal和click状态下的效果 2、接下来把它转化为原件,在此命名为btn,原件内部的文字元素则命名为label。二、添加lab 阅读全文
posted @ 2013-07-11 15:06 Adobe Edge 阅读(2290) 评论(0) 推荐(0) 编辑
摘要: Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。此前有Edge爱好者提出一个疑问:在Edge中有动画的缓动效果,但是如何使用tweenmax来实现这个缓动呢?这是个比较有意思的问题,带着这个疑问查找了网上的一些资料后,做出了一个demo,在此跟各位分享。一、下载tweenmax相关js从网上下载greensock的tweenmax相关js文件,放置在工程文件目录下,如下图:二、制作动画元素:方块(矩形)在Edge中使用矩形工具,制作一个Rectangle,可以另外命名,在此就使 阅读全文
posted @ 2013-07-10 15:33 Adobe Edge 阅读(4997) 评论(1) 推荐(1) 编辑
摘要: Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。目前Edge的功能尚在不断完善中,没有类似flash遮罩层和引导层这些做动画十分好用的功能,但是依靠目前Edge已有的功能,我们还是可以在一定程度上实现遮罩层的效果,以下即为一个实现遮罩层效果的终极小例子:地球自转动画。成果图:众位网友一定好奇,Edge中并没这种功能啊,怎么实现的呢,请看以下讲解:一、先找到一张符合要求的世界地图地图要求:要有接近两张世界地图长度,这样才可以实现自转一周的动画,循环起来就可以实现无缝对接,就 阅读全文
posted @ 2013-07-10 09:28 Adobe Edge 阅读(6794) 评论(5) 推荐(0) 编辑
摘要: Adobe Edge Animate --使用HTML5实现手机摇一摇功能版权声明:本文版权属于 北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。HTML5的发展日新月异,其功能也越来越丰富和完善,比如12年HTML5可支持手机摇一摇功能,本文末尾将附上有关技术问题。现在我们将讲解如何在Edge中使用HTML5实现摇一摇功能。首先,需要注意的是,并不是所有手机都支持HTML5的摇一摇功能,以下为目前适用范围:1、 iOS系统(包括ipad,iphone),自带safari浏览器和chorme浏览器皆可识别2、 Android系统,不识别,需要安装特定浏览器如oprea,chrom 阅读全文
posted @ 2013-07-09 16:04 Adobe Edge 阅读(6502) 评论(3) 推荐(1) 编辑
摘要: Adobe Edge Animate--关于全局变量和全局方法的定义版权声明:本文版权属于北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。BY:sonicxsxs前文中有关音频添加的那一章,文中所说的全局变量,那么定义是不对的。应该直接写au_to_play=new Audio()。也可以使用sym.setParameter ("myVar", 0)来定义并用 var myVar = sym.getParameter ("myVar");来获取。详见(http://forums.adobe.com/message/4261700)另外如果先 阅读全文
posted @ 2013-07-05 15:48 Adobe Edge 阅读(2283) 评论(0) 推荐(1) 编辑
摘要: AdobeEdgeAnimate--使用JQuery制作的美女拼图版权声明:本文版权属于北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。效果图:一、图形元素制作1.首先我们找到一张图片,如百度图片中找一位美女之类,在Photoshop中用标尺画一个九宫格,然后裁剪成九张大小一致的图片,另存为图片即可。2.打开Edge,新建工程,我们命名为Edge_demo_puzzle,导入图片,拉到舞台中,打乱顺序之后,为每一张图片添加类名,如下图:我们在此依次添加drag1、drag2……drag8、drag93.创建九宫格背景,在Edge中创建rectangle,为每个添加类名,我们在此依 阅读全文
posted @ 2012-12-28 18:01 Adobe Edge 阅读(4964) 评论(5) 推荐(0) 编辑
摘要: AdobeEdgeAnimate--如何在Edge中播放视频文件版权声明:本文版权属于北京联友天下科技发展有限公司。转载的时候请注明版权和原文地址。前面的教程讲到在Edge中添加音频文件并且进行播放控制,下面将为大家讲解两种代码实现如何在Edge中添加视频文件。一、如下图所示,在AdobeEdge中创建元件和元素:舞台框架结构如下:其中元件frame_video的内部结构如下:只有一个矩形(注意:要用到这个矩形的id,即名称,我们这里把它命名为video_container)二、在库面板中双击元件frame_video,点击OpenAction按钮添加creationcomplete函数:附: 阅读全文
posted @ 2012-12-25 17:31 Adobe Edge 阅读(6322) 评论(0) 推荐(1) 编辑