Flash AS2入门教程第七课:影片剪辑第7节实现过渡

来源:百度文库 编辑:神马文学网 时间:2024/04/28 07:19:09
Flash AS2入门教程第七课:影片剪辑第7节实现过渡
分类:flash入门教程
Flash AS入门教程第七课:影片剪辑第7节实现过渡
用AS实现过渡效果
通过 TransitionManager 类,您可以迅速将令人印象深刻的过渡动画效果应用于影片剪辑。TransitionManager为我们提供了10种过渡效果。下面来看看怎样使用TransitionManager类来实现过渡效果。
要实现过渡效果,为编写代码更为方便首先需要导入所有 mx.transitions 类和所有 mx.transitions.easing 类:
import mx.transitions.*;
import mx.transitions.easing.*;
在导入上面两个类以后,就可以使用TransitionManager类的start()方法将过渡效果应用于影片剪辑上。
格式:TransitionManager.start(影片剪辑名称,{ type:过渡类型,direction:方向,duration:过渡所所需的时间,easing:缓动效果,各种过渡效果所需的参数});
start()方法参数的说明:
影片剪辑名称:就是要应用过渡效果的MC的实例名称。
过渡类型:上面已提到共有10种过渡效果,这里填上要用的过渡效果名称。下面将分别介绍这十种效果。
direction:方向:即过渡是进入还是退出。可以用两个值:Transition.IN和Transition.OUT
duration:过渡所所需的时间:一般一个过渡几秒就够了吧,常用3-5。
easing:缓动效果:在过渡效果中可以为过渡效果添加缓动效果,有关缓动效果后面将专门介绍,这里先介绍一个值,我们才好测试过渡效果。None.easeNone用这个值,就是不用缓动效果。
各种过渡效果所需的参数:除了上面的的参数外,每一种过渡效果可能还有自已的参数,那么就跟在后面就行了。
有了上面的介绍,我们已经对TransitionManager类有了一个大概的认识,下面我们来介绍这十种过渡效果,并用练习来实现它,这样我们便能掌握TransitionManager的应用了。
遮帘过渡:Blinds
这个是什么效果呢?文字说不清楚,自已看吧,就这个效果:
参数
numStrips,"遮帘"效果中的遮罩条纹数。建议的范围是 1 到 50。
dimension,一个整数,指示遮帘条纹是垂直的 (0) 还是水平的 (1)。
下面我们来制作这个效果:
1. 新建flash文档,导入一张图片到舞台,打开对齐面板,宽高匹配,居中对齐。
2. 点中图片:将其转换为MC,实例名称为:img1_mc.,在第50帧插入帧。
3. 点第1帧,右键打开动作面板,输入如下代码:
import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc,{type:Blinds, irection:Transition.IN, duration:2, easing:None.easeNone, numStrips:10, dimension:0});
测试影片,怎么样?看到效果了吧。
这些代码不用解释了吧。
淡化过渡:Fade
效果:
制作方法跟前面一样,只是把代码改为:
import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});
这个过渡跟上面的过渡比较起代码不同的是,上面的过渡自已有两个参数,而这个过渡则没有自已的参数。
现在你可能已经感觉到用代码实现的过渡效果比自已在计设环境中去设透明度,做遮罩要简单得多。废话,要不我在这废这么多口舌干啥呢?继续往下看吧,好东西还多呢。
飞行过渡:Fly
效果:
参数:startPoint,一个指示起始位置的整数;范围是 1 到 9:
左上,1;上中,2;右上,3;左中,4;中心,5;右中,6;左下,7;下中,8;右下,9。
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc,{type:Fly, direction:Transition.IN, duration:3, easing:None.easeNone, startPoint:9});
这里最后又跟了一个自带的参数,你可以改变一下这个参数,让图片从不同的方向飞入。
光圈过渡:Iris
效果:
参数:startPoint,一个指示起始位置的整数;范围是 1 到 9:
左上,1;上中,2;右上,3;左中,4;中心,5;右中,6;左下,7;下中,8;右下,9。
shape,值为Iris.SQUARE(方形)或Iris.CIRCLE(圆形)的遮罩形状
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Iris, direction:Transition.IN, duration:2, easing: None.easeNone, startPoint:5, shape:Iris.CIRCLE});
照片过渡:Photo
效果:
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start (img1_mc, {type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone});
像素溶解过渡:PixelDissolve
效果:
参数:xSections,一个整数,指示沿水平轴的遮罩矩形部分的数目。建议的范围是 1 到 50。
ySections,一个整数,指示沿垂直轴的遮罩矩形部分的数目。建议的范围是 1 到 50。
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:10, ySections:10});
旋转过渡:Rotate
效果:
参数:ccw 一个布尔值:对于顺时针旋转为 false;对于逆时针旋转为 true。
degrees,一个整数,指示对象要旋转的度数。建议是范围是 1 到 9999。例如,degrees 设置为 1080 时,会将对象完全旋转三次。
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Rotate, direction:Transition.IN, duration:3, easing:None.easeNone, ccw:false, degrees:720});
挤压过渡:Squeeze
效果:
参数:dimension,一个整数,指示"挤压"效果应是水平的 (0) 还是垂直的 (1)。
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Squeeze, direction:Transition.IN, duration:2, easing:None.easeNone, dimension:1});
划入/划出过渡:Wipe
效果:
参数:startPoint,一个整数,指示开始位置。范围是 1 到 4 和 6 到 9:
左上,1;上中,2;右上,3;左中,4;右中,6;左下,7;下中,8;右下,9。
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});
缩放过渡:Zoom
效果:
代码:import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Zoom, direction:Transition.IN, duration:2, easing:None.easeNone});
以上是十种过渡效果,你可以更改其中的参数,以实现不同的效果,同时你也可以调整图片MC的注册点,也可能出现不同的效果。
上面的easing参数我们全用的是None.easeNone,即不使用缓动效果,在这里你可以更改这个参数将缓动效果应用于过渡效果中。不过我经测试,加上缓动效果后,很多过渡效果失去原味,不是很理想,我不提昌在过渡中使用缓动效果,但这必竟是我个人的意见,因此缓动效果还得介绍,何况下节课还要用到它的,下面再说说缓动效果。
关于缓动类和方法:
Flash 提供了五个缓动类,每个缓动类都有三个方法,这些方法指示过渡动画的以下哪一部分应用缓动效果:在动画的开始、结尾或开始和结尾。此外,带有 easeNone 方法的 None 缓动类可用于指示未使用缓动。
下表描述了这 6 个缓动计算类。
缓动类 描述
Back 在过渡范围外的一端或两端扩展动画一次,以产生从其范围外回拉的效果。
Bounce 在过渡范围的一端或两端内添加弹跳效果。弹跳数与持续时间相关,持续时间越长,弹跳数越多。
Elastic 添加一端或两端超出过渡范围的弹性效果。弹性量不受持续时间影响。
Regular 在一端或两端添加较慢的运动。此功能使您能够添加加速效果、减速效果或这两种效果。
Strong 在一端或两端添加较慢的运动。此效果类似于 Regular 缓动类,但它更明显。
None 添加从开始到结尾无任何减速或加速效果的相同的运动。此过渡也称为线性过渡。
这 6 种缓动计算类的每一种都有三个缓动方法,它们指明缓动效果应用于动画的哪个部分。此外,None 缓动类还有第四个缓动方法:easeNone。
下表中描述了这些缓动方法:
方法 描述
easeIn 在过渡的开始提供缓动效果。
easeOut 在过渡的结尾提供缓动效果。
easeInOut 在过渡的开始和结尾提供缓动效果。
easeNone 指明不使用缓动计算。只在 None 缓动类中提供。
下面我们来看看使用方法。
用法:在过渡效果中:
TransitionManager.start()方法的easing:参数用这个值:缓动类名.缓动方法
比如在上面的过渡效果中我们使用了:easing:None.easeNone表示没有用缓动。看上面两个表,可以看出,None是缓动类名,easeNone是类的方法。
下面将上面的缩放过渡的easeing参数改一下用Bounce类的easeOut方法让图片放大后产生一个弹跳的动作:
代码为:
import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Zoom, direction:Transition.IN, duration:2, easing:Bounce.easeOut});
你可以将这个代码与上面的缩放过渡代码比较一下。
其它的过渡效果,就由你自已去试验了。
本课作业:完成本节开头的图片转场效果。
制作建议:将十种过渡效果按上面介绍的方法分别做成MC,并在第50帧上输入:stop();。在主场景第1层放一张背景图片,从第2层开始每隔50帧放一个做好的MC并延长100帧,每层只放1个MC。如第2层第1帧放1个,第100帧插入帧,第3层第51帧放1个,第150帧插入帧,以此类推。
Flash AS2入门教程第七课:影片剪辑第8节实现补间动画
浏览:0 | 发布于:2009.02.11 | 分类:flash入门教程
Flash AS入门教程第七课:影片剪辑第8节实现补间动画
用AS实现补间动画
演示效果:
flash mx.transitions.Tween类可以实现类似补间动画的效果。要使用Tween类,首先还是将它导入:
import mx.transitions.Tween;
然后用new Tween()方法即可实现。New Tween()方法格式:
new Tween(要应用补间的MC,要应用补间的MC的属性,缓动效果,属性的初始值,属性的结束值,补间的长度,补间长度的类型)
下面介绍一下new Tween()方法的参数。
要应用补间的MC:这个就是要应用补间的MC罗。
要应用补间的MC的属性:补间动画实际就是用一定的时间改变对象的属性,比如位移就是改变_x或_y属性,还有其它的如_xscal、_alpha等。这里就是指这些属性的名称。
缓动效果:在上一节我们已经介绍了。
属性的初始值:比如要用补间的是_x属性,我们要建立对象从舞台左边移到右边的补间动画,那么_x的初始值就应很小,比如0,10,50等,即对象在舞台左边时的_x值。
属性的结束值:补间结束时属性的值,比如对象移到舞台右边时的_x的值。
补间的长度:可以有两种表示方式:秒或帧,但这里只是一个数值,是用秒还是用帧来计算补间由后面一个参数来决定。
补间长度的类型:决定是用秒还是用帧来计算补间,如果为true则用秒来计算,如果为false则用帧来计算。
下面我们来制作我们的第一个补间动画,让一个小球从舞台的左边移到右边:
画一个球吧,转换为MC,实例名称为:ball_mc.
打开帧动作面板,输入如下代码:
import mx.transitions.Tween;
import mx.transitions.easing.*; //因为在用到缓动效果,所以将缓动类也导入
new Tween(ball_mc, "_x", None.easeNone, 20,500,3,true);
测试影片,小球将从左边(20像数处)移到右边(500像素处),用时3秒。
上面这个效果没有用缓动效果,我们回忆一下上一节介绍的缓动效果,似乎有一个叫Regular的缓动类,它将实现减慢的效果,我们给它调用easeIn方法,即在补间开始时减慢,这样是不是就实现了从慢到快的效果呢?将代码改成下面的:
import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_x",Regular.easeIn, 20,500,40,false);
测试影片,我们看到小球由慢到快从左边移到右边。在这段代码中,改变了三个参数,一个是缓动效果,一个是补间长度用了40,再一个就长度类型用了false,这样这个补间长度不再是3秒,而是40帧。
onMotionFinished事件:Tween类的onMotionFinished事件在补间动画完成时调用。在后面来练习它的用法。
continueTo() 方法:继续执行补间动画,它以原补间动画属性的结束值作为开始值。这个方法重新指定结束值和补间长度。也就是说在原补间动画的结束点上重新开始新的动画。
利用上面的事件和方法可使动画往返运动。
将代码改为下面的:
import mx.transitions.Tween;
import mx.transitions.easing.*;
vae mytween:Tween = new Tween(ball_mc, "_alpha",Nonse.easeNonse, 0,100,3,true);
mytween. onMotionFinished = function(){
mytween. continueTo(0,3)
}
测试影片,你会看到小球淡入然后又淡出的过程。
这段代码,我们做透明度的补间动画,使透明度用3秒时间从0变为100,当补间结束时,调用onMotionFinished事件代码,用 continueTo(0,3)方法又用3秒时间将透明度由100(刚才补间的结束值)变为0。因为要调用Tween的事件和方法,所以我们声明了一个 Tween类mytween,这一点也与上面的代码不一样。
yoyo()方法:
上面的代码虽然实现了,透明度由0到100,然后又从100回到0的动画,但回到0后,动画就停止了。我们常常需要不停的往返运动,比如闪烁的星星,跳动的心脏等。那么Tween类为我们提供了yoyo()方法,这个方法在补间结束时,将初始值变为结束值,将结束值变为初始值,再次进行补间,如此往返永不停止。
记得一个红星跳动的表情吗?我们现在来制作它:
画一个红星,转换为MC,实例名称为:hx_mc.
帧动作代码:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var mytween:Tween = new Tween(hx_mc, "_xscale",Nonse.easeNonse, 80,100,0.5,true);
mytween.onMotionFinished = function(){
mytween.yoyo()
}
测试影片,我们看到了一个跳动的红星。看到这个效果,我突然发现,如果把红星换成一只蝴蝶,那不就让蝴蝶飞起来了吗?
这个例子应用补间的属性是_xscale.
下面我们来制用一个弹性菜单的练习,完成本节上面的动画:
首先来做弹性菜单,做4个MC,比较简单,画一个黄色的矩形,如果你高兴,当然可以用其它颜色,在矩形上面放一个静态文本,内容分别是:“加速滚动的球”,“闪烁的星”,“跳动的红心”,“飞动的蝴蝶”。
有两点要注意:
1.将字打散(两次),因为文本框在放大时会保持长宽比例,而我们弹出菜单时只需要改变高度,所以必须将文本打散。
2.因为菜单是向下弹开(增加高度),因此,元件必须上对齐。即上边与十字对齐。
3.矩形的高度为20,如果你的高度不是20,那么下面的代码就要作相应改变。
4个元件做好后,将它们拖到舞台上,放好。实例名称为: cd1,cd2,cd3,cd4
然后打开帧动作面板,输入如下代码:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var cdtween:Tween;
function tc(cd) {
cdtween = new Tween(cd, "_height",Bounce.easeOut, 20,60,2,true);
}
cd1.onRollOver = function(){
tc(this);
}
cd1.onRollOut = function(){
cdtween.continueTo(20,1);
}
cd2.onRollOver = function(){
tc(this);
}
cd2.onRollOut = function(){
cdtween.continueTo(20,1);
}
cd3.onRollOver = function(){
tc(this);
}
cd3.onRollOut = function(){
cdtween.continueTo(20,1);
}
cd4.onRollOver = function(){
tc(this);
}
cd4.onRollOut = function(){
cdtween.continueTo(20,1);
}
测试影片,一个弹性菜单就做好了。
以前我们说过,如果要多次使用的代码,最好做成函数,弹出菜单的代码在4个菜单项上都要调用,所以我们将它做成函数tc.这个函数,用Tween类使菜单 MC,的高度在2秒内由20变成60,达到弹出的效果,缓动则菜用了Bounce.easeOut,在菜单展开后产生一个弹跳的效果。在函数外声明 Tween对象:var cdtween:Tween;是为了在鼠标移出菜单时能够调用它。
接下来的代码是,在鼠标移动菜单上时,调用tc 使菜单弹出。在鼠标移出菜单时,调用Tween类的continueTo()方法,使菜单收回去。
接下来用上面介绍的内容,做4个MC,分别是,一个加速运动的小球,一个闪烁的星,一个跳动的红心,一个飞动的蝴蝶。在库中点右键,打开连接面板,为这4个MC取标识名:ballmc(小球),xingmc(星),hxmc(红心),hdmc(蝴蝶)。
回到主场景,打开帧动作面板,接着上面的代码,在每个菜单项上,添加点击加载相应mc的命令。
cd1.onRelease = function(){
attachMovie("ballmc","ball_mc",1)
ball_mc._y =200;
}
cd2.onRelease = function(){
attachMovie("hxmc","hx_mc",1)
hx_mc._y = 200;
hx_mc._x =260;
}
cd3.onRelease = function(){
attachMovie("xingmc","xing_mc",1)
xing_mc._x = 260;
xing_mc._y =200;
}
cd4.onRelease = function(){
attachMovie("hdmc","hd_mc",1)
hd_mc._x = 260;
hd_mc._y =200;
}
OK,试试吧。
Flash AS2入门教程第七课:影片剪辑第9节使用滤镜
浏览:0 | 发布于:2009.02.11 | 分类:flash入门教程
Flash AS入门教程第七课:影片剪辑第9节使用滤镜
用AS实现滤镜效果、
使用滤镜
Flash的filters类为我们提供了9种滤镜效果,要用AS实现滤镜效果,首先仍然需导入filters类:
import flash.filters.*;
然后,使用new构造函数,创建一个filters对象,并将它赋值给MC(或文本或按钮)的filters属性从而实现滤镜效果。
下面分别介绍这些滤镜效果:
1. 模糊滤镜:BlurFilter
BlurFilter类可以带来模糊的效果。要创建BlurFilter实例可用下面的方法:
var filter: BlurFilter = new BlurFilter(blurX, blurY, quality);
在BlurFilter的构造函数中使用了三个参数:
blurX: 水平模糊量。有效值为 0 到 255(浮点值)。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
blurY: ― 垂直模糊量。有效值为 0 到 255(浮点值)。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
quality: ― 应用滤镜的次数。默认值是 1,即表示低品质。值为 2 表示中等品质,值为 3 表示高品质并且接近高斯模糊。
下面还是用一个练习来熟悉模糊滤镜的应用。
导入一张图片将它做成MC,放到舞台上,实例名称为:my_mc.
然后打开帧动作面板,输入下列代码:
import flash.filters.*
var filter:BlurFilter = new BlurFilter(8,8,3);
my_mc.filters = [filter];
测试影片,这时图片已变模糊了。效果如下:
我们甚至可以在运行时改变模糊滤镜的参数,使模糊效果是可变的,比如根据鼠标的位置产生不同的模糊效果。将代码改成下面的:
import flash.filters.*
var filter:BlurFilter = new BlurFilter(8,8,3);
my_mc.filters = [filter];
onMouseMove = function() {
bx = Math.abs(_xmouse - my_mc._x);
by = Math.abs(_ymouse - my_mc._y);
filter.blurX = bx/10;
filter.blurY = by/10;
my_mc.filters = [filter];
}
测试影片,当鼠标移动时,模糊效果发生变化,鼠标距图片中心越远,模糊效果越深。效果如下:
2. 投影滤镜:DropShadowFilter
DropShadowFilter滤镜将产生投影的效果。要创建投影滤镜可用:
var filter: DropShadowFilter = new DropShadowFilter(distance, angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideO**ect);
投影影滤镜的参数比较多哈,还是一个一个介绍一下:
distance:― 阴影的偏移距离,以像素为单位。默认值是 4(浮点)。
angle:― 阴影的角度,0 到360?(浮点)。默认值是 45。
color:― 阴影颜色,采用十六进制格式 0xRRGG*。默认值是 0x000000。
alpha:― 阴影颜色的 Alpha 透明度值。有效值为 0 到 1。例如,0.25 设置透明度值为 25%。默认值是 1。
blurX:― 水平模糊量。有效值为 0 到 255(浮点)。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
blurY:― 垂直模糊量。有效值为 0 到 255(浮点)。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
strength:― 压印或跨页的强度。该值越高,压印的颜色越深,而且阴影与背景之间的对比度也越强。有效值为 0 到 255。默认值是 1。
quality:― 应用滤镜的次数。有效值为 0 到 15。默认值是 1,它表示低品质。值为 2 表示中等品质,值为 3 表示高品质。
inner:― 表示阴影是否为内侧阴影。值 true 指定内侧阴影。默认为 false,即外侧阴影,它表示对象外缘周围的阴影。
knockout:― 应用挖空效果 (true),这将有效地使对象的填色变为透明,并显示文档的背景颜色。默认值是 false,即不应用挖空效果。
hideO**ect:― 表示是否隐藏对象。如果值为 true,则表示没有绘制对象本身,只有阴影是可见的。默认值是 false(显示对象)。
做个练习,将上面练习的代码改为:
import flash.filters.*
var filter:DropShadowFilter = new DropShadowFilter();
my_mc.filters = [filter];
测试影片,效果如下:图片产生了投影效果。因为投影滤镜的所有参数都是可选的,所以我们没有给任何参数,即都使用默认值。
同样的我们可以在运时改变投影的参数,从而改变效果。我们将这个效果改变加在图片的点击事件上,即点击图片投影效果发生改变。这里改变了三个参数,偏移量,颜色(随机)和角度。
效果:
代码如下:
import flash.filters.*
var filter:DropShadowFilter = new DropShadowFilter();
my_mc.filters = [filter];
var i = 1;
my_mc.onRelease = function():Void {
if(filter.distance<5){
i=1;
} else if (filter.distance>30){
i=-1;
}
filter.distance += i;
filter.color = random(16000000);
filter.angle++;
my_mc.filters = [filter];
}
3.发光滤镜:GlowFilter
构造函数:
var filter:GlowFilter = new GlowFilter(color,alpha,blurX,blurY,strength,quality,inner,knockout);
参数:
color:― 光晕颜色,采用十六进制格式 0x RRGG*。默认值是 0xFF0000。
alpha:― 颜色的 Alpha 透明度值。有效值为 0 到 1。例如,.25 设置透明度值为 25%。默认值是 1。
blurX:― 水平模糊量。有效值为 0 到 255(浮点)。默认值是 6。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,它的呈现速度会比其它值更快。
blurY:― 垂直模糊量。有效值为 0 到 255(浮点)。默认值是 6。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,它的呈现速度会比其它值更快。
strength:― 压印或跨页的强度。该值越高,压印的颜色越深,而且发光与背景之间的对比度也越强。有效值为 0 到 255。默认值是 2。
quality:― 应用滤镜的次数。有效值为 0 到 15。默认值是 1,它表示低品质。值为 2 表示中等品质,值为 3 表示高品质。
inner:― 指定发光是否为内侧发光。值 true 表示内侧发光。默认值是 false,即外侧发光,它表示对象外缘周围的发光。
knockout:― 指定对象是否具有挖空效果。值为 true 将使对象的填充变为透明,并显示文档的背景颜色。默认值是 false(不应用挖空效果)。
效果:点击图片效果发生变化。
代码如下:
import flash.filters.*
var filter:GlowFilter = new GlowFilter();
my_mc.filters = [filter];
var i = 1;
var j =0.1;
my_mc.onRelease = function():Void {
if(filter.blurX<5){
i=1;
} else if (filter.blurX>250){
i=-1;
}
if(filter.alpha < 3){
j =0.1;
} else if(filter.alpha >8){
j=-0.1;
}
filter.blurX += i;
filter.blurY += i;
filter.color = random(16000000);
filter.alpha += j;
my_mc.filters = [filter];
}
4. 渐变发光滤镜:GradientGlowFilter
构造函数:
var filter:GradientGlowFilter = new GradientGlowFilter(distance,angleInDegrees, colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout);
参数:
distance:― 光晕的偏移距离。默认值为 4。
angle:― 角度,以度为单位。有效值为 0 到360。默认值是 45。
colors: ― 定义渐变的颜色的数组。例如,红色为 0xFF0000,蓝色为 0x0000FF,依此类推。
alphas: ― colors 数组中对应颜色的 Alpha 透明度值的数组。数组中每个元素的有效值为 0 到 1。例如,值为 .25 设置 Alpha 透明度值为 25%。
ratios: ― 颜色分布比例的数组。有效值为 0 到 255。该值定义宽度的百分比,颜色采样率为 100%。
blurX: ― 水平模糊量。有效值为 0 到 255。如果模糊量小于等于 1,则表明原始图像是按原样复制的。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
blurY:― 垂直模糊量。有效值为 0 到 255。如果模糊量小于等于 1,则表明原始图像是按原样复制的。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
strength: ― 压印或跨页的强度。该值越高,压印的颜色越深,而且发光与背景之间的对比度也越强。有效值为 0 到 255。值越大,压印越强。值为 0 意味着未应用滤镜。默认值是 1。
quality: ― 应用滤镜的次数。有效值为 0 到 15。默认值是 1,它表示低品质。值为 2 表示中等品质,值为 3 表示高品质。
type: ― 滤镜效果的放置。可能的值包括:
"outer":对象外缘上的发光
"inner":对象内缘上的发光;默认值
"full":对象顶部的发光
效果:
代码:
import flash.filters.*
var filter:GradientGlowFilter = new GradientGlowFilter();
filter.colors = [0xFFFFFF, 0xFF0000, 0xFFFF00, 0x00CCFF];
filter.alphas = [0.3, 0.5, 0.5, 0.5];
filter.ratios = [0, 63, 126, 255];
filter.blurX = 50;
filter.blurY = 50;
filter.type = "outer";
my_mc.filters = [filter];
5. 斜角滤镜:BevelFilter(斜角滤镜可产生三维效果。)
构造函数:
var filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
参数:
distance:― 斜角的偏移距离,以像素为单位(浮点)。默认值是 4。
angle:― 斜角的角度,0 至360度。默认值是 45。
highlightColor:― 斜角的加亮颜色 0xRRGG* 。默认值是 0xFFFFFF。
highlightAlpha: ―加亮颜色的 Alpha 透明度值。有效值为 0 到 1。例如,.25 设置透明度值为 25%。默认值是 1。
shadowColor:― 斜角的阴影颜色 0xRRGG* 。默认值是 0x000000。
shadowAlpha: ― 阴影颜色的 Alpha 透明度值。有效值为 0 到 1。例如,0.25 设置透明度值为 25%。默认值是 1。
blurX: ― 水平模糊量,以像素为单位。有效值为 0 到 255(浮点)。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
blurY: ― 垂直模糊量,以像素为单位。有效值为 0 到 255(浮点)。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
strength: ― 压印或跨页的强度。该值越大,压印的颜色越深,而且斜角与背景之间的对比度也越强。有效值为 0 到 255。默认值是 1。
quality: ― 应用滤镜的次数。默认值是 1,即表示低品质。值为 2 表示中等品质,值为 3 表示高品质。
type:― 斜角的类型。有效值为 "inner"、"outer" 和 "full"。默认值为 "inner"。
knockout: ― 应用挖空效果 (true),这将有效地使对象的填色变为透明,并显示文档的背景颜色。默认值是 false(不应用挖空效果)。
效果:
代码:
import flash.filters.*
var filter: BevelFilter = new BevelFilter ();
filter.distance = 8;
filter.highlightColor = 0xcccccc;
my_mc.filters = [filter];
你可以调整其它参数,创建不同的效果。
6. 渐变斜角滤镜:GradientBevelFilter
构造函数:
var filter:GradientBevelFilter = new GradientBevelFilter(distance, angleInDegrees, colors, alphas, ratios, blurY, quality, type, knockout);
参数:
distance: ― 偏移距离。有效值为 0 到 8。默认值为 4。
angle: ― 角度,以度为单位。有效值为 0 到360。默认值是 45。
colors: ― 渐变中使用的 RGB 十六进制颜色值的数组。例如,红色为 0xFF0000,蓝色为 0x0000FF,依此类推。
alphas: ― colors 数组中对应颜色的 Alpha 透明度值的数组。数组中每个元素的有效值为 0 到 1。例如,.25 设置透明度值为 25%。
ratios: ― 颜色分布比例的数组;有效值为 0 到 255。
blurX: ― 水平模糊量。有效值为 0 到 255。如果模糊量小于等于 1,则表明原始图像是按原样复制的。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
blurY: ― 垂直模糊量。有效值为 0 到 255。如果模糊量小于等于 1,则表明原始图像是按原样复制的。默认值是 4。作为 2 的乘方的值(如 2、4、8、16 和 32)经过了优化,呈现速度比其它值更快。
strength: ― 压印或跨页的强度。该值越高,压印的颜色越深,而且斜角与背景之间的对比度也越强。有效值为 0 到 255。值为 0 表明没有应用滤镜。默认值是 1。
quality: ― 滤镜的质量。有效值为 0 到 15。默认值是 1。几乎在所有情况下,有用值都是 1(低品质)、2(中等品质)和 3(高品质)。滤镜的值越小,呈现速度越快。
type: ― 斜角效果的放置。可能的值包括:
"outer" :对象外缘上的斜角
"inner" :对象内缘上的斜角
"full" :对象顶部的斜角
默认值为 "inner"。
knockout: ― 指定是否应用挖空效果。值为 true 将使对象的填充变为透明,并显示文档的背
效果:
代码:
var filter:GradientBevelFilter = new GradientBevelFilter();
filter.colors = [0x005500,0x005588 ,0xffffff, 0x00aa00];;
filter.alphas= [1,1, 0, 1];
filter.ratios= [0,64, 128, 255];
filter.blurX =20;
filter.blurY= 20;
filter.distance=32;
my_mc.filters =[filter];
7. 矩阵颜色滤镜:ColorMatrixFilter
使用这个滤镜可以将一个4x5的矩阵应到MC(或位图)上,从面改变MC的色相,透明度及亮度等。我想这个滤镜的难点应该是对这个矩阵的理解上。RGB 颜色由红绿蓝三种色组成,矩阵将各像素颜色拆分成红绿蓝三种色另加一个透明度。共四个通道。每个通道由5组值组成这就形成了一个4x5的矩阵。看看下图,来理解一下:
红 绿 蓝 透明度 结果
红色 1 0 0 0 0
绿色 0 1 0 0 0
蓝色 0 0 1 0 0
透明度 0 0 0 N 0(N为0.1-1)
从上面的矩阵中可看出,每个通道在其相应的位置设置了值,最小是0,最大为1,改变这些值就可改变图象的色相及透明度。结果的数值改变可改变图象的亮度。比如将矩阵中红色通道的值由1改为0.5,那么图象中的红色元素将会降低。
在实际应用中,将这个矩阵赋值给一个数组,再将这个数组作为ColorMatrixFilter类构造函数的参数,最后将MC的filters属性设为ColorMatrixFilter类的实例。这同使用其它滤镜一样。
先来做一个增加图片亮度的练习:
效果:
将代码改为:
import flash.filters.*;
var matrix:Array = new Array();
matrix = matrix.concat([1, 0, 0, 0, 100]); // red
matrix = matrix.concat([0, 1, 0, 0, 100]); // green
matrix = matrix.concat([0, 0, 1, 0, 100]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
my_mc.filters = [filter];
测试影片,可以片到图片亮度被增大了很多。这是将矩阵中红绿蓝通道的结果值都改为了100得到的结果。
下面一个练习是动态改变红绿蓝三种色的值,从而改变色相。通过鼠标在屏幕上的位置来确定各颜色的值,当鼠标移动时动态改变。
效果:
代码:
import flash.filters.*;
onMouseMove = function() {
var xPercent:Number = 1 - (_xmouse/Stage.width);
var yPercent:Number = 1 - (_ymouse/Stage.height);
var matrix:Array = new Array();
matrix = matrix.concat([yPercent, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, xPercent, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, xPercent, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
my_mc.filters = [filter];
}
8. 卷积滤镜:ConvolutionFilter
卷积滤镜同样用一个矩阵于图象可形成如模糊、边缘检测、锐化、浮雕和斜角等多种效果。卷积滤镜重新计算每个像素,并根据矩阵将像素及其周围的象素要加得也该像素的新颜色。最常用的矩阵是3x3的矩阵,如下图:
N N N
N P N
N N N
在这个矩阵中P代表本身的像素,而N代表周围的像素。那么下面这个矩阵:
0 0 0
0 1 0
0 0 0
可以看出将这个矩阵用于图象时,图象没有变化,因为除自已外周围的像素均为0,即周围像素对中间的P像素没有影响。
将矩阵存入一个数组,并将它作为ConvolutionFilter类构造函数的一个参数,可实现卷积滤镜效果,除了矩阵参数处ConvolutionFilter构造函数还有其它的一些参数:
matrixX ― 矩阵的 x 维度(矩阵中列的数目)。默认值是 0。
matrixY: ― 矩阵的 y 维度(矩阵中行的数目)。默认值是 0。
matrix: ― 用于矩阵转换的值的数组;返回一个副本。数组中的项数必须等于 matrixX*matrixY。
divisor: ― 矩阵转换中使用的除数。默认值是 1。这个参数如果与矩阵值的总和相等,那么图象的亮度无变化。比如这个矩阵:
0 1 0
1 1 1
0 1 0
里面有5个1,那么矩阵总值为5,如果divisor参设为5,则图象的亮度无变化。如果本参数为1,那么图象的亮度是原图象的5/1倍,这时图象就很亮了。如果本参数为10,那么原图片的亮度为5/10,显然图片就变暗了。
bias: ― 要添加到矩阵转换结果的偏差。默认值是 0。
preserveAlpha: ― 值为 false 表明卷积应用于所有通道,包括 Alpha 通道。值为 true 表示只对颜色通道应用卷积。默认值为 true。
clamp: ― 对于源图像之外的像素,如果值为 true,则表明通过复制输入图像给定边缘处的颜色值,沿着输入图像的每个边框按需要扩展输入图像。如果值为 false,则表明应按照 color 和 alpha 属性中的指定使用其它颜色。默认值是 true。
color: ― 要替换源图像之外的像素的十六进制颜色。
alpha: ― 替换颜色的 Alpha。
下面是几个基本效果的矩阵:
基本模糊(除数 5):
0 1 0
1 1 1
0 1 0
锐化(除数 1):
0, -1, 0
-1, 5, -1
0, -1, 0
边缘检测(除数 1):
0, -1, 0
-1, 4, -1
0, -1, 0
浮雕效果(除数 1):
-2, -1, 0
-1, 1, 1
0, 1, 2
练习:将上面几个矩阵效果应用于图片,点击图片一次,变换一种效果。
效果:
代码:
import flash.filters.*;
var i =0;
my_mc.onRelease = function(){
i++;
if(i>4){
i=1;
}
switch(i){
case 1:
var matrixArr:Array =[0,1,0,1,1,1,0,1,0];
var convolution:ConvolutionFilter = new ConvolutionFilter(3, 3, matrixArr,5);
my_mc.filters = [convolution];
break;
case 2:
var matrixArr:Array = [0, -1, 0,-1, 5, -1, 0, -1, 0];
var convolution:ConvolutionFilter = new ConvolutionFilter(3, 3, matrixArr,1);
my_mc.filters = [convolution];
break;
case 3:
var matrixArr:Array = [0, -1, 0,-1, 4, -1, 0, -1, 0];
var convolution:ConvolutionFilter = new ConvolutionFilter(3, 3, matrixArr,1);
my_mc.filters = [convolution];
break;
case 4:
var matrixArr:Array = [-2, -1, 0,-1, 1, 1,0, 1, 2];
var convolution:ConvolutionFilter = new ConvolutionFilter(3, 3, matrixArr,1);
my_mc.filters = [convolution];
break;
}
}
图片置换滤镜:
mapBitmap: ― 包含置换映射数据的 BitmapData 对象。
mapPoint: ― 一个 flash.geom.Point 值,它包含目标影片剪辑的左上角与映射图像左上角之间的偏移量。
componentX: ― 说明在映射图像中使用哪个颜色通道来置换 x 结果。 可能的值如下所示:
• 1(红色)
• 2(绿色)
• 4 (蓝色)
• 8 (alpha)
componentY: ― 说明在映射图像中使用哪个颜色通道来置换 y 结果。可能的值如下所示:
• 1 (红色)
• 2(绿色)
• 4(蓝色)
• 8 (alpha)
scaleX: ― 用于缩放映射计算的 x 置换结果的乘数。
scaleY: ― 用于缩放映射计算的 y 置换结果的乘数。
mode: [可选] ― 滤镜的模式。可能的值如下所示:
"wrap" -- 将置换值折返到源图像的另一侧。
"clamp" -- 将置换值锁定在源图像的边缘。
"ignore" -- 如果置换值超出了范围,则忽略置换并使用源像素。
"color" -- 如果置换值在图像外,则替换由滤镜的 alpha 属性和 color 属性组成的像素值。
color: [可选] ― 指定对于超出范围的替代应用什么颜色。置换的有效范围是 0.0 到 1.0。如果 mode 设置为 "color",则使用此参数。
alpha: [可选] ― 指定对于超出范围的替换应用什么 Alpha 值。它被指定为 0.0 到 1.0 之间的标准值。例如,0.25 设置透明度值为 25%。默认值是 0。如果 mode 设置为 "color",则使用此参数。
代码:
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.display.BitmapData;
var perlinBmp:BitmapData;
var displacementMap:DisplacementMapFilter;
perlinBmp = new BitmapData(my_mc._width, my_mc._height);
perlinBmp.perlinNoise(my_mc._width, my_mc._height, 10, Math.round(Math.random() * 100000), false, true, 1, false);
displacementMap = new DisplacementMapFilter(perlinBmp, new Point(0, 0), 1, 1, 100, 100, "color");
// my_mc.filters = [displacementMap];
my_mc.onRollOver = function():Void {
onEnterFrame = function (){
perlinBmp.perlinNoise(my_mc._width, my_mc._height, 10, Math.round(Math.random() * 100000), false, true, 1, false);
my_mc.filters = [displacementMap];
}
};
my_mc.onRollOut = function(){
delete onEnterFrame;
my_mc.filters = [];
}
Flash AS2入门教程第七课:影片剪辑第7节实现过渡 Flash AS2入门教程第七课:影片剪辑第6节使用遮罩 Flash AS2入门教程第七课:影片剪辑第10节用AS绘图 Flash AS2入门教程第七课第四节:影片剪辑的深度 AS入门教程第7课影片剪辑第7节-AS实现过渡效果[本文已收录教程库] - Flash互助... AS入门教程第7课影片剪辑-第9节使用滤镜[本文已收录教程库] - Flash互助课堂 -... AS入门教程第7课影片剪辑第5节拖动与碰撞检测[原创][本文已收录教程库] - Flash... AS入门教程第7课影片剪辑第6节使用遮罩[本文已收录教程库] - Flash互助课堂 - ... AS入门教程第7课影片剪辑第10节-用AS绘图[本文已收录教程库] - Flash互助课堂... AS入门教程第7课影片剪辑二节加载swf文件[原创][本文已收录教程库] - Flash互... AS入门教程第7课第12节-使用颜色[本文已收录教程库] - Flash互助课堂 - 中国... 会声会影 X2 - 影片剪辑 AS入门教程第7课第3节控制时间轴[原创][本文已收录教程库] - Flash互助课堂 -... Adobe Flash?Professional?CS5 * 关于嵌套的影片剪辑和父子层次... AS入门教程第7课综合练习-拼图游戏的制作[原创][本文已收录教程库] - Flash互助... 围棋入门教程:第七课?反提 围棋入门教程:第七课?反提 FLASH第七课 【电脑】大卫PS入门教程 第七课:图片的简单合成 大卫PS入门教程 第七课:图片的简单合成 AS入门教程第四课AS常用语句第三节-循环语句[原创][本文已收录教程库] - Flash... 影片拍摄与剪辑需要注意的十四戒条 Flash动画制作入门教程 首页>>视频教程>>flash入门教程