Flash8运动模糊

作者: egoldy

性质: 原创

阅读次数: 24445

发表时间: 2006-12-14 17:50:23


声明:此教程版权归webstudio.com.cn所有,转载请注明出处。



演示文件:

制作思路:创建我们必须的一个影片剪辑, 对其进行不断的复制, 控制它的移动,最后加入模糊效果.

操作方法:
1.新建一个Flash文档,将其命名为motionblur.fla.保存.文件的大小为500*300.
2.在主场影中绘制一个二维图像,它所添充的颜色有你自已来定,以及的他的形状,如果你喜欢,你可以制作成任意的形状.在本例中,我们绘制的是一个添了色的同心园.如下图所示:

注意一点,当前的图像是放大后的效果,在主场景中绘制完成后,将它的长宽大小设为25最好,不要过大.因我们在代码中还要对其进行缩放操作.
3.选中场景中的园环,按下F8,将其转换为影片剪辑,注意一点在转换为影片剪辑时要将的它的注意点置于中心位置,如下图所示:

4,删掉主场景中已创建的园环,我们一旦创建了影片剪辑,这个影片剪辑就会存在于库中,在后面的代码中我们将使用attachMovie方法从库中粘贴影片剪辑到场景中.ok.按下ctrl+l打开库面板,选中我们刚创建的影片剪辑,然后右击选择链接属性如下图所示:

完成后会弹出一个窗口,在链接窗口中,我们输入链接名称,这本例中输入ball.并钩选”为actionscript导出”确定,如下图所示:

4.返回到主场景中,选中层上的第一帧,按下F9打开Actionscript面板,我们准备输入代码.按照我们的思路,我们先来看复制并控制园环的移动.在其中加入如下代码:

  //定义要复制的总数
var num = 30;
//使用for循环开始复制
for (var i = 0; i<num; i++) {
    //设定随机缩放
    scale = random(300);
    //设定随机的_alpha透明度
    alpha = random(10000/scale)+40;
    //使用attachMovie将库中的ball贴加到场景中,同时定义一个引用名为temp_mc.
    var temp_mc = attachMovie("ball", "ball"+i, i);
    //指定temp_mc的属性值.
    with (temp_mc) {
        _x = random(Stage.width);
        _y = random(Stage.height);
        _xscale = scale;
        _yscale = scale;
        _alpha = alpha;
    }
    //针对temp_mc使用onEneterFrame进行循环以使所有的园环沿着光标的反向移动
    temp_mc.onEnterFrame = function() {
        Yspeed = (Stage.height/2-_ymouse)/this._yscale*12;
        Xspeed = (Stage.width/2-_xmouse)/this._xscale*12;
        
        //x,y方向的移动和条件限制
        this._y += Yspeed;
        if (this._y>Stage.height) {
            this._y = 0;
        }
        if (this._y<0) {
            this._y = Stage.height;
        }
        this._x += Xspeed;
        if (this._x>Stage.width) {
            this._x = 0;
        }
        if (this._x<0) {
            this._x = Stage.width;
        }
    };
} 


5.    此时你就可以测试你的影片,你就会发现现在我们的鼠标已经能够控制多个影片剪辑移动了,并且有一个特点,大的移动的慢,小的移动的快.

解释代码:

这段代码基本上分为两段,前面一段是我们是进行复制,复制出我们需要的30个影片剪辑,后半段是控制这30个影片剪辑的移动.
我们先看前半段

var num = 30;
//使用for循环开始复制
for (var i = 0; i<num; i++) {
    //设定随机缩放
    scale = random(300);
    //设定随机的_alpha透明度
    alpha = random(10000/scale)+40;
    //使用attachMovie将库中的ball贴加到场景中,同时定义一个引用名为temp_mc.
    var temp_mc = attachMovie("ball", "ball"+i, i);
    //指定temp_mc的属性值.
    with (temp_mc) {
        _x = random(Stage.width);
_y = random(Stage.height);
        _xscale = scale;
        _yscale = scale;
        _alpha = alpha;
    }
} 

如果你单独将这段代码粘到flash中,你会发现我们已经成功的复制出30个的影片剪辑,并且在这30个影片剪辑的大小,透明度均是不同的.这也是前面这 段代码的作用,这里我们使用了attachMovie的方法,将之前我们创建好的影片剪辑ball通过链接id将其不断的粘贴到场景中以达到不断复制的目 的.有一点在这段代码中我们指定的一个引用名为var temp_mc = attachMovie("ball", "ball"+i, i);
如果你最后一个大括号之前trace(temp_mc),你会得到下面的结果:

_level0.ball0
_level0.ball1
_level0.ball2
_level0.ball3
_level0.ball4
………….
_level0.ball29 

通过循环,我们得到了我们需要的所有复制后的影片剪辑实例.通俗的说,temp_mc是所有我们复制出的影片剪辑的引用名称.这样我们在后面使用代码如:

with (temp_mc) {
        _x = random(Stage.width);
_y = random(Stage.height);
        _xscale = scale;
        _yscale = scale;
        _alpha = alpha;
    } 

你所指定给的temp_mc的属性并不单独代表某一个,而是全部的影片剪辑,而每个我们指定的属性都是随机值,所以你在测试时看到的结果便是大小不同,alpha不同的园环.
接下来我们看后半段

temp_mc.onEnterFrame = function() {
        Yspeed = (Stage.height/2-_ymouse)/this._yscale*12;
        Xspeed = (Stage.width/2-_xmouse)/this._xscale*12;
        
        //x,y方向的移动和条件限制
        this._y += Yspeed;
        if (this._y>Stage.height) {
            this._y = 0;
        }
        if (this._y<0) {
            this._y = Stage.height;
        }
        this._x += Xspeed;
        if (this._x>Stage.width) {
            this._x = 0;
        }
        if (this._x<0) {
            this._x = Stage.width;
        }
    }; 

这半段的代码目的在于使用onEnterFrame帧循环通过_xmouse,_ymouse来控制园环的移动,我们在哪里体现的是光标移动的呢.如下:

Yspeed = (Stage.height/2-_ymouse)/this._yscale*12;
Xspeed = (Stage.width/2-_xmouse)/this._xscale*12; 

在这两行代码中,分别定义为x,y方向上的速度, 以屏幕为中心开始,计算鼠标与中心的距离,当光标与中心的位置越远时, Stage.height/2-_ymouse计算的值就越大,反之则越小,这样Xspeed和Yspeed的值就会有一个大小的和方向的变化,因为 _xmouse,和_ymouse是有正负之分的,同时我们还发现在缓动设定缓动系数时,我们使用this._xscale和this._yscale做 被除数,因为这两个值是随机的,同样会反映出如出Xspeed和Yspeed的大小之分,这也意味着,如果园环被缩放的很小,那么它的移动速度也是很快 的.反之移动速度就会较慢.ok.如果你理解了这两句,其它的代码,除了this._x+=Xspeed和this._y+=Yspeed是用来移动园环 外,其它均为限制园环的边界的.

6.现在我们已经成功的复制和控制了园环的移动.接下来我们要加入flash8的模糊滤镜以达到运动模糊的效果.打开actionscript面板,在原有代码的基础上修改.
我们在最前端添加两行.
先导入flash8的滤镜类

import flash.filters.*

然后我们创建模糊滤镜的实例

var blur:BlurFilter = new BlurFilter(blurX,blurY,1);

ok.创建完成后,我们注意到,在创建实例时并没有指定blurX,blurY的具体值的大小,因为它是变化,我们并不在这里指定.
接下来我们在Xspeed和Yspeed两行代码的后端加入三行代码:如下

//定义blur.blurX和blur.blurY的值,这个值是根据上面的Xspeed和Yspeed的变化而变化的.
        blur.blurX = Math.abs(Xspeed);
        blur.blurY = Math.abs(Yspeed);
        //指定应用滤镜
        this.filters = [blur]; 

前两行我们分别设定blur.blurX和blur.blurY的大小,第三行是针对temp_mc应用滤镜,其中的this便是指temp_mc.另外 一点,因为Xspeed和Yspeed的是大小变化的,所以这也正是我们想要的,它也会使blur.blurX和blur.blurY随着速度的变化而变 化,因为blurFilter的滤镜的blurX,blurY最小值不能小于1.而Xspeed和Yspeed是有正负之分的,所以我们要为它们增加 Math.abs取他们的绝对值,以保证blurFilter的有效.
Ok. 下面是全部的代码:

//导入滤镜类
import flash.filters.*;
//创建BlurFilter类的实例
var blur:BlurFilter = new BlurFilter(blurX, blurY, 1);
//定义要复制的总数
var num = 30;
//使用for循环开始复制
for (var i = 0; i<num; i++) {
    //设定随机缩放
    scale = random(300);
    //设定随机的_alpha透明度
    alpha = random(10000/scale)+40;
    //使用attachMovie将库中的ball贴加到场景中,同时定义一个引用名为temp_mc.
    var temp_mc = attachMovie("ball", "ball"+i, i);
    //指定temp_mc的属性值.
    with (temp_mc) {
        _x = random(Stage.width);
        _y = random(Stage.height);
        _xscale = scale;
        _yscale = scale;
        _alpha = alpha;
    }
    //针对temp_mc使用onEneterFrame进行循环以使所有的园环沿着光标的反向移动
    
    temp_mc.onEnterFrame = function() {
        Yspeed = (Stage.height/2-_ymouse)/this._yscale*12;
        Xspeed = (Stage.width/2-_xmouse)/this._xscale*12;
        //定义blur.blurX和blur.blurY的值,这个值是根据上面的Xspeed和Yspeed的变化而变化的.
        blur.blurX = Math.abs(Xspeed);
        blur.blurY = Math.abs(Yspeed);
        //指定应用滤镜
        this.filters = [blur];
        //x,y方向的移动和条件限制
        this._y += Yspeed;
        if (this._y>Stage.height) {
            this._y = 0;
        }
        if (this._y<0) {
            this._y = Stage.height;
        }
        this._x += Xspeed;
        if (this._x>Stage.width) {
            this._x = 0;
        }
        if (this._x<0) {
            this._x = Stage.width;
        }
    };
    
    //trace(temp_mc);
} 

7.现在就可以测试你的影片了.你就可看到你想要的效果了.motionblur.需要注意的是我们在创建blur:BlurFilter = new BlurFilter(blurX,blurY,1)时,其中最后的参数1,是blur的质量,这里的建议最佳值是1,当设为2或3时,运动会有不流畅的 感觉.它会吃掉你大量的cpu.


ps by egoldy: 我们学习使用attachMoive复制影片剪辑,以及如何使用鼠标控制影片剪辑的移动,以及将模糊滤 镜应用到actionscript 运动的影片剪辑上.以实现你要的效果.通过以上的例子,你可以举一反三,只要掌握了应用滤镜和如何变化它们的参数,可以制作出各种各样的模糊效果.在应用 其它滤镜时思路上也基本上是大同小异的。

 

讨论及源文件下载

服务项目_SERVICE

关于我们

万博思图(北京)信息技术有限公司,专业的flash,flex开发团队,5年经验。公司致力于互联网上的业务的开展,对于互动网站行销,互联网应用程序开发有成熟的解决方案。我们关注互联网市场动态,关注新技术,更注重在新的领域不断探索发现。
万博思图业务内容主要包括企业品牌Flash网站开发,企业形象宣传Flash设计,动画,多媒体演示,Flex企业级应用程序开发,拥有众多成功案例,欢迎来电咨询。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝阳区朝外SOHO D 座727室 邮编: 100026 EMAIL: WEBSTUDIO@WEBSTUDIO.COM.CN
电话: 010-59070059 / 010-86390986-802  手机: 13693660520 传真: 010-59070059-801
京公网安备:110108006741      京ICP备08002333号-4
王先生