学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Flash >> 用Flash AS代码制作美丽光影变幻动画


用Flash AS代码制作美丽光影变幻动画


  本例中我们用Flash8 的Blendmode来制作美丽光影变幻动画。

  效果演示:

/imagelist/2007/326/8174i43752b6.swf

  制作思路: 这个影片剪辑中包含了五帧,每一帧上有不同颜色的小球,我们通过Actionscript代码来控制跳定位在不同颜色的小球上,从而实现不同颜色小球之间相互叠加,并在场景中复制,同时通过Actionscript控制小球的自动移动,并应用融合效果。

  制作方法:
  1.新建一个Flash文档,文件的场景大小设置为590*350.背景为黑色.帧频设置为31,将其另存为blendmode3.fla.
  2.打开新建的blendmode3.fla.在主场景中绘制一个38*38大小的园形二维形体,按下shift+F9打开混色器,选择放射状添充,当选择蓝色,如下图所示.

Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

  注意右边的混色器,在下面的滑块中,我们左边用的是蓝色,右边是也蓝色,但它的透明度是0,添充后效果如下图所示。

Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

  注意这个园形的大小当前为我们放大后观看的效果,它的原本大小为38*38。

  3.选中这个园形按下F8键,将其转换为图形符号,命将它的名称命名为Blue.同时注意它的注册点。将注册点置于中心位置。如下图所示。

Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

  4.确定后我们就创建完成了Blue符号,依照相同的方法,我们需要创建另外4种颜色的小球,在本例中我们创建了如下几种颜色的小球。

Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

  5.还有一个创建不同颜色小球的简单的方法,选中我们刚创建的蓝色小球,右击选择直接复制。然后在进入到复制后的图形元件内部,进行修改颜色。

  6.创建完多个小球之后,我们在主场景保持空的。如果场景上有图形元件要删去。 然后按下Ctrl+F8.创建一个新的影片剪辑,我们将它命名为Clip.然后将我们刚刚他建的五个不同颜色的小球元件,从库中拖至clip影片剪辑的帧上,如下图所示。

Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

   7.ok.完成了这一步之后,返回到主场景中,选中库中我们刚刚创建的clip影片剪辑,右击选择链接。会打开链接标识窗口。如下图所示。

  

Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

  在打开的窗中,先选中”为Actionscript导出”,然后在链接标识处输入出境partical名称。确定。我们在此处创建的链接名是为我们在主帧上添写代码时,用来使用attachMovie进行贴加复制操作的。

  8.完成上面的操作之后。选中主场景上的第一帧,按下F9,打开Actionscript面板。我们准备输入代码。

  • 第1页:彩色小球
  • 第2页:AS代码控制(一)
  • 第3页:AS代码控制(二)
  •   代码如下:

    //定义中心位置 
    var cx = 180;
    var cy = 180;
    //设定循环20次,准备从库中复制链接id为partical的影片.
    for (var i = 0; i<20; i++) {
        //复制影片剪辑,引用名称为mc.
        var mc = this.attachMovie("partical", "p"+i, i);
        with (mc) {
            //初始化影片剪辑的位置,注意此时cx,cy是用来调整mc实例的偏移位置的.
            _x = cx+Math.random()*60;
            _y = cy+Math.random()*60;
        }
        //针对mc应用融合模式类型"add"
        mc.blendMode = "add";
        //设定mc实例的角度随机值
        mc.tx = random(360);
        mc.ty = random(360);
        //设定用于mc角度的增量随机值
        mc.xtempo = Math.random()/10;
        mc.ytempo = Math.random()/10;
        //设定mc实例的速度随机值
        mc.xd = Math.random()*10+1;
        mc.yd = Math.random()*10+1;
        mc.x0 = mc._x;
        mc.y0 = mc._y;
        //跳转到指定的帧,以变换不同颜色的小球上.
        mc.gotoAndStop(random(5)+1);
        //通过onEnterFrame循环,来让粒子移动.
        mc.onEnterFrame = function() {
            this.tx += this.xtempo;
            this.ty += this.ytempo;
            this._x = this.x0+Math.sin(this.tx)*this.xd;
            this._y = this.y0+Math.cos(this.ty)*this.yd;
        };
        
    }

      9,测试你的影片,你就会看到如下面的效果。

    Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

      代码解析:
      首先从整段上代码上,我们实际上只用了一个for循环。这个for循环的作用是复制20个链接名为partical的影片剪辑。然后我们在循环的内部对复制后的粒子引用名mc进行初始化,控制。
      起始的两行是用来调整所有粒子的相对屏幕中的位置的。

      代码:

    //定义中心位置 
    var cx = 180;
    var cy = 180;

      接下来我们从for循环的内部开始说起,我们将它分为块,一块是初始化复制后的粒子,另一段是为粒子实例mc 加入动态属性,为后面的控制移动做准备。第三块则是使用onEnterFrame循环来控制移动。

      初始化复制后的粒子

      代码:

    //复制影片剪辑,引用名称为mc. 
        var mc = this.attachMovie("partical", "p"+i, i);
        with (mc) {
        //初始化影片剪辑的位置,注意此时cx,cy是用来调整mc实例的偏移位置的.
            _x = cx+Math.random()*60;
            _y = cy+Math.random()*60;
        }

      这一段代码,现在来讲我们已经很熟知了,我们通过顶端的for循环20次。将库中的链接名为partical的粒子复制到场景中。复制的方法我们使用是的是attachMovie的方式,复制后的影片剪辑更名为”p” +I,也就是说你复制的结果应是p0,p1,p2,p3…..p19,而所有的这些影片剪辑我们为它起个实例名为mc.它代表了所有复制得到的影片剪辑。在with内部,我们开始指定这些粒子的初始位置。注意此时我们用上了cx,cy.并且加上了随机数60,也就是说料子初始化的位置在180-240的位置之间。

      为粒子实例mc 加入动态属性

      代码:

          //针对mc应用融合模式类型"add" 
        mc.blendMode = "add";
        //设定mc实例的角度随机值
        mc.tx = random(360);
        mc.ty = random(360);
        //设定用于mc角度的增量随机值
        mc.xtempo = Math.random()/10;
        mc.ytempo = Math.random()/10;
        //设定mc实例的速度随机值
        mc.xd = Math.random()*10+1;
        mc.yd = Math.random()*10+1;
        mc.x0 = mc._x;
        mc.y0 = mc._y;
        //跳转到指定的帧,以变换不同颜色的小球上.
        mc.gotoAndStop(random(5)+1);

      在这段代码的开始的位置mc.blendMode ="add" 便是我们加入融合模式的重点所在了,如果没有这一些就不会出来相叠加后的融合效果。但实现它的前题是我们必须要处理如基本了粒子活动,所以习惯上我们都是最后才加上滤镜或是融合模式。在这段代码中,所有的都是为第三段的循环准备的。其中有两句是用来做为角度的增量随机值的。这个角度增量值实际是为了在onEnterFrame循环中增加的角度的变化。使效果变得更明显。这一段中的最后一句也是重点,因为我们在partical的影片剪辑中放置了五个不同颜色的小球,我们通过随机跳转命令来达到不同颜色小球的切换。

  • 第1页:彩色小球
  • 第2页:AS代码控制(一)
  • 第3页:AS代码控制(二)
  •   用onEnterFrame循环来控制移动

      代码:

      //通过onEnterFrame循环,来让粒子移动. 
        mc.onEnterFrame = function() {
            this.tx += this.xtempo;
            this.ty += this.ytempo;
            this._x = this.x0+Math.sin(this.tx)*this.xd;
            this._y = this.y0+Math.cos(this.ty)*this.yd;
        };

      在这段代码中,通过将前面定义的动态属性,应用在onEnterFrame循环中,起到决定性作用是.

      代码:

    this._x = this.x0+Math.sin(this.tx)*this.xd; 
    this._y = this.y0+Math.cos(this.ty)*this.yd;

      其中this.tx,this.ty,this.xd,this.yd.均为前面定义的动态属性。我们使用了sin()和cos ()方法是为了使每个粒子自身有一个环形的运动路线。

    Ok.在整段代中,我们看到使用融合模式blendmode只有一行,但在这里它显得尤为重要,加上与去掉效果是截然不同的。

      现在你就可以测试你的影片了。
      接下我们要在上面的基出上进行一下变化。看看效果会有什么不同。
      我们现在要增加粒子的大小和范围。代码做如下的修改。

      代码:

    //定义中心位置 
    var cx = 0;
    var cy = 0;

    //设定循环20次,准备从库中复制链接id为partical的影片.
    for (var i = 0; i<100; i++) {
        //复制影片剪辑,引用名称为mc.
        var mc = this.attachMovie("partical", "p"+i, i);
        with (mc) {
            //初始化影片剪辑的位置,注意此时cx,cy是用来调整mc实例的偏移位置的.
            _x = cx+Math.random()*590;
            _y = cy+Math.random()*350;
            _xscale = _yscale = 100 * Math.random()*5+1;
        }
        //针对mc应用融合模式类型"add"
        mc.blendMode = "add";
        //设定mc实例的角度随机值
        mc.tx = random(360);
        mc.ty = random(360);
        //设定用于mc角度的增量随机值
        mc.xtempo = Math.random()/10;
        mc.ytempo = Math.random()/10;
        //设定mc实例的速度随机值
        mc.xd = Math.random()*10+1;
        mc.yd = Math.random()*10+1;
        mc.x0 = mc._x;
        mc.y0 = mc._y;
        //跳转到指定的帧,以变换不同颜色的小球上.
        mc.gotoAndStop(random(5)+1);
        //通过onEnterFrame循环,来让粒子移动.
        mc.onEnterFrame = function() {
            this.tx += this.xtempo;
            this.ty += this.ytempo;
            this._x = this.x0+Math.sin(this.tx)*this.xd;
            this._y = this.y0+Math.cos(this.ty)*this.yd;
        };
        
    }

      斜体加粗的代码是我们所修改的位置,我们增加了粒子的数量,同时加入了_xscale._yscale.缩放的随机值,这样便会放大粒子增加粒子的重合度。效果如下。

    Flash8_Blendmode制作美丽光影变幻动画_天极设计在线整理

      接下来我们在这段代码的基础上在次进行修改。我们此次要变换一下融合模式,就会得到不同的效果。如下代码。

      代码:

    //定义中心位置 
    var cx = 0;
    var cy = 0;
    //设定循环20次,准备从库中复制链接id为partical的影片.
    for (var i = 0; i<100; i++) {
        //复制影片剪辑,引用名称为mc.
        var mc = this.attachMovie("partical", "p"+i, i);
        with (mc) {
            //初始化影片剪辑的位置,注意此时cx,cy是用来调整mc实例的偏移位置的.
            _x = cx+Math.random()*590;
            _y = cy+Math.random()*350;
            _xscale = _yscale = 140 * Math.random()*5+1;
        }
        //针对mc应用融合模式类型"add"
        mc.blendMode = "hardlight";
        mc.cacheAsBitmap = true;
        //设定mc实例的角度随机值
        mc.tx = random(360);
        mc.ty = random(360);
        //设定用于mc角度的增量随机值
        mc.xtempo = Math.random()/10;
        mc.ytempo = Math.random()/10;
        //设定mc实例的速度随机值
        mc.xd = Math.random()*10+1;
        mc.yd = Math.random()*10+1;
        mc.x0 = mc._x;
        mc.y0 = mc._y;
        //跳转到指定的帧,以变换不同颜色的小球上.
        mc.gotoAndStop(random(5)+1);
        //通过onEnterFrame循环,来让粒子移动.
        mc.onEnterFrame = function() {
            this.tx += this.xtempo;
            this.ty += this.ytempo;
            this._x = this.x0+Math.sin(this.tx)*this.xd;
            this._y = this.y0+Math.cos(this.ty)*this.yd;
        };
        
    }

      斜体加粗的代码为我们所修改过的位置,我们增大了缩放,同时将融合模式换成了hardlight.当然你可以试一下其它的融合方式,同时我们增加了mc.cacheAsBitmap = true.通过这一句是加速我们的影片剪辑的运算速度。测试的效果如下。

    /imagelist/2007/326/8174i43752b6.swf

    技术文章快速查找

    栏目导航
    软件应用
    ·操作系统 ·杀毒防黑 ·应用软件
    ·聊天软件 ·网络软件  
    Web开发
    ·ASP ·JavaScript ·CGI
    ·JSP ·VbScript ·Web服务器
    ·PHP ·XML  
    开发语言
    ·VB ·VC ·ASP.NET
    ·Java ·C/C++ ·Delphi
    数据库开发
    ·MySQL ·SQL/Access ·PowerBuilder
    ·Oracle ·DB2  
    网站设计
    ·Flash ·Dreamweaver ·HTML/CSS
    ·Fireworks ·FrontPage  
    平面设计
    ·Photoshop ·CorelDraw ·AutoCAD
    ·FreeHand ·Illustrator ·3DsMAX
    媒体动画
    ·Director ·Authorware ·Maya
    ·视频处理    


    相关软件 产品库推荐
    ·笔记本 ·台式机 ·服务器
    ·数码相机 ·手机 ·GPS
    ·DV摄像机 ·MP3 ·MP4
    ·CPU ·硬盘 ·内存
    ·主板 ·显卡 ·显示器
    ·打印机 ·投影机 ·路由器

    还没人留言,抢个先,哈哈!
    对"用Flash AS代码制作美丽光影变幻动画"的评论 - 快速回贴
    内容:
      [完成后可按Ctrl+Enter发布]

    百度中 用Flash AS代码制作美丽光影变幻动画 相关内容
    Google搜索中 用Flash AS代码制作美丽光影变幻动画 相关内容
    雅虎中 用Flash AS代码制作美丽光影变幻动画 相关内容
    Sogou搜索中 用Flash AS代码制作美丽光影变幻动画 相关内容

    相关软件 最新回复帖子:

    ·没有mysql支持时的替代方案
    ·一个可以发送附件及HTML格式邮件的PHP类
    ·AutoCAD打造精致三维鸟笼实例详解
    ·Photoshop自定义水晶字特效样式
    ·AutoCAD三维基础实例教程
    ·PS为黑背景长发美女照片抠图换背
    ·用Photoshop自制个性摩托车贴花小经验
    ·轻松几步将美女照片处理为手工素描
    ·巧用Photoshop画笔轻松绘制创意特效
    ·用Photoshop通道将模糊肖像照片清晰化


      相关软件 用Flash AS代码制作美丽光影变幻动画相关文章
    Flash中有关层的深度处理的常用函数 如何用AS代码隐藏Flash的右键菜单
    Flash动画实例:美丽蜻蜓飞舞 Flash打造窗纱随风飘动的音乐动画
    Flash AS动画实例:风吹云飘草动 Flash 动画人物角色行走的几种实现方式
    Flash AS代码制作鼠标触发图片缓冲放缩 精简Flash文件体积的几个小技巧
    编写Flash AS代码实现按钮触发全屏动画 Flash片头加载loading与V2组件讨论
    Flash中定点移动的解决方案分析 Flash加载外部文件的各种方法与技巧
    Flash动画制作过程概述及时间控制技巧 Flash动画技巧:动画人物走路的动作规律
    Flash电子杂志常用滚动区域控制代码 在Mozilla和Firefox中实现Flash透明背景
    Flash的动态文本如何调用外部文本文件 让Flash调用符合web标准 消除浏览器影响
    Flash AS代码实例:仿贝塞尔曲线控制 用Flash AS3制作统计饼图动画效果