如何用Flash制作逼真的喷泉动画

作者:课课家教育更新于： 2019-03-16 20:42:30

　　喷泉动画属于流水动画的一种，在网络上经常可以见到相关的GIF动画，偶尔用来点缀一下在网页也是相当不错，现在我们就来进行讲述一个简单易学的喷泉动画制作过程，本动画可扩展性较强，有兴趣的可以一起来试试。

　　具体步骤：

　　一、先来启动Flash软件，建立一个AS3.0文档，舞台的大小选择默认，颜色选择黑色（这里我们用到的是FlashCC，其实用Flashcs4、cs5或者cs6制作，方法都是相同的。）

　　二、接下来我们先下载一张背景图片，只要适合制作喷泉效果就行，把图片导入到库，再将图片重命名为“背景图片”；现在我们来制作喷泉设备，先下载一张带有喷泉设备的图片，将图片导入到库，然后在Flash中抠图（抠图的细节方法就不在这里啰嗦了），把图片中的喷泉设备抠出来，将它转换为图形元件，并且命名为“喷泉设备”。

　　现在把这里例子所用到的图片素材提供给大家练习来使用：

　　背景图片

　　喷泉设备

　　（这里提供的是已经抠好的透明PNG图片，可以直接导入Flash软件中来使用）

　　三、制作水滴元件：

　　1、先新建一个影片剪辑元件，命名为“水滴”，在该编辑区内点击选择时间轴第一帧，然后选取椭圆工具，在舞台上画出一个椭圆，把椭圆设置为2X6像素，无边，白色，并且要把这个画好的雨滴小椭圆移动到舞台上大致左上方的位置（位置是代码中数据决定的），如图1所示：

　　（图1）

　　2、现在打开库面板，右键单击库中的该影片剪辑元件－属性，再打开属性面板，如图2所示：

　　（图2）

　　3、然后点击“高级”按钮，打开属性链接面板，在“类”后的空格填写为：pall，就可以点击“确定”按钮完成设置，所有设置如图3所示：

　　（图3）

　　4、再新建一个元件，类型是影片剪辑，将它命名为：AS，在该影片剪辑编辑区内，点击选择时间轴的第一帧，然后打开动作面板，复制粘贴下方完整的AS3.0脚本语句，将它们粘贴好后，返回主场景。

　　varcount:int=2000;

　　varzl:Number=0.8;

　　varballs:Array;

　　balls=newArray();

　　for(vari:int=5;i

　　varball:pall=newpall();

　　ball.x=275;

　　ball.y=300;

　　ball["vx"]=Math.random()*4-1;

　　ball["vy"]=Math.random()*-10-10;

　　addChild(ball);

　　balls.push(ball);

　　addEventListener(Event.ENTER_FRAME,onEnterFrame);

　　functiononEnterFrame(event:Event):void{

　　for(vari:Number=5;i

　　varball:pall=pall(balls[i]);

　　ball["vy"]+=zl;

　　ball.x+=ball["vx"];

　　ball.y+=ball["vy"];

　　if(ball.x-ball.width/2>stage.stageWidth||

　　ball.x+ball.width/2<0||

　　ball.y-ball.width/2>stage.stageHeight||

　　ball.y+ball.width/2<0){

　　ball.x=275;

　　ball.y=300;

　　ball["vx"]=Math.random()*8-4;

　　ball["vy"]=Math.random()*-10-10;

　　}

　　}

　　}

　　}

　　四、组织场景：

　　1、先在主场景中共建立三个图层，分别将图层1重命名为“背景”、图层2重命名为“喷泉设备”、图层3重命名为“AS”，如图4所示：

　　（图4）

　　2、再点击选择背景图层的第一帧，将库面板中背景图片拖上舞台，将背景图片的大小调整为和舞台同样，设置为全居中，将该图层锁定；

　　3、然后点击选择喷泉设备图层的第一帧，将库面板中的喷泉设备图形元件拖上舞台，再根据背景图片和喷泉设备的实际情况，把喷泉设备图形元件调整为我们所需要的大小和位置，将该图层锁定；

　　4、点击选择AS图层的第一帧，将库中AS影片剪辑拖上舞台，打开属性面板后，把该元件的透明度调整为50%（根据背景图片的亮度调整有所不同，例如背景图片的亮度比较高的话，可设置为70或者80%，如果是夜景图片，设置为30%即可）。因为还要调整喷水的具体位置，所以该图层是先不要上锁的；

　　5、在测试影片后，我们看水的位置来框选舞台上的小白点，用键盘上的方向键来调整位置，直到把水的位置和喷泉设备的位置调整吻合为止；

　　五、代码中几个关键数据的解释与修改：

　　1、代码中第一行中的数字“2000;”，其实是跟喷泉喷出水珠的数量有关系，数字越大，喷出的水珠就会越多，可根据自己制作的场景需求，来修改水珠的数量。

　　2、代码中倒数第六行（倒数四个大括号上边第二行）中的ball["vx"]=Math.random()*8-4;，其中的数字“8-4”，前边的“8”指的是喷水范围的宽度，比如说数字越大喷水的范围越宽，数字越小，喷水的范围就会越窄；后面的数字“4”表示的是喷水的方向，即数字越大代表喷水方向越向左，数字越小喷水方向越向右，这些都可以根据自己的喜好和需求来调整；

　　3、代码中倒数第五行（倒数四个大括号上边第一行）中的ball["vy"]=Math.random()*-10-10;，其中的数字“10-10”，两个数字其实都是调整喷水的高度，如果数字越大，水喷得就会越高，数字越小，则水喷得越低，需要注意的是，调整时两个数字最好相同。

　　代码中的其他数字就没有调整的必要了，我们根据自己制作的场景和图片比例等等因素，来调整好这三组数据后，作品就可以完工了，最后就可以看看自己所做出来的效果了。

　　小编总结：以上就是如何用Flash制作喷泉动画的全部内容，通过这个教程的学习，我们在以后制作流水动画类动画时候应该就能够更加得心应手了，赶紧多练习几遍再熟悉一下吧~