FLASH制作水滴掉落动画效果

水是生命之源----基于FLASH平台保护生态环境，讲文明树新风是我们社会的美德，本设计通过讲述珍惜水资源为主题的公益广告的制作流程，一下为本设计的流程。

操作步骤：1.新建文件，设置场景大小400像素*350像素，背景为白色，默认帧速。

2.新建图形文件“标志”，在该元件的编辑窗口中，利用“椭圆”工具、“铅笔”工具和“箭头”工具画一个如图所示的标志图形。

3.新建影片剪辑元件“标题”1）更改背景为蓝色，输入文字“水是生命之源”字体为华文行楷，粗体，大小20，颜色白色，分离两次文字。

2）新建图层2，复制图层1的文字，粘贴到原位置，更改文字颜色为黑体。

3）新建图层3，绘制一个如图所示的图形。

4）将第3不得图形放于文字左方在第20帧处插入关键帧，并将此图形移动至文字右方，创建第1~20帧的运动补间动画。

5）选择图层3，右键点选择“遮罩层”，为文字创建遮罩效果，背景色变回白色。

4．回到主场景，命名当前图层为“边框及标题”在场景的下方画出一块黑色的边框，在方框上放置“标志”及“标题”元件，位置排列如下图，在第1300帧处插入帧。

5.新建图形元件“水龙头1”，先利用“直线”工具和“箭头”工具画出水龙头外形轮廓，再用“直线”工具添加正面视图轮廓，如下图（a）所示，再按下图（b）所示填充颜色，去掉内部棱角处得线条。

（a）（b）6.新建图形文件“水龙头2”，拖入“水龙头1”按Ctrl+B键打散元件，结合shift键选择水龙头开关处，然后旋转10°，再调整到适合位置，以示按下水空头开关，如下图所示。

7.新建图形元件“手”，按照下图（a）绘出手形、手指、指甲等形状，再如图（b）填充颜色。

手正面皮肤主色值为“#FFE800”，手皮背光颜色值为“#FFCC99”，大拇指甲侧面值为“#FFF1E1”，其余指甲颜色为“#FFF8F0”,删除多余辅助线条。

（a）（b）8“手”元件中，字大拇指关节处添加一条直线，利用shift键选择大拇指的所有部分，鼠标右键选择“转换为元件”，命名为“大拇指”图形元件。

1、新建Flash文件，属性设置：400 × 400 ，背景黑色，帧频30。

图12、选文本工具，创建一个动态的文本。

输入数字 1。

3、在属性面板中为实例命名 " myText" 。

设定字号为 15 ，颜色#00ff00。

图2：4、按字符嵌入按钮，嵌入字符集。

设置如图3：5、把本文转换成影片剪辑。

命名为 " numberInsideMC" 。

将注册点设定为左上角。

图4：6、在属性面板中为实例命名 " numberInside" 。

图5：7、把 " numberInsideMC" 再次转换成影片剪辑。

提供新的影片剪辑名字 " myNumberMC" 。

将注册点设定为左上角。

图6：8、按Ctrl+L组合键，打开库面板，右键单击 " myNumberMC" 选属性(CS4、CS3为链接)作类的绑定，链接名为 " BitNumber" 。

图7：9、新建图层，改名 as 层，选中第1帧，输入下列代码：//This array will contain all the numbers seen on stagevar numbers:Array = new Array();//We want 8 rowsfor (var i=0; i < 8; i++) {//We want 21 columnsfor (var j=0; j < 21; j++) {//Create a new BitNumbervar myNumber:BitNumber = new BitNumber();//Assign a starting positionmyNumber.x = myNumber.width * j;myNumber.y = myNumber.height * i;//Give it a random speed (2-7 pixels per frame)myNumber.speedY = Math.random() * 5 + 2;//Add the number to the stageaddChild (myNumber);//Add the number to the arraynumbers.push (myNumber);}}//Add ENTER_FRAME so we can animate the numbers (move them down) addEventListener (Event.ENTER_FRAME, enterFrameHandler);/*This function is repsonsible for moving the numbers down the stage. The alpha animation is done inside of the myNumberMC movieclip.*/function enterFrameHandler (e:Event):void {//Loop through the numbersfor (var i = 0; i < numbers.length; i++) {//Update the y positionnumbers[i].y += numbers[i].speedY;//If the BitNumber is below the stage, move it up againif (numbers[i].y > stage.stageHeight) {numbers[i].y = 0;}}}10、双击舞台上的 myNumberMC 影片剪辑，进入myNumberMC编辑状态，添加as 图层，选中第1帧，输入代码：//This variable tells us should we increase the alphavar increaseAlpha:Boolean;//We want the number to be invisible at the beginning numberInside.alpha = 0;//Calculate a random timer delay (how often we increase the alpha) var timerDelay:Number = Math.random() * 4000 + 2000;//Create and start a timervar timer:Timer = new Timer(timerDelay, 0);timer.addEventListener (TimerEvent.TIMER, timerHandler);timer.start ();//Add ENTER_FRAME so we can animate the alpha change addEventListener (Event.ENTER_FRAME, enterFrameHandler);/*Timer calls this function.Timer delay defines how often this is called.*/function timerHandler (e:Event):void {//Update the increaseAlpha valueincreaseAlpha = true;//Calculate a random number (0 or 1)var newNumber:int = Math.floor(Math.random() * 2);//If the random number is 1, we insert "1" into the text boxif (newNumber == 1) {numberInside.myText.text = "1";}//Else we insert "0" into the text boxelse {numberInside.myText.text = "0";}}//This function animates the alphafunction enterFrameHandler (e:Event):void {//Increase the alpha if increaseAlpha is trueif (increaseAlpha == true) {numberInside.alpha += 0.02;}//Else we want to decrease the alphaelse {numberInside.alpha -= 0.02;}//We don’t want the alpha to be over one, so we assign increaseAlpha to be falseif (numberInside.alpha > 1) {increaseAlpha = false;}//If the alpha is negative, set it to zeroif(numberInside.alpha < 0) {numberInside.alpha = 0;}}11、切换回场景1，把 myNumberMC 影片剪辑从舞台上删除。

龙源期刊网
计算机中用flash脚本语言实现下雨动画效果的方法
作者：马红旭
来源：《电脑知识与技术》2013年第22期
摘要：该文主要介绍了计算机中用flash脚本语言实现下雨动画效果的方法。

关键词： flash；脚本语言；下雨动画效果
中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）22-5141-02
FLASH软件具有强大的动画编辑功能，它使得设计者可以设计出高品质、体积小的动画。

然而在一些情况下，仅使用Flash中的工具和基本命令来创建复杂的动画相当困难，此时如果借助脚本语言，或许可以轻松帮助用户完成复杂的动画。

这是因为FLASH脚本语言能方便地实现很多功能，例如：控制播放顺序、创建复杂动画、响应用户输入、从服务器获取数据、调整图像、测试环境、控制声音等，该文将主要介绍计算机中利用flash8脚本语言实现下雨动画效果的方法。

2 下雨元件的制作方法
4 综述
FLASH下雨效果主要应用的是脚本语言中循环动画方法，采用了不同帧不同画面错落的播放，以达到制作下雨的效果，按照上述的3个步骤，完全可以产生下雨的动画效果。

参考文献：
[1] 吕冰，乔保军，刘金峰，等.中文版Adobe flash教程[M].北京：清华大学出版社，2012.
[2] 曹阳.flash5教程[M].北京：电子工业出版社，2001.
[3] 施博客研究室.Flash 8 标准教程[M].北京：海洋出版社，2006.。

1.新建Flash文件，默认画布大小550*4002.插入--新建元件--（默认的影片剪辑）--（起一个好听的名字，我的叫Rain）--确定3.绘制雨点，选择线条工具，把笔触粗细调整到16，斜着画一道，选择雨滴--修改--形状--将线条转换为填充。

4.选择部分选取工具（就是工具栏第二个），选择线条，看到右上方的小绿点没，点击其中的几个然后Delete删除掉，下粗上细的雨点就形成了。

最后用变形工具调整一下雨滴大小。

过程操作如图。

5.制作雨滴下落和涟漪效果。

还在这个影片剪辑里制作，在图层一的15帧处插入关键帧，把雨滴拽到掉落的合适位置。

中间插入动作补间。

16帧处插入空白关键帧。

绘制涟漪时为保证位置，建议选中绘图纸外观轮廓，不选也行，只要你保证雨滴能落在涟漪中心就行。

创建图层二，16帧处插入关键帧，用椭圆工具画一个灰色线条透明填充的椭圆，小一点的。

图层二35帧处插入关键帧，使用变形工具，按住Alt+Shift，把椭圆拉大，然后点击线条，颜色选项中Alpha值调整为0%，16~35帧中插入形状补间（也有用动作补间的，根据你的Flash版本而定。

两个补间都试一试，哪个好使用哪个）。

最后形成涟漪效果。

36帧插入空白关键帧，加入动作代码stop();效果如图6.返回场景，将元件Rain拖拽如场景，同时点击元件--属性--实例名称命名为"Rain”。

7.在第二帧第三帧处分别创建关键帧，将第一帧中的元件删除。

8.第一帧代码：i=1第二帧代码：duplicateMovieClip("rain", "rain"+i, i);setProperty("rain"+i, _x, random(550));setProperty("rain"+i, _y, random(400));i++;第三帧代码：gotoAndPlay(2);9.Ctrl+Enter测试下影片。

形状渐变补间动画——水滴效果改编：快乐每一天知识点：◆绘制简单的图形◆信息面板的使用◆帧的编辑◆混色器面板的使用◆形状补间动画制作步骤1、创建文档执行【文件】菜单下的【新建】命令，在弹出的对话框中选择【常规】|【Flash文档】单击【确定】按钮，新建一个影片文档。

执行【修改】菜单下的【文档】命令，在文档属性对话框中设置：大小为400×300，背景色蓝色、点击确定按钮，如图5-1 所示。

图5-1 文档属性设置2、制作“雨滴”影片剪辑元件（1）执行【插入】|【新建元件】菜单命令，在弹出的对话框中输入名称〖水滴〗，行为选影片剪辑，然后单击确定按钮。

如图5-2所示。

图5-2 创建元件（2）选择【椭圆工具】,设置笔触色无、填充色为白色，在编辑区中绘制一个小椭圆。

使用【选择工具】把小椭圆的上边缘拉尖，修整为水珠状，如图5-3 所示。

图5-3 绘制水珠（3）使用【选择工具】选中绘制的水珠，在属性面板里设置水珠的宽为5、高为14、坐标：X：0、Y：-130，如图5-4 所示。

图5-4 设置水珠属性（4）单击“图层1”的第5 帧，按【F6】键插入关键帧。

使用【选择工具】选中第5 帧中水珠。

在属性面板中把水珠的坐标调为X：0、Y：0。

然后执行【窗口】|【设计面板】|【混色器】菜单命令，将第1 帧中的水珠填充色的“AlPha”数值设为0%。

如图5-5 所示图5-5 设置水珠的AlPha 值（4）单击“图层1”的第1 帧，在属性面板的【补间】选项中选择【形状】如图5-6所示。

这样就创建了一个水珠从无到有下落到地面的动画效果。

下面我们开始制作水珠落地后激起的波纹效果。

图5-6 创建形状渐变5）单击“图层1”的第6 帧，按【F7】键插入空白关键帧。

选择【椭圆工具】设置笔触为无，填充色为白色，在编辑区中绘制一个椭圆。

使用【选择工具】选中绘制好的椭圆，执行【窗口】|【设计面板】|【信息】菜单命令，调出信息面板，在信息面板里设置椭圆的宽为26、高为10。

教学内容：
水滴涟漪效果
教学目标：
学会把对象转化为元件后再放到关键帧制作动画
教学重点：
错开不同图层关键帧位置的确定
教学难点：
水滴元件的制作
教学过程：
1、欣赏FLASH动画------水滴涟漪
2、启动FLASH 8
3、水滴元件的制作步骤：
3.1 用椭圆工具在舞台区域画出一个小圆
3.2 按住CTRL键，把小圆拉出一个尖端形状（先松开鼠标再松开键盘）
3.3 用选择工具调整对象，使之变成一滴水滴的样子，填充颜色“##33CCFF”
3.4 把水滴转换为元件（右击对象，选择转换为元件）
4 水滴从上到下滴落过程动画制作
4.1把水滴元件移动到舞台正上方
4.2在第10帧插入一个关键帧（只有前后两个是关键帧）
4.3把第10帧上的水滴元件移动到舞台正下方
4.4水滴滴落图层制作补间动画
5 涟漪动画制作
5.1 用椭圆工具画出一个椭圆
5.2 填充颜色##33CCFF，并转换为元件
5.3 在第10帧插入关键帧
5.4 把第10帧上的椭圆放大，并把透明度调为0
5.5 创建补间动画
5.6利用同样的方法再做出两层涟漪动画图层
5.7把涟漪动画每一个图层关键帧的位置调整好
6控制------测试影片
7 学生练习
要求：
1、水滴及涟漪填充色为##33CCFF
2、各图层必须先把对象转换为元件之后再制作补间动画
3、各图层关键帧的位置要错开，形成一个时间差
4、要有署名帧。