Flash补间引擎应用:图片特效(1)
2010-01-02 16:59
281 查看
adobe自带的补间类能够产生很多不错的缓冲应用效果,不过由于自带的类存在一些缺陷,因此应用起来不尽人意。通过借助一些开源的补间引擎能够产生很多不错的效果。其中TweenLite 补间引擎是应该比较广泛一个引擎,当然还有其他如GTween等。有兴趣的话可以下载该引擎进行使用,你一定会喜欢上。好,借用这个补间引擎, 马上了解一下这些应用。下面***一个简单的例子。
下载地址:在这里
***设计思路:使用数组保存路径的位置,然后用补间引擎,将每一张图片移动到指定的位置当中。动画过程中需要让图片产生一定时间错位感。这样看起来就更加好。
通过借用下面这个函数,我们的图片就能产生位置移动了。
TweenLite.to(目标对象MC,1,{x:目标X点 y:目标y点, ease:Cubic.easeInOut});
这张图片有8个点,分布是从黑色中心开始移动到指定的红色点位置,顺序是从1--8 这样序列进行。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/3shiye.jpg)
静态复制小球的启示:
我们知道通过复制小球然后,可以让每一个小球的坐标都以圆的轨迹进行分布是一件很容易的事情,只要知道了公式就能写出来。我们这次的目的不是要小球,而是要他的分布的坐标。为什么?请想一下。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/4库链接.jpg)
通过这个方式来对小球坐标分布能够产生一个圆的效果。
有了这个思路之后,我们现在做的事情就是对分布的坐标存储起来。然后使用补间引擎让每一个小球移动到指定的目标当中。这种效果就基本完成了。
看看这张图片,我们将复制心形全部初始化一个位置,这样看起来复制出来的心形重叠在一起了。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/1缓冲.jpg)
通过移动位置,产生一系列的补间动画效果。最终效果就是设计为下面这样。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/2缓冲.jpg)
代码清单:
下载地址:在这里
***设计思路:使用数组保存路径的位置,然后用补间引擎,将每一张图片移动到指定的位置当中。动画过程中需要让图片产生一定时间错位感。这样看起来就更加好。
通过借用下面这个函数,我们的图片就能产生位置移动了。
TweenLite.to(目标对象MC,1,{x:目标X点 y:目标y点, ease:Cubic.easeInOut});
这张图片有8个点,分布是从黑色中心开始移动到指定的红色点位置,顺序是从1--8 这样序列进行。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/3shiye.jpg)
静态复制小球的启示:
我们知道通过复制小球然后,可以让每一个小球的坐标都以圆的轨迹进行分布是一件很容易的事情,只要知道了公式就能写出来。我们这次的目的不是要小球,而是要他的分布的坐标。为什么?请想一下。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/4库链接.jpg)
for(var i:int=0;i<10;i++) { var ball:Ball=new Ball();//库连接 addChild(ball); list.push(ball); ball.x=startX+Math.cos(angle*i)*R;//R 为班级 ,angle 为角度 =2*Math.PI/10=36度 ball.y=startY+Math.sin(angle*i)*R; }
通过这个方式来对小球坐标分布能够产生一个圆的效果。
有了这个思路之后,我们现在做的事情就是对分布的坐标存储起来。然后使用补间引擎让每一个小球移动到指定的目标当中。这种效果就基本完成了。
看看这张图片,我们将复制心形全部初始化一个位置,这样看起来复制出来的心形重叠在一起了。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/1缓冲.jpg)
通过移动位置,产生一系列的补间动画效果。最终效果就是设计为下面这样。
![](http://p.blog.csdn.net/images/p_blog_csdn_net/hero82748274/EntryImages/20100102/2缓冲.jpg)
代码清单:
package { import flash.display.MovieClip; import flash.events.*; import gs.TweenLite; import gs.easing.*; public class Main extends MovieClip { private var posX:Array=new Array();//记录横坐标 private var posY:Array=new Array();//记录纵坐标 private var list:Array=new Array();//对象列表 private var angle:Number=2*Math.PI/50; private var startPosX:Number=250; private var startPosY:Number=200; private var R:int=190; private var count:int=0; private var num:int=0; public function Main() { init(); } //复制一系列的小球 public function init():void { for (var i:int=0; i<53; i++) { var ball:Ball=new Ball();//库连接 addChild(ball); list.push(ball); posX[i]=startPosX+Math.cos(angle*i)*R;//使用数组来记录的X坐标 posY[i]=startPosY+Math.sin(angle*i)*R;//使用数组来记录的Y坐标 ball.x=ball.y=250; if (i>49) { if (i==50) { posX[i]=startPosX-100; posY[i]=startPosY; } else if (i==51) { posX[i]=startPosX+100; posY[i]=startPosY; } else { posX[i]=startPosX; posY[i]=startPosY+50; } } } stage.addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { ShowEffect(list); } //通过缓冲的应用,产生时间差 private function ShowEffect(array:Array):void { count++; if (count>2) { TweenLite.to(array[num],1,{x:posX[num],y:posY[num], ease:Cubic.easeInOut}); num++; count=0; if (num>array.length) { stage.removeEventListener(Event.ENTER_FRAME,Run); count=0; num=0; } } } } }
相关文章推荐
- Flash补间引擎应用:图片特效(1)
- Flash补间引擎应用:图片特效(2)
- Flash补间引擎应用:图片特效(2)
- 方便调用27种flash图片切换特效
- flash物理引擎应用:你的第一个Fisix应用程序
- flash物理引擎应用:创建粒子
- [转载]AS3 JPEG Encoder应用:从Flash中保存图片
- Flash 特效原理:图片平面墙
- Flash 3D引擎(Sandy3D)应用指南 3——使用摄像机。
- [原]as3 flash web 应用 (3)批量上传之 图片缩略图的呈现
- flash物理引擎应用:创建粒子
- FLASH2004时间轴特效的应用-实例教学-Flash-网页制作
- 方便调用27种flash图片切换特效
- Flash特效:鼠标触发模糊图片变清晰
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载
- 约数,公约数及最大公约数在图片特效中的应用
- flash特效原理:图片滑动放大效果(2)
- Flash 特效原理:图片平面墙
- js特效:图片轮换(仿FLASH)
- flash物理引擎应用:Fisix应用程序核心类