Flash动画制作教程:好看的有星火特效的动画

作者:网络 来源:佚名 更新时间:2009-10-21 22:27:32 点击:

本例主要是在上一个实例的基础上进行扩展,计算鼠标跟随对象来产生具有一定规律的星火特效。

本例思路  导入背景素材,然后制作出星火特效。创建文档类,产生鼠标跟随的多角星形特效;创建元件类的扩展类,产生随机大小的火花效果。

part 1  制作星火特效(1)新建一个大小为500×300像素,帧频为30fps的空白文档。按ctrl+r组合键导入本书配套光盘中的“chapter08/素材/西湖夜景.jpg”文件,然后设置其坐标为(0,0),如图8-1所示,再采用前面的方法在“属性”面板中添加main文档类。

图8-1  导入背景

(2)按ctrl+f8组合键新建一个影片剪辑(名称为star_mc),进入该影片剪辑的编辑区域,然后按住shift+alt组合键的同时使用“椭圆工具”在该影片剪辑的中心点绘制一个圆形。

图8-2  绘制圆形

技巧与提示:
图形的填充色类型为“放射状”,第1个色标颜色为(r:255,g:0,b:0),第2个色标颜色为(r:153,g:0,b:0),第3个色标颜色为(r:153,g:0,b:0),alpha为0%。
(3)新建一个star图层,再单击“工具箱”中的“多角星形工具”按钮 ,并在“属性”面板中设置好该工具的参数,然后按住shift+alt组合键的同时在影片剪辑的中心点绘制一个如图8-3所示的星形。

图8-3  绘制多角星形

|||

(4)使用“选择工具”调整好星形的顶点位置,如图8-4所示。


 

图8-4  调整顶点

(5)选择调整好的多角星形,然后原位复制出一份,按ctrl+alt+s组合键打开“缩放和旋转”对话框,设置缩放为40%,再设置其颜色为白色,如图8-5所示。

图8-5  拷贝并缩放图形

(6)返回到“场景1”,按ctrl+f8组合键新建一个影片剪辑(名称为magic_mc),再设置填充类型为“放射状”,第1个色标颜色为(r:255,g:255,b:255), 第2个色标颜色为(r:255,g:255,b:204),第3个色标颜色为(r:255,g:204,b:0),第4个色标颜色为(r:255,g:102,b:0),第5个色标颜色为(r:153,g:0,b:0),alpha为0%,然后按住alt键的同时使用“矩形工具”以该影片剪辑中心点为起点绘制一个如图8-6所示的矩形。

图8-6  绘制矩形

(7)使用“任意变形工具”选择矩形,然后按ctrl+t组合键打开“变形”面板,设置旋转为45°,再单击“重制选区和变形”按钮 ,复制出3份图形,如图8-7所示。

图8-7  复制图形

(8)复制出5个图形,然后将其调整成如图8-8所示的颜色,再将复制出的图形转换为影片剪辑,并将其分别命名为01、02、03、04和05 。

图8-8  复制图形

(9)将01、02、03、04和05 影片剪辑分别放置在magic_mc图层的5个关键帧上,然后分别为其添加不同的“发光”滤镜,再新建一个as图层,最后在“动作-帧”面板中输入stop():程序,如图8-9所示。


 

图8-9  应用滤镜效果


|||

part 2  创建元件类(1)采用前面的方法分别为magic_mc和star_mc影片剪辑添加元件类,如图8-10所示。

图8-10  添加元件类

(2)新建一个actionscript文件,将其命名为main,然后将其保存在该实例的文件夹中,再输入控制代码。


/**    

* 该类为主程序类    

* @author lbynet    

* @version 0.1    

*/    

package {     

    import flash.display.sprite;     

    import flash.display.movieclip;     

    import flash.events.event;     

    import flash.events.mouseevent;     

    import flash.ui.mouse;     

    public class main extends sprite {     

             

        private var star:movieclip;     

    

        public function main() {     

    

            mouse.hide();     

            this.star = new star_mc();     

            addchild(star);     

            stage.addeventlistener(mouseevent.mouse_move, movehandler);     

        }            

        private function movehandler(e:mouseevent):void {     

            this.star.x = stage.mousex;     

            this.star.y = stage.mousey;     

                 

            var _mc = new magic_mc();     

            _mc.x = stage.mousex;     

            _mc.y = stage.mousey;     

            addchild(_mc);     

            _mc.addeventlistener(event.enter_frame, removedrop);     

        }     

        private function removedrop(event:event) {     

            var _mc:movieclip = event.target as movieclip;     

                 

            if (_mc.scalex <= 0) {     

                _mc.removeeventlistener(event.enter_frame, removedrop);     

                removechild(_mc);     

            }     

            //trace(this.numchildren)     

        }     

             

    }     

技巧与提示:
该文档类基本包含了“星星洒落”实例中main文档类的知识,此外第18行代码为mouse类的hide()方法,用于隐藏鼠标指针,在使用该方法前必须先导入mouse类(如第11行代码)。
该文档类定义了一个私有属性star,第19行代码是为该属性赋值,值为所创建的元件类(star_mc),并将其添加到显示列表中(如第20行代码),而24和25行代码是为该元件类应用鼠标跟随效果。

|||

(3)同样新建一个actionscript文件,然后输入控制代码。

/**    

* 该类为扩展元件类    

* @author lbynet    

* @version 0.1    

*/    

package {     

         

    import flash.display.movieclip;     

    import flash.events.event;     

    

    public class magic_mc extends movieclip {     

             

        private var dis:number;     

             

        public function magic_mc() {     

            init();     

        }     

        private function init() {     

            var random = 1 + math.round(math.random()*4);     

            this.gotoandstop(random);     

                 

            this.scalex = this.scaley = math.random();     

            //产生随机数-5到5之间的随机数     

            dis = math.round((math.random()-.5)*10);     

            this.addeventlistener(event.enter_frame,enterframehandler);     

                 

        }     

        private function enterframehandler(event:event) {     

                 

            this.y += 5;     

            this.x += dis;     

                 

            this.scalex -=.005;     

            this.scaley -=.005;     

        }     

             

    }     

}  

技巧与提示:
第19和20行代码是为该元件类创建一个1~5之间的随机数,使该影片剪辑元件类在实例化(被创建时)时将播放头移到并停止在指定的时间帧上。
math.random()方法产生0~1之间的随机数,math.random()*4方法返回到0~4之间的随机数,而math.round()方法用于向上或向下舍入为最接近的整数并返回该值,所以1+math.round(math.random()*4)方法取得1~5之间的随机整数值;gotoandstop()语句使影片剪辑的播放头移到并停止在指定的时间帧上。
通过使用math.random()-0.5 方法来生成-0.5~0.5之间的随机数,然后乘以10得到-5~5之间的随机数,再使用math.round方法进行舍入并取得整数,这样当鼠标指针由下往上移动时,就会产生星火飘落的效果,如图8-11所示。

图8-11  星火飘落效果

第30行代码是为火花加入y轴坐标方向上的一个固定加速度,而第31行代码则是火花在x轴坐标方向上的一个-5~5之间的随机加速度值。

(4)按ctrl+enter组合键发布程序。

>>出自《flash cs4动画设计与制作208例》(转载请保留出处)