Fuse Kit初级教程
Fuse Kit初级教程
个人认为Fuse工具包非常之有用,在做交互媒体时常常用到,但是网上的教程却太少,所以今天就写了一篇Fuse的初级教程!
针对Flash 8.0 ActionScript2.0,如果是高版本的话,要在发布设置那里设置成ActionScript2.0.
1.什么是Fuse Kit?
简单来说,Fuse Kit就是一堆AS文件,可以帮助你利用ActionScript来实现逼真的缓动效果,可以用来动态地添加滤镜效果,还可以生成一些基于时间的事件。
2.如何得到Fuse Kit?
Fuse 工具包可以在下面的网址免费下载。目前最新版本为Fuse Kit 2.1
http://www.mosessupposes.com/Fuse/index.html#download
3.如何使用Fuse Kit?
将下载的文件解压缩,会有一个com文件夹,那个就是你所需要的了。
在com/mosesSupposes/fuse文件夹一共有9个AS文件,分别是CustomEasing.as、Fuse.as、FuseFMP.as、FuseItem.as、FuseKitCommon、PennerEasing、Shortcuts.as、ZigoEngine.as、ZManager.as。
使用方法:
(1)假设你的com文件夹放在如下位置:E:/FlashLibs,打开Flash 8.0 ,编辑〉首选参数〉ActionScript〉ActionScript2.0设置,然后点击〉添加路径〉输入“E:/FlashLibs”〉确定〉确定……
(2)每次利用Fuse Kit制作Flash时,都要确保你的*.fla和com文件夹处于同级目录下
备注:建议还是使用第一种方法,这样每次你使用Fuse Kit时都避免了拷贝com文件夹的麻烦。
接下来我们就可以利用Fuse Kit制作第一个缓动效果了!
新建一个Flash文档,导入一张图片,并转化为MovieClip,在属性面板中命名clip1,打开动作面板,输入如下语句:
import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
clip1.rotateTo("-90",1,easeOutExpo);
发布,哈哈~~~看到动画效果了吧。
4.Fuse Kit是如何工作的?
现在就以上面的简单实例进行说明
(1)import com.mosesSupposes.fuse.*;
使用通配符语法导入整个fuse包的类文件
(2)ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
利用Fuse Kit中的ZigoEngine类自带的simpleSetup方法来为MovieClip、Buttons、TextFields添加方法,例如rotateTo。而那个PennerEasing就是由大名鼎鼎的Robert Penner开发的缓动公式啦。
(3)clip1.rotateTo("-90",1,easeOutExpo);
让clip1在1秒钟的时间内,逆时针旋转90度,缓动公式为easeOutExpo。
1)当缓动公式不同时,效果也是不一样的。在这里列出几种常用的缓动公式,可以自行替换一下看看效果。
easeInExpo、easeOutExpo、easeInOutExpo、easeOutInExpo
easeInBack、easeOutBack、easeInOutBack、easeOutInBack
easeInQuint、easeOutQuint、easeInOutQuint、easeOutInQuint
……
Linear,这个重点强调一下,就是匀速运动没有加速度了!
2)整个运动的时间是以秒为单位的。
3)注意角度参数有两种写法:-90或者"-90",有什么区别的,就是一个是绝对角度,一个是相对角度。如果想让clip1在原来的基础上再旋转90度,就写"-90";如果想让clip1就旋转到90度,那么就写90。
4)当然除了这些,还可以添加其他参数。比如想让这个动画延时2秒再进行,或者动画停止后通知我,怎么办??
clip1.rotateTo("-90",1,easeOutExpo,2,mss);
function mss(){
trace(“End”);
}
这样试试看?
target.rotateTo (rotation:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
这其实就是通常的写法了。
5)那么除了rotateTo方法外还有什么呢?现在我就给大家列出并简单说明一下,还是建议大家亲自去尝试一下。
target.alphaTo (alpha:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
透明度变化
target.scaleTo (scale:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
等比缩放(_xscale = _yscale)
target.sizeTo (size:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
调整大小(_width = _height)
target.slideTo (x:Object, y:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
移动,如果只是沿着x轴移动,y就可以赋值为"0"或者null,为什么是"0"而不是0呢,大家自己试试吧(其实我上面已经说明过了,呵呵)。
6)如果想为clip1同时添加多个动画效果怎么办呢?有两种方法:
一种是把你想要的效果都写上,例如:
clip1.rotateTo("-90",1,easeOutExpo);
clip1.scaleTo(50,1,easeOutExpo);
第二种就是利用tween方法,例如:
clip1.tween("_rotation,_xscale,_yscale",["-90",50,50],1,easeOutExpo);
下面是tween方法的使用方法,props为属性,多个时用””列出,endVals一定要和props对应好,多个时用[]列出。
target.tween (props:Object, endVals:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
7)上面介绍了tween方法,那么为什么要有这个方法呢,难道只是因为在做多个效果时写法上的简化吗?当然不是,tween还有别的用途。例如,想点击pause按钮之后就让整个变化过程暂时停止,点击play按钮时再让变化过程继续,怎么办呢?!
这时就可以用pauseTween和resumeTween方法了,例如:
clip1.tween("_rotation,_xscale,_yscale",["-90",50,50],1,easeOutExpo);
pause_btn.onRelease = function(){
clip1.pauseTween();
}
play_btn.onRelease = function(){
clip1.resumeTween();
}
以上就是Fuse 工具包的初级使用方法了,当然这些功能只是其中的很小一部分。
那如何动态地添加滤镜,能否调整图像的亮度,对比度呢?
针对Flash 8.0 ActionScript2.0,如果是高版本的话,要在发布设置那里设置成ActionScript2.0.
1.什么是Fuse Kit?
简单来说,Fuse Kit就是一堆AS文件,可以帮助你利用ActionScript来实现逼真的缓动效果,可以用来动态地添加滤镜效果,还可以生成一些基于时间的事件。
2.如何得到Fuse Kit?
Fuse 工具包可以在下面的网址免费下载。目前最新版本为Fuse Kit 2.1
http://www.mosessupposes.com/Fuse/index.html#download
3.如何使用Fuse Kit?
将下载的文件解压缩,会有一个com文件夹,那个就是你所需要的了。
在com/mosesSupposes/fuse文件夹一共有9个AS文件,分别是CustomEasing.as、Fuse.as、FuseFMP.as、FuseItem.as、FuseKitCommon、PennerEasing、Shortcuts.as、ZigoEngine.as、ZManager.as。
使用方法:
(1)假设你的com文件夹放在如下位置:E:/FlashLibs,打开Flash 8.0 ,编辑〉首选参数〉ActionScript〉ActionScript2.0设置,然后点击〉添加路径〉输入“E:/FlashLibs”〉确定〉确定……
(2)每次利用Fuse Kit制作Flash时,都要确保你的*.fla和com文件夹处于同级目录下
备注:建议还是使用第一种方法,这样每次你使用Fuse Kit时都避免了拷贝com文件夹的麻烦。
接下来我们就可以利用Fuse Kit制作第一个缓动效果了!
新建一个Flash文档,导入一张图片,并转化为MovieClip,在属性面板中命名clip1,打开动作面板,输入如下语句:
import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
clip1.rotateTo("-90",1,easeOutExpo);
发布,哈哈~~~看到动画效果了吧。
4.Fuse Kit是如何工作的?
现在就以上面的简单实例进行说明
(1)import com.mosesSupposes.fuse.*;
使用通配符语法导入整个fuse包的类文件
(2)ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
利用Fuse Kit中的ZigoEngine类自带的simpleSetup方法来为MovieClip、Buttons、TextFields添加方法,例如rotateTo。而那个PennerEasing就是由大名鼎鼎的Robert Penner开发的缓动公式啦。
(3)clip1.rotateTo("-90",1,easeOutExpo);
让clip1在1秒钟的时间内,逆时针旋转90度,缓动公式为easeOutExpo。
1)当缓动公式不同时,效果也是不一样的。在这里列出几种常用的缓动公式,可以自行替换一下看看效果。
easeInExpo、easeOutExpo、easeInOutExpo、easeOutInExpo
easeInBack、easeOutBack、easeInOutBack、easeOutInBack
easeInQuint、easeOutQuint、easeInOutQuint、easeOutInQuint
……
Linear,这个重点强调一下,就是匀速运动没有加速度了!
2)整个运动的时间是以秒为单位的。
3)注意角度参数有两种写法:-90或者"-90",有什么区别的,就是一个是绝对角度,一个是相对角度。如果想让clip1在原来的基础上再旋转90度,就写"-90";如果想让clip1就旋转到90度,那么就写90。
4)当然除了这些,还可以添加其他参数。比如想让这个动画延时2秒再进行,或者动画停止后通知我,怎么办??
clip1.rotateTo("-90",1,easeOutExpo,2,mss);
function mss(){
trace(“End”);
}
这样试试看?
target.rotateTo (rotation:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
这其实就是通常的写法了。
5)那么除了rotateTo方法外还有什么呢?现在我就给大家列出并简单说明一下,还是建议大家亲自去尝试一下。
target.alphaTo (alpha:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
透明度变化
target.scaleTo (scale:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
等比缩放(_xscale = _yscale)
target.sizeTo (size:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
调整大小(_width = _height)
target.slideTo (x:Object, y:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
移动,如果只是沿着x轴移动,y就可以赋值为"0"或者null,为什么是"0"而不是0呢,大家自己试试吧(其实我上面已经说明过了,呵呵)。
6)如果想为clip1同时添加多个动画效果怎么办呢?有两种方法:
一种是把你想要的效果都写上,例如:
clip1.rotateTo("-90",1,easeOutExpo);
clip1.scaleTo(50,1,easeOutExpo);
第二种就是利用tween方法,例如:
clip1.tween("_rotation,_xscale,_yscale",["-90",50,50],1,easeOutExpo);
下面是tween方法的使用方法,props为属性,多个时用””列出,endVals一定要和props对应好,多个时用[]列出。
target.tween (props:Object, endVals:Object, seconds:Number, ease:Object, delay:Number, callback:Object)
7)上面介绍了tween方法,那么为什么要有这个方法呢,难道只是因为在做多个效果时写法上的简化吗?当然不是,tween还有别的用途。例如,想点击pause按钮之后就让整个变化过程暂时停止,点击play按钮时再让变化过程继续,怎么办呢?!
这时就可以用pauseTween和resumeTween方法了,例如:
clip1.tween("_rotation,_xscale,_yscale",["-90",50,50],1,easeOutExpo);
pause_btn.onRelease = function(){
clip1.pauseTween();
}
play_btn.onRelease = function(){
clip1.resumeTween();
}
以上就是Fuse 工具包的初级使用方法了,当然这些功能只是其中的很小一部分。
那如何动态地添加滤镜,能否调整图像的亮度,对比度呢?