Flash 8.0控制鼠标制作 蜻蜓点水

邢素萍

0 引言

首先建立一个水滴效果的影片剪辑，然后通过控制两个翅膀扇动，制作一只飞舞的蜻蜓。制作完基本影片剪辑后，通过编写脚本，使鼠标的点击触发事件，同时控制水滴和蜻蜓的飞舞，其中水滴的产生是由鼠标的点击触发，蜻蜓的飞舞由鼠标的移动触发，如图1所示：

图1 鼠标移动触发效果

1 制作过程与步骤

1.1 水纹扩散的制作

步骤1 启动Flash 8.0后，单击【文件】/【新建】，新建一个Flash文件。单击【修改】/【文档】，在影片属性对话框中，设置场景的大小为400px×400px，背景色淡蓝色，其他为默认值。

步骤2 单击【插入】/【新建元件】，在弹出的【创建新元件】对话框中的【名称】栏中填写“water”，选择类型为“图形”。

图2 混色器调配颜色

步骤4 在界面中心拖出一个圆来，如图3所示：

图3 制作圆形水滴

图4 制作压扁的水滴

步骤 5 颜色调配好之后，界面中的椭圆就已经被这种渐进色填充了。退出“water”的编辑界面，回到主场景中，单击【窗口】/【设计面板】/【库】命令，打开元件库，库中已经有了做好的椭圆，将它从元件库中拖放到场景中来。

步骤 6 在场景中调整椭圆的大小，使它的宽度基本与场景的宽度一致，如图5所示。

图5 直接绘制的填充椭圆（前者）效果不好

这一步的目的是为了确定将来水纹向外扩散的范围。

在这里调整椭圆大小，一定要确保长宽是同比例扩大，采取的方法有两种：

方法2:使用【变形】面板，如图6所示：

图6 调整椭圆的大小与场景宽一致

在［约束］复选框前面的两个输入文本框中，填写需要放大的比例，也可以把椭圆变大，如果两个文本框中放大的比例一样，就保证了椭圆的不变形。

步骤7 鼠标单击选中椭圆，然后单击【插入】/【转换为元件】命令，在弹出的【转换为元件】对话框中，将它转化为一个电影片断元件，并给它命名为“waterMC”，类型选择为“影片剪辑”。

步骤8 单击【确定】后进入“waterMC”的编辑界面。先在“图层1”的第30帧插入一个关键帧。单击选中第30帧的椭圆，不改变它的位置和大小，只在【属性】对话框中选择【颜色】一项中的Alpha项，在后面的数值框中，设置Alpha值为10%，如图7所示：

图7 【变形】面板

步骤9 回到第1帧，在时间轴上用鼠标拖动将第1帧关键帧移动到第 2帧上，这时第 1帧成为空白帧。在第 2帧选中椭圆，将它缩小到界面的中心位置附近，如图8、图9所示：

图8 改变对象的Alpha值

图9 缩小的水滴

并在【属性】对话框设置这帧的图形Alpha值为80%。上述步骤，事实上就是把第1帧变成空白关键帧，也可以直接在第2帧上插入关键帧，然后把第1帧变成空白关键帧。

步骤10 在第2～29帧中的任一帧上单击鼠标右键，选择【创建补间动画】，创建第2帧到第29帧的过渡动画。

步骤12 在这层的第35帧插入关键帧，放大椭圆，与上层最后一帧的椭圆大小类似。在【属性】对话框中设置这帧的图形Alpha值为0%。

步骤13 同样要在这层创建新的过渡动画，不过是从第5帧到第35帧。这样做的目的是，在动画播放时，上下两层的过渡动画就有了一个前后的时间差，给人以水纹逐层向外扩散的视觉效果。

这时可以利用“洋葱皮”工具，观察前后帧之间的图形变化情况。单击工具后观察到的外观轮廓情形，如图10所示：

图10 用“洋葱皮”观看到的外观轮廓图

步骤14 为了继续增加水纹的扩散效果，类似上面的步骤继续做两个过渡动画，每一个动画都比前一个落后4到5帧。注意要把每个过渡动画的最后一帧的图形放大，并且让它的Alpha值为0%。

步骤15 最后，为了使水纹产生一次就停止，要为这个“MC”填写一个帧脚本。鼠标在时间轴上的最后1帧（此处为45帧）处右击，在快捷菜单中，选择【动作】，在【动作】面板中，添加脚本语言：

stop(); //控制动画完成一次就停止。

“waterMC”的时间轴，如图11所示：

图11 最后的waterMC的时间轴

1.2 “蜻蜓”飞舞动画的制作

步骤1 回到主场景中，双击“图层1”，改名为“蜻蜓”。单击【文件】/【导入】/【导入到舞台】命令，然后从外部导入一张含有蜻蜓的图片，如图12所示。

图12 导入的蜻蜓图片

步骤 2 将图片中不必要的图案及背景除去后，剩下需要的“蜻蜓”图案，如图13所示：

图13 蜻蜓图象

鼠标单击选中“蜻蜓”的图案，这时它应该呈现出白色的网格状，然后按Ctrl＋G快捷键，将它成组，这样它就不会被误操作而改变。然后用鼠标拖曳改变“蜻蜓”图案的大小，使它与场景大小相配。

步骤 3 鼠标再次单击选中已经成组的“蜻蜓”图案，然后单击【插入】/【转换为元件】命令，在弹出的【转换为元件】的对话框中，将它转化为一个电影片断元件，并给它命名为“蜻蜓MC”。

步骤4 单击“确定”后，场景中的这个“蜻蜓”已经是一个“MC”元件的实例了。鼠标直接双击“蜻蜓”图案，进入“蜻蜓MC”元件的编辑界面。

步骤5 新建一层“图层2”，单击选中“蜻蜓”图案，复制一份图案到新层中去。然后选中复制出来的图案，单击Ctrl＋B键将其打散，这时图案上又呈现出白色的网格。

步骤6 单击橡皮擦工具，选择合适的橡皮大小，擦去“蜻蜓”的“身体”部分，留下两个翅膀的图案，如图14所示。

图14 擦除蜻蜓后剩下的翅膀

步骤7 分别选择两个翅膀，把它们分别转换为MC的元件“翅膀1”和“翅膀2”，如图15所示：

图15 翅膀转换为元件

在将翅膀图案转化为“MC”元件时，在弹出的【转换为元件】对话框中，应该注意将元件中心位置设为左下角，如图16所示：

图16 设置【注册】中心为左下角

步骤8 回到“翅膀1”的编辑界面，首先移动这个翅膀的位置使它与“蜻蜓”图案中相应的翅膀位置重合，如图17所示：

图17 调整“翅膀1”的位置与身体吻合

然后在时间轴上的第3帧和第5帧按F6键，分别插入一个关键帧，这样翅膀的图案也自动复制过来了。

步骤9 下面只对第3帧的图形进行处理。在第3帧单击选中“翅膀”，然后单击【窗口】/【设计面板】/【变形】命令，或者使用快捷键 Ctrl＋T，打开【变形】面板。在面板中对这帧的翅膀图形进行处理：横向和纵向均缩小为原有尺寸的 80%，用鼠标选择“倾斜”选项，然后在后面的两个输入框中分别输入 10和-10，然后按回车键。【变形】面板的设置，如图18所示：

图18 设置变形面板

只修改第3帧，这样在运动过程中，翅膀从第1帧到第3帧扇动，然后在第3帧到第5帧再运动回来，形成一个循环。

步骤10 在时间轴上创建第1帧到第3帧，以及第3帧到第5帧的类型为“补间动画”运动的过渡动画。

步骤11 回到“蜻蜓MC”的编辑当中，在“图层2”中，从【窗口】/【设计面板】/【库】中选择“翅膀1MC”，拖入到场景中，并且放到蜻蜓躯体上原先的位置上。

步骤13 这样“蜻蜓MC”就做好了。回到主场景中，从【窗口】/【设计面板】/【库】中选择“蜻蜓 MC”拖到场景中，按Ctrl＋Enter键可以观看测试效果。

1.3 动画的控制播放和背景的添加

步骤1 退出元件编辑界面后，回到主场景，新建一层“图层 2”。这个动画的主场景只有一帧，在这帧中，从元件库中将电影片断元件“waterMC”拖放到场景中。

步骤 2 这时在场景中的只是一个白色的点，表示这个“MC”的第1帧为空白帧。选中它，在【属性】面板中，为这个电影片断元件命名实例名为“water”。

步骤3 在场景中的小圆点上左击鼠标，然后在菜单中，选择【窗口】/【开发面板】/【动作】，打开【动作】面板，在面板中按下按钮，选择【全局函数】/【影片剪辑控制】中的【onClipEvent】选项，然后在弹出的【事件】选项中，选【mouseDown】一项，如图19所示：

图19 添加waterMC的脚本

步骤 4 继续为这个空白电影片断元件添加脚本，最后得到的脚本代码如下：

步骤5 在图19所示界面中，为“water”编写的脚本中再做一些修改，得到如下所示的脚本代码，就可以实现增强画面效果的目的：

步骤6 单击选中图层“蜻蜓”的“蜻蜓MC”元件实例，在【动作】面板中按下按钮，选择【全局函数】/【影片剪辑控制】中的【onClipEvent】选项。在弹出的【事件】选项中，选【enterFrame】选项，然后继续为这个“MC”添加脚本，脚本代码如下所示：

步骤7 最后，回到主场景再新建一层“图层3”，改名为“背景”。将这层放在最下面，锁定其他层。然后导入一张含有水草的图片，如图20所示：

图20 导入的“水草”图片

步骤8 将图片中所需要的图案分离出来，如图20所示。然后布置在场景中，得到的场景，如图21所示：

图21 我们需要的图案

步骤9 为了使整个画面颜色协调，把小草的透明度（即Alpha值）设定为50%，蜻蜓的透明度设定为 80%，如图22、图23所示：

图22 用一些小草布置的背景

图23 设置对象的Alpha值

步骤10 至此，整个动画制作完成。直接按Ctrl＋Enter键预览一下效果，可看到一只扇动着翅膀的“蜻蜓”随着鼠标在画面中自由地飞翔，单击左键一下，在画面中就出现了一圈圈的波纹，仿佛“蜻蜓”在水面上掠过一样。

知识详解

这里对前面用到的几条脚本语句说明一下。

对于代码：

onClipEvent (mouseDown)是面向一个“MC”的响应，表示当鼠标左键按下时，将引起响应。

_root._xmouse;和_root._ymouse;表示了鼠标在主坐标系中的位置。

duplicateMovieClip（idname，newname，depth）表示复制出一个新的电影片断实例。例如，本例中的duplicateMovieClip(this,"water1",1)就表示复制当前这个实例产生一个新的实例“water1”。

综合起来，这段脚本的意思就是：当鼠标左键按下时，把获取到的鼠标坐标赋给“waterMC”的这个实例“water”，也就是制作的水纹的中心点的位置，于是就在鼠标点击的附近产生了一层层的波纹。并且由于“MC”本身的最后一帧是要静止下来的，这样鼠标点一次就出现一个波纹。

对于代码：

这个脚本实现的功能是，当动画播放时，我们将看不到鼠标，同时当前MC跟着鼠标的移动而拖动。

2 小结

_x和_y表示当前这个“MC”实例在主坐标系中的坐标。

本文利用了 Flash的一些“动作”语言知识，在制作“波纹”和“蜻蜓”自身飞舞动画的过程中，也用到了一些基本制作技能和知识。所用的主要知识点和需要注意的地方有色彩效果的制作；利用多层和播放的不同步，产生水纹的效果；MovieClip对象中的方法，本例中是响应一个鼠标事件；获取鼠标的坐标；设置对象的位置；duplicateMovieClip 的应用；鼠标拖动的使用。通过本小制作,可以了解“动作”脚本编写上的一些应用，关键是通过例子来理解整个动画的构思和具体语句的控制作用。同时也看到，一些基本的影片剪辑的制作，往往是完成一个复杂动画的重要基础，读者可以尝试制作彩带跟随鼠标的动画。

[1]《Flash 8 中文版实用教程》[M]李敏 北京机械工业出版社2009年2月

[2]《Flash 8动画与交互动画制作教程》[M]潘明寒 北京航空航天大学出版社 2008年1月

[3]《Flash8.0中文版动画制作》[M]林华 姜灵敏 华南理工大学出版社 2007年8月