loadjd = Math.round(getBytesLoaded()/getBytesTotal()*100);load_mc._xscale = loadjd;
load_txt.text = loadjd +\"%\"; } else {
delete onEnterFrame; }
}
点击舞台上的场景按钮,点场景1,这回到了场景1,在action的第100帧(最后一帧)插入关键帧,打开动作面板,输入:
gotoAndStop(1);
为什么要加这句?因为在场景1的前面,我们放了一个加载条的场景,当场景1 播放完后,播放头将回到加载场景,而这时动画已加载,是不需要再播放加载场景的。所以用这一句将播放头回到场景1的第一帧,从而避开了加载场景。
测试影片,结果直接进入了场景1,没看到加载进度条。为什么呢?这是因为在本地影片加载速度太快,没法显示加载进度。没关系,不要关闭flash player,点 视图>下载设置,因为我们的动画太简单,所以选最上面的速度最慢的那个14.4k.这样这可模似在网上加载动画。点 视图>模似下载,怎么样看到了加载进度条了吧。
Flash as入门(10):影片剪辑的深度
--------------------------------------------------------------------------------
日期:2009-02-24 15 作者:sanbos 来源:中国教程网
本例继续讲解AS的基础知识,今天我们来学习Flash AS入门系列教程第七课第四节:影片剪辑的深度,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。
第4节 MC的深度
在flash创作环境中我们对层的概念已经比较熟悉了。深度与层的概念比较接近。每一个在舞台上的对象都有它自已的深度,深度数字大的盖住比它小的对象,这就象上面的层遮住下面的层一样。我们可以把MC放到-16384 至 1048575的任一深度上,但某一深度上原来已有一个对象时,那么新放入的对象将替换原来的对象。这可能会遇到一个问题,当我用使用 attachMovie(MovieClip.attachMovie 方法)、duplicateMovieClip(MovieClip.duplicateMovieClip 方法)或 createEmptyMovieClip(MovieClip.createEmptyMovieClip 方法)在运行时创建影片剪辑时,始终要指定MC的深度。应该用个什么深度值呢?如果指定的深度值上已有MC了,会不会将原来的覆盖了呢?为了解决这个问题,flash 为我们提供了getNextHighestDepth()方法。
getNextHighestDepth()方法:MC的这个方法将返回下一个可用的深度值。更好的的理解就是当前最大的深度值加1。因此用这个深度值,MC将在最上面。
比如:this.createEmptyMovieClip(\"my_mc\
getInstanceAtDepth()方法:这个方法将返回某个特定深度值上的MC实例。
比如要确定当前最大深度值的MC,可以用如下代码:
var zddepth = this.getNextHighestDepth()-1; //获得当前最大的深度值 var my_mc:MovieClip =this.getInstanceAtDepth(zddepth); getDepth()方法:返回某个MC的深度 比如要返回MC,my_mc的深度:
var mymcdepth = my_mc.getDepth();
swapDepths()方法:交换两个MC的深度值,如果MC正在执行补间,则补间会停止。 比如有两个MC:mc1和mc2,现在要交换这两个MC的深度 mc1.swapDepths(mc2);
下面通过一个练习来熟悉本节课所介绍的内容。
效果说明:用鼠标点击挡在下面的图片,这张图片将移到最上面一层来。
制作方法:
1.新建一flash文档,导入若干图片。
2.将这些图片分别做成MC,大小随意,但宽高不应超过200或可再小一些。在库中分别右击这些MC,点击“连接”,在弹出的面板中,在为ActionSpript导出前打钩。在标识框内输入:pic1.第二个MC则输入pic2,以此类推。
3.回到主场景,打开动作面板,输入下列代码:(注意下面的代码是以5张图片为例写的,如果你不是5张图片则应作相应修改,详细说明看后面的代码分析)
for(i=1;i<6;i++){
this.attachMovie(\"pic\"+i,\"pic\"+i+\"_mc\ var pic_mc = eval(\"pic\"+i+\"_mc\"); pic_mc._x = 150 +random(200);
pic_mc._y = 100 + random(200); }
pic1_mc.onRelease = function(){
var zddepth =_root.getNextHighestDepth()-1;
var zd_mc:MovieClip =_root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); }
pic2_mc.onRelease = function(){
var zddepth = _root.getNextHighestDepth()-1;
var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); }
pic3_mc.onRelease = function(){
var zddepth = _root.getNextHighestDepth()-1;
var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); }
pic4_mc.onRelease = function(){
var zddepth = _root.getNextHighestDepth()-1;
var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); }
pic5_mc.onRelease = function(){
var zddepth = _root.getNextHighestDepth()-1;
var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); }
代码分析:
首先用一个for循环,将库中的图片加载到舞台上,循环次数是你的图片元件的数量,下面i<6中的6用你的图片元件数量加1替换。我这里是5张图片,所以我用6。
for(i=1;i<6;i++){
接下来加载这些图片元件,这里加载的深度我们用到了this.getNextHighestDepth()方法。图片加载后指定图片的x,y坐标在一定的范围内随机的位置。这个范围应根据图片元件的大小来确定,不能太小,太小了,上面的图片会完全盖住下面的图片。也不能太大,太大了则不能产生重叠效果。总之就是要即要产生重叠效果,又不能完全盖住。
this.attachMovie(\"pic\"+i,\"pic\"+i+\"_mc\ var pic_mc = eval(\"pic\"+i+\"_mc\"); pic_mc._x = 150 +random(200);
pic_mc._y = 100 + random(200);
现在图片已加载到舞台上了,并产生了不完全重叠效果。接下来就是实现点击图片让该图片移到最上层,所以用到图片MC的onRelease事件,以第一张图片为例:
pic1_mc.onRelease = function(){
在这个事件执行中首先确定最上面的图片的深度值。上面介绍了getNextHighestDepth()返回的是最大的深度值加1,那么最大的深度值自然就是getNextHighestDepth()减1了。 var zddepth = _root.getNextHighestDepth()-1;
有了最大的深度值后,就可以确定最上面的图片是哪张了:
var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth);
最后将这张图片与最大深度那张图片交换深度,那这张图片深度值就最大了,当然也就在最上面了: this.swapDepths(zd_mc);
第一张图片的点击动作代码就完成了。下面写第二张图片的代码,因为每张图片点击事件中的代码是完全一样的,所以复制第一张图片的代码,粘帖到第一张图片代码的下面,将第一句pic1_mc.onRelease = function(){中的pic1改为pic2,就行了。
以后的以此类推,直到完成所有的图片的点击代码。
Flash as入门(11):拖动与碰撞检测
--------------------------------------------------------------------------------
日期:2009-02-24 15 作者:sanbos 来源:中国教程网
本例继续讲解AS的基础知识,今天我们来学习Flash AS入门系列教程第七课:影片剪辑第五节拖动与碰撞检测,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。
第五节 拖动与碰撞检测
AS的一个重要优势就是可以实现交互动画,一些特效不用AS也是可以做出来的,但交互的动画不用AS则是无法实现的。拖动MC则是交互动画的一个例子。
startDrag() 函数或 MovieClip.startDrag() 方法:
使用startDrag()可以实现拖动效果。格式:
MC.startDrag(一个布尔值,左边,上边,右边,下边);
这个方法中的所有参数都是可选的,即可要可不要。下面介绍一下这些参数:
一个布尔值:true或false。当设定为true时鼠标位置将锁定在要拖动的MC的注册点上。想一想我们要自定义鼠标指针,这个参数是不是很有用呢? 后面的4个边,确定了MC可以被拖动的范围。想一想我们要做一个控制滑条这几个参数是不是很有用呢?
下面练习一下:
自定义鼠标指针:
新建一个MC,画一个或找一个你喜欢的鼠标图形,图形应该有一个较尖的部位作为针尖吧?将这个针尖与窗口中的十字对齐。回到主场景,将这个MC拖到舞台上,打开属性面板,实例名称为:mouse_mc;打开帧动作面板输入:
Mouse.hide();
mouse_mc.startDrag(true);
测试影片,你会发现你的鼠标已经变成你喜欢的图形了。
代码中第一句将系统鼠标隐藏起来,第二句使你的图形可以拖动了,并且鼠标指针被定位在针尖处。使用自定义鼠标要注意的是,你不能再拖动第二个MC,因为一次只能拖动一个MC,当你拖动第二个MC时,你的鼠标图形将不会再被拖动了。
stopDrag()方法:
上面介绍了开始拖动MC的方法,开始拖动总得有停止拖的时候啊,这个方法就是停止拖动。我们回想一下拖动一个MC的过程,一般来说,都是点下鼠标左键不放,就可以拖动了,放开鼠标后就停止拖动,是这样的吧?所以一般将startDrag()放到MC的onPress事件(点下鼠标时)中,而将 stopDrag()放到onRelease事件(放开鼠标时)中。
滑动控制条:
有时我们会用到滑动控制条,比如控制音量大小,播放进度等。那么滑块就需要用到拖动的方法。 用矩形工具画一个细长的矩形,笔触填充公随你喜欢,要不要都行,至少要一个吧?将它转换为MC,双击它进入编辑状态,打开对齐面板选择相对于舞台,左对齐,回到主场景,打开属性面板,实例名称为blt_mc。然后再画一个很短的矩形,做滑块,也转换为MC,也同细长的矩形一样的做法,只是居中对齐,最后的实例名为hk_mc。
blt_mc移到你想它所处的位置,将hk_mc移到blt_mc上。
在帧动作面板中输入:
l = blt_mc._x;
r = l+blt_mc._width; h = blt_mc._y;
hk_mc.onPress = function(){ this.startDrag(\"true\ }
hk_mc.onRelease = function(){ stopDrag();
num = (hk_mc._x-blt_mc._x)/blt_mc._width; }
测试影片,拖动滑块会发现滑块只能在进度条的范围内拖动了。这是因为我们对startDrag()由于方法运用了4个参数:l,r,h.它们分别是进度条的左右边的x位置及y轴的位置。滑块的移动范围被限定在这个范围内。
从上面的代码中可以看出,当鼠标放开时会产生一个num变量,这个变量是用滑块的x坐标减去进度条的x坐标除以进度条的长度,这样就可以得到一个0~1的数字。有了这个数字,我们就可以用于任何需要用数字控制的对象了。
_droptarget 属性:
可能会有这种情况,我们拖动一个对象,想知道它是否被拖到了另一个对象之上,比如我们拖动苹果到盘子中,我们可能想知道苹果是否被拖到了盘子之上,如果是苹果则定位到盘子上,如果不是苹果就掉到深渊中。MC的_droptarget 属性将返回被自已重叠在下面的MC的名称。比如将苹果拖到盘子上时,苹果将盘子压在下面,苹果的_droptarget 属性将返回盘子的名称。但它返回的名称是带反斜杠的格式的,因此需要用eval()将其转换为标准格式,如:eval(苹果. _droptarget)这一句结果是:盘子。
做个练习熟悉一下:
在舞台上画两个园,不同的颜色,均转换为MC,实例名称分别为:mc1_mc,mc2_mc.右击mc1_mc>排列>移至顶层;打开动作面板,输入:
mcx = mc1_mc._x;
mcy = mc1_mc._y;
mc1_mc.onPress = function(){ this.startDrag(true); }
mc1_mc.onRelease = function(){ stopDrag();
if(eval(mc1_mc._droptarget)==mc2_mc){ this._x = mc2_mc._x; this._y = mc2_mc._y; } else {
this._x = mcx; this._y = mcy; }
}
测试影片,在mc1_mc上点击时可以拖动,将它拖到mc2_mc上放开鼠标,则与mc2_mc重叠,如果不在mc2_mc上放开鼠标,则回到原位。
这种检查一个MC是否被拖到另一个MC之上还有另一种方法,那就是碰撞检测。
hitTest()方法:
该方法将检测MC是否与某点或与另一MC发生相交(碰撞)。如果发生相交则返回true,否则返回false.
用法:1.与某点相交: MC.hitTest(x,y,true或false);
这将检测MC是否与括号中的x,y所确定的点(x,y)相交。后面的布尔值如果为ture,那么将检测MC的实际图形范围,如果为false则检测MC的外框是否与(x,y)相交。 2.MC与MC相交:MC.hitTest(另一MC).
把上面的的练习改为下面的代码,可得到相同的结果:
mcx = mc1_mc._x; mcy = mc1_mc._y;
mc1_mc.onPress = function(){ this.startDrag(true);
}
mc1_mc.onRelease = function(){ stopDrag();
if(this.hitTest(mc2_mc)){ this._x = mc2_mc._x; this._y = mc2_mc._y; } else { this._x = mcx; this._y = mcy; }
}
Flash as入门(13):用AS代码实现过渡
--------------------------------------------------------------------------------
日期:2009-02-25 16 作者:中国教程网 来源:sanbos
本例继续讲解AS的基础知识,今天我们来学习Flash AS入门系列教程第七课_影片剪辑第七节:用AS代码实现过渡,教程讲解了遮帘过渡、淡化过渡、飞行过渡、光圈过渡、照片过渡、像素溶解过渡、旋转过渡、挤压过渡、划入/划出过渡、缩放过渡的制作,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。
上一篇文章:Flash as入门(12):使用遮罩Mask
用AS实现过渡效果
效果演示:
http://www.webjx.com/flash/actionscript-9079.html
通过 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, 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,
irection:Transition.IN, duration:2, 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 as入门(15):filters类滤镜
--------------------------------------------------------------------------------
日期:2009-02-27 16 作者:sanbos 来源:中国教程网 本例继续讲解AS的基础知识,今天我们来学习Flash AS入门系列教程第七课:影片剪辑第9节使用滤镜,教程详细讲解了Flash的filters类为我们提供的9种滤镜效果,并用实例作了说明,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。
用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,hideObject);
投影影滤镜的参数比较多哈,还是一个一个介绍一下:
distance:― 阴影的偏移距离,以像素为单位。默认值是 4(浮点)。 angle:― 阴影的角度,0 到 360˚(浮点)。默认值是 45。
color:― 阴影颜色,采用十六进制格式 0xRRGGBB。默认值是 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,即不应用挖空效果。
hideObject:― 表示是否隐藏对象。如果值为 true,则表示没有绘制对象本身,只有阴影是可见的。默认值是 false(显示对象)。
做个练习,将上面练习的代码改为:
import flash.filters.*
var filter:DropShadowFilter = new DropShadowFilter(); my_mc.filters = [filter];
测试影片,效果如下:图片产生了投影效果。因为投影滤镜的所有参数都是可选的,所以我们没有给任何参数,即都使用默认值。
同样的我们可以在运时改变投影的参数,从而改变效果。我们将这个效果改变加在图片的点击事件上,即点击图片投影效果发生改变。这里改变了三个参数,偏移量,颜色(随机)和角度。
效果:
http://www.webjx.com/flash/actionscript-9081_2.html
代码如下:
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 RRGGBB。默认值是 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:― 斜角的加亮颜色 0xRRGGBB 。默认值是 0xFFFFFF。
highlightAlpha: ―加亮颜色的 Alpha 透明度值。有效值为 0 到 1。例如,.25 设置透明度值为 25%。默认值是 1。
shadowColor:― 斜角的阴影颜色 0xRRGGBB 。默认值是 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 as入门(16):用AS绘制各种图形
--------------------------------------------------------------------------------
日期:2009-02-27 16 作者:sanbos 来源:中国教程网
本例继续讲解AS的基础知识,今天我们来学习Flash AS入门系列教程第七课:影片剪辑第10节用AS绘图,教程详细讲解了运用AS绘制各种图形的方法,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。
用AS绘图
AS2.0这我们提供了一些绘图方法,利用这些方法,我们可以绘制一些图形。下面来认识一下这些方法。首先是画直线,要画线应先确定线的类型等,AS提供的是:
lineStyle() 方法:该方法确定线条的类型。
常用格式:MC.lineStyle(粗细,颜色,透明度)。该方法还有其它一些参数,本文就不介绍了。 比如:my_mc. lineStyle(1,0xff0000,100)
这就指明了线条粗细为1,颜色是红色,透明度为100%。
有了线条样式后就可以画直线了,首先将画笔移到要开始画直线的起始点上,AS提供了: moveTo()方法:该方法将画笔移到起画点上。 用法:MC.moveTo(x,y);
起画点有了,就可以画线了,AS提供了:
lineTo()方法: 该方法将从起画点到终点画一条直线,并将起画点移到终点。 用法:MC.lineTo(x,y)
有了上面的三个方法就可以画直线了,下面就画一条:
this.lineStyle(1,0xff0000,100); this.moveTo(0,0); this.lineTo(200,200);
测试影片,上面的代码画了一条从(0,0)到(200,200)的红色直线。
下面扩展一下,画个三角形:
this.lineStyle(1,0xff0000,100); this.moveTo(200,200); this.lineTo(300,200); this.lineTo(250,300); this.lineTo(200,200);
我想我们绘画,肯定不会甘心只画一些线条,还想画一些形状,下面的方法对我们这种愿望提供了可能。
beginFill()方法:该方法从字面上就能理解,开始填充。 用法:MC.beginFill(颜色,透明度)
endFill()方法:用beginFill()中的颜色填充图形。 比如将上面的三角形填上蓝色:
this.lineStyle(1,0xff0000,100); this.beginFill(0x0000ff,100); this.moveTo(200,200); this.lineTo(300,200); this.lineTo(250,300); this.lineTo(200,200); ebdFill();
测试影片,会看到一个红色笔触蓝色填充的三角形。
如果想要无笔触的三角形,那么上面第一句不要就行了。
看起来到目前为止,我们已经自认为已学会了用AS绘图了,很想跃跃欲试画点什么玩意儿,好吧,就满足你吧,下面我们来画一个五星吧^_^
用矩形工具画一个与舞始一样大的黑色矩形。为什么要画这个?很简单,黑色背景下红五星要好看些。为什么不直接将文档的背景色设为黑色?因为很多网站插入的swf文件默认是透明的,比如我们论坛。当然你完全可以连这个黑色矩形都用AS来完成。
将下列代码输入到帧动作面板中:
this.createEmptyMovieClip(\"wx_mc\ wx_mc._x = Stage.width/2; wx_mc._y = Stage.height/2;
wx_mc.beginFill(0xFF0000,100); wx_mc.moveTo(0,0); wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30); wx_mc.lineTo(0,0);
wx_mc.endFill();
wx_mc.beginFill(0xee0202,100); wx_mc.moveTo(0,0); wx_mc.lineTo(0,-100); wx_mc.lineTo(-25,-30); wx_mc.lineTo(0,0); wx_mc.endFill(); for(i=0;i<5;i++){
wx_mc.duplicateMovieClip(\"wx1\"+i,this.getNextHighestDepth()); wx1 = eval(\"wx1\"+i); wx1._rotation = i*72;
}
this.createEmptyMovieClip(\"xg_mc\ xg_mc._x = Stage.width/2; xg_mc._y= Stage.height/2; xg_mc.lineStyle(1,0xeed600,100); xg_mc.moveTo(0,-120); xg_mc.lineTo(0,-140); xg_mc.moveTo(10,-160); xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip(\"xg\"+j,this.getNextHighestDepth()); xg1_mc = eval(\"xg\"+j); xg1_mc._rotation = j*10; }
测试影片,效果出来了。
代码分析:
首先创建一个空的MC“wx_mc”用来绘制五星。并将wx_mc放到舞中央。 this.createEmptyMovieClip(\"wx_mc\
wx_mc._x = Stage.width/2; wx_mc._y = Stage.height/2;
接下来画一个红色三角形,从下面的代码中可以看到,三角形的右下角在wx_mc的注册点上,即舞台中央,这一点很重要,因为我们后面要旋转这个三角形。 wx_mc.beginFill(0xFF0000,100); wx_mc.moveTo(0,0); wx_mc.lineTo(0,-100); wx_mc.lineTo(25,-30); wx_mc.lineTo(0,0);
wx_mc.endFill();
接下来,继续画图又画了一个三角形,这个三角形与第一个三角形刚好水平相反,这样就组成了五星的一
只角,而这个三角形的颜色比第一个三角形略深,这样就形成了立体感。 wx_mc.beginFill(0xee0202,100); wx_mc.moveTo(0,0); wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30); wx_mc.lineTo(0,0); wx_mc.endFill();
有了一只角了,要形成五星就简单了,复制5份,然后每份旋转360/5x份数,五星就绘成了。 for(i=0;i<5;i++){
wx_mc.duplicateMovieClip(\"wx1\"+i,this.getNextHighestDepth());
wx1 = eval(\"wx1\"+i); wx1._rotation = i*72; }
五星画好了,还想加些光辉,那又新建一个MC,用来画光辉,就在五星外围画一条直线,然后复制直线36份,每10度放一份就行了。用同样的方法画第二层光辉。 this.createEmptyMovieClip(\"xg_mc\ xg_mc._x = Stage.width/2; xg_mc._y= Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100); xg_mc.moveTo(0,-120); xg_mc.lineTo(0,-140); xg_mc.moveTo(10,-160); xg_mc.lineTo(10,-180); for(j=0;j<37;j++){
xg_mc.duplicateMovieClip(\"xg\"+j,this.getNextHighestDepth()); xg1_mc = eval(\"xg\"+j); xg1_mc._rotation = j*10; }
上面画的图形全部是直线的,这时我们又想画点花儿什么的,需要用到曲线,有画曲线的方法吗?有,下面就来学习
curveTo() 方法:该方法画一条由起画点经控制点到终点的一条曲线。 用法:MC. curveTo(控制点x,控制点y,终点x,终点y);
有了画曲线的方法那就画个花儿吧。
代码:
this.createEmptyMovieClip(\"mh_mc\ mh_mc._x = Stage.width /2; mh_mc._y = Stage.height/2; mh_mc.beginFill(0xff0000,100); mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45); mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0); mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip(\"mh\"+i,this.getNextHighestDepth()); mh1_mc = eval(\"mh\"+i); mh1_mc._rotation= i*72; }
实际上这个花的画法跟五星差不多,只是这个是曲线的而已。
现在问题又来了,这花的颜色不理想,是纯色的,在flash创作工具中还有个叫什么渐变填充的家伙,可以搞出些更好的效果,在AS中同样有这家伙。
beginGradientFill()方法:该方法可实现渐变填充。
参数:fillType: ― 线性渐变用\"linear\",放射渐变用\"radial\"。
colors: ― 用于渐变色的 RGB 十六进制颜色值的数组;例如,红色为 0xFF0000,蓝色为 0x0000FF。可以至多指定 15 种颜色。对于每种颜色,请确保在 alphas 和 ratios 参数中指定对应值。
alphas: ― colors 数组中对应颜色的 Alpha 值数组;有效值为 0 到 100。如果值小于 0,则 Flash 使用 0。如果值大于 100,则 Flash 使用 100。
ratios: ― 颜色分布比例数组;有效值为 0 到 255。即渐变中每种颜色的比例值,可以理解为颜色面板中,渐变色的滑块的位置。比如在colors参数为:[0xFF0000,0x0000FF],本参数为:[250,255],那么就相当于在混色器中的这种情况:
matrix: ― 一个转换矩阵:
flash.geom.Matrix 类包括 createGradientBox() 方法,通过该方法可以方便地设置矩阵,以便用于 MovieClip 类的 beginGradientFill() 方法。 用法:首先需要导入flash.geom.Matrix类
import flash.geom.*
然后,创建一个flash.geom.Matrix类的实例,再调用createGradientBox方法:
matrix = new Matrix();
matrix.createGradientBox(渐变范围的宽,渐变范围的高,旋转, x轴方向的偏移量,y轴方向的偏移量); x轴方向的偏移量:一般为要填充的形状的x减去渐变范围的宽。 y轴方向的偏移量:一般为要填充的形状的y减去渐变范围的高。 根据形状可调。
这里边的4个参数想一下渐变填充工具就清楚了。
focalPointRatio: [可选] ― 在 Flash Player 8 中添加。一个数字,控制渐变焦点的位置。值 0 表示焦点位于中心。值 1 表示焦点位于渐变圆的一条边界上。值 -1 表示焦点位于渐变圆的另一条边界上。小于 -1 或大于 1 的值将被舍入为 -1 或 1。
有了这个方法我们就想把那朵花搞成桃花了,使用由红色到粉红色的放射填充。
效果:
代码:
import flash.geom.*;
this.createEmptyMovieClip(\"mh_mc\ mh_mc._x = Stage.width /2;
mh_mc._y = Stage.height/2;
var color:Array = [0xFF0000,0xfee7f8];
var alph:Array= [100,100]; var rotio:Array = [0,255]; var matrix = new Matrix();
matrix.createGradientBox(40,100,Math.PI,-20,-40);//这里要填充的形状注册点是(0,0)这样就算出了-20,和-40(调整后的)
mh_mc.beginGradientFill(\"radial\ mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45); mh_mc.curveTo(0,-60,10,-45); mh_mc.curveTo(20,-25,0,0); mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip(\"mh\"+i,this.getNextHighestDepth()); mh1_mc = eval(\"mh\"+i); mh1_mc._rotation= i*72; }
this.createEmptyMovieClip(\"hz_mc\ hz_mc._x =Stage.width/2; hz_mc._y = Stage.height/2; hz_mc.lineStyle(6,663333,100);
hz_mc.moveTo(0,0);
hz_mc.curveTo(-5,110,0,160);
this.createEmptyMovieClip(\"hy_mc\ hy_mc._x =Stage.width/2; hy_mc._y = Stage.height/2;
color = [0x0e730d,0x06db2b];
matrix.createGradientBox(60,20,Math.PI,10,50);
hy_mc.beginGradientFill(\"radial\ hy_mc.moveTo(0,70); hy_mc.curveTo(35,40,70,50); hy_mc.curveTo(35,90,0,70);
hy_mc.endFill();
hy_mc.duplicateMovieClip(\"hy1_mc\ hy1_mc._xscale = -100; hy1_mc._x =hy_mc._x -6; hy1_mc._y =hy_mc._y +10;
差不多了,再做两个练习,一个是涂鸦板的制作,一个是动态引导线的效果。 涂雅板的制作:
效果在左边选择颜色和粗细后,可在右边绘图。
按下图画好图形,并将每个图形转换为MC.
实例名称:
黑色-hs_mc; 红色-hongs_mc; 橙色-cs_mc; 黄色-huans_mc; 绿色-lus_mc; 蓝色_nans_mc; 紫色-zs_mc; 大园-m6_mc; 二园-m4_mc; 三园_m3_mc; 幺园-m1_mc;
新插入一层,打开帧动作面板,输入: var color = 0x000000; var dx =1;
var h:Boolean = true;
hs_mc.onRelease = function (){ color = 0x000000; }
hongs_mc.onRelease = function (){ color = 0xFF0000; }
cs_mc.onRelease = function (){ color = 0xFF9900; }
huans_mc.onRelease = function (){ color = 0xFFFF00; }
lus_mc.onRelease = function (){ color = 0x00FF00; }
nans_mc.onRelease = function (){
鼠绘引导线: 用鼠标画一条引导线,小球将按引导线运动.
画一个球,或者你喜欢的任何玩意儿,转换为MC,实例名称为:ball_mc. 然后在帧动作面板中输入: var a:Array;
this.onMouseDown = function() { this.lineStyle(1, 0x0000ff, 100); a = new Array();
a.push(_xmouse, _ymouse); this.moveTo(_xmouse, _ymouse); this.onMouseMove = function() { a.push(_xmouse, _ymouse); this.lineTo(_xmouse, _ymouse); }; };
this.onMouseUp = function() { delete this.onMouseMove;
var z:Number = new Number(); this.onEnterFrame = function() { ball_mc._x = a[z++]; ball_mc._y = a[z++]; if(z>a.length){ delete onEnterFrame; this.clear(); }; } };
color = 0x0000FF;
}
zs_mc.onRelease = function (){ color = 0xFF00FF; }
m1_mc.onRelease = function(){ dx = 1; }
m3_mc.onRelease = function(){ dx = 3;
}
m4_mc.onRelease = function(){ dx = 4; }
m6_mc.onRelease = function(){ dx = 6; }
onMouseDown = function(){ if(_xmouse >170){ h=true; }
lineStyle(dx,color,100);
moveTo(_xmouse,_ymouse);
}
onMouseMove = function(){ if(_xmouse <170){ h=false;
} if(h){
lineTo(_xmouse,_ymouse); } }
onMouseUp= function(){ h=false;; }