下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:课课家教育     来源: http://www.kokojia.com点击数:2299发布时间: 2019-03-16 20:43:17

标签: flashflash动画flash教程

想学设计?来看看大师是如何完成作品的?

  喷泉动画属于流水动画的一种,在网络上经常可以见到相关的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<count;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<balls.length;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制作喷泉动画的全部内容,通过这个教程的学习,我们在以后制作流水动画类动画时候应该就能够更加得心应手了,赶紧多练习几遍再熟悉一下吧~

赞(29)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程