Flash实例教程——鱼戏莲叶间

　　鱼戏莲叶间（如图1所示）是一个将鼠标跟随效果应用得非常巧妙的例子。该动画中，一条可爱的鱼儿在莲叶间畅游。最吸引人的是，这条鱼儿会紧紧跟随着您的鼠标，并且在转身回头之间，鱼头、鱼身以及鱼尾之间的运动显得非常连贯。一般的鼠标跟随效果往往只应用了简单的跟随，实际上就是ActionScript的简单调用。本例将告诉您如何在脚本程序的基础上加入一些技巧，使做出来的效果更富情趣，更惹人眼球。本例在帧上下的功夫并不多，关键的地方在影片剪辑元件的调用和安排上。学完本实例，不但可以掌握如何制作鼠标跟随效果，而且对动画创作的技巧会有一个新的认识。 

图1　“鱼戏莲叶间”效果图

: 软件知识点

: 影片剪辑元件的链接

: attachMovie 语句

: with 语句

: duplicateMovieClip 语句

: startDrag 语句

　　实例分析

　　在制作“鱼戏莲叶间”之前，让我们来对实例进行一些分析，以便理清思路，对全局有一个系统的把握。

　　制作特点

　　本任务主要有以下特点：

　　（1）要做的鱼其实只有鱼头、带鳍的鱼身和不再鳍的鱼身3个元件，整条鱼是通过脚本程序组合起来的。在鱼和莲叶的布置上都要用到深度级别（level）的概念。

　　（2）鼠标跟随效果实际上是使对象位置随鼠标的运动而不断变化，这样的效果很容易就做出来了。但是要将鼠标跟随效果做到出神入化，往往需要进行一些技巧性的计算。本例的技巧重点在于对鱼的各部分的运动速度和方向的控制。

　　创意分析

　　鼠标跟随属于交互式动画的一种。在Flash里，用鼠标可以控制您想控制的任何东西。但是要使这种人为的操纵不那么生硬，就得照顾到所操纵对象的每一个细节。

　　本例将一条鱼拆分成若干节，首先从头至尾对每一节的大小和透明度作一个递减，这样，一条头粗尾细真实感很强的鱼就做出来了。在控制鱼的运动时，每一节的速度也有一个从快到慢的变化，使游动的鱼有一定的伸缩度，这样才能体现出鱼的灵活性。另一个环节是随着鼠标的运动，鱼的游动方向会产生剧烈的变化。如果不对每一节的旋转方向作一个比较精确的调整，鱼身的错位就会非常惊人。本例使用的方法是使鱼在游动时身体的每一节都旋转到前面一节在上一时刻的方向，这样鱼不再完全受鼠标的指使，而会跟随自身的角度产生渐变。另外，在做鱼鳍时让它附带一段改变透明度的渐变动画，使鱼更具真实感。

　　向场景中添加莲叶有3种方法：

　　【方法1】

　　直接将其拖到场景中，这样会使游动的鱼浮于它的上层，显然不是我们所要的效果。

　　【方法2】

　　将其拖到场景中，并用duplicateMovieClip方法调整其层级，使其浮于鱼的上层。这是本例用到的方法。

　　【方法3】

　　不将其拖到场景中，而在库中为其添加链接，使用attachMovie方法将其调用到场景中，但需要为其设置位置参数，否则它将出现在播放窗口的左上角，也就是窗口坐标中的原点位置。

　　技术要领

　　制作Flash动画“鱼戏莲叶间”的技术要领主要在于几个ActionScript命令的应用。本例用到的ActionScript命令主要有：

1． attachMovie （ idName, newName, depth ）

　　从库中取一个为动作脚本设置了链接的元件并将其附加到场景中。idName是库中要附加到舞台上的影片剪辑元件的链接名称，也就是在“链接属性”对话框中的“标识符”字段中输入的名称。newName是为使用该命令附加到场景中的影片剪辑实例指定的唯一名称。depth是一个整数，用来指定影片剪辑所放位置的深度级别，这个深度级别（level）是在动画播放时由Flash分配的，它与层（layer）的概念类似但又有所区别。每个深度级别只能容纳一个影片剪辑实例，如果为同一级别附加新的实例，旧实例将自动消失。表示深度级别的整数越大，相当于显示的层越贴近我们的视线。

　　本例用到的鱼头、鱼身事先并不从库拖入到场景中，而是使用attachMovie命令在动画播放时从库中调用，并利用depth属性将它们的层级区分开来。

　　使用removeMovieClip 或 unloadMovie 命令可以删除用 attachMovie 附加的影片剪辑实例。

2． myMovieClip.duplicateMovieClip(newName, depth)

　　在影片播放时创建指定影片剪辑myMovieClip的实例，用newName指定实例的唯一名称，用depth指定实例的深度级别。duplicateMovieClip与attachMovie方法有些类似，但是duplicateMovieClip是复制已经添加到场景中的剪辑，而不是从库中调用。如果删除了场景中用作调用的父影片剪辑，所有用该方法复制出的实例都将一同被删除。

　　　　本实例中的莲叶便是用duplicateMovieClip命令添加的。看完本实例后有读者可能会问，场景中已经有莲叶的影片剪辑实例了，为什么还要用duplicateMovieClip命令将其复制一遍，这个操作是否多余？原因在于duplicateMovieClip命令指定了莲叶的深度级别，否则它们将默认显示在最低级别，那样的话，就不是鱼戏莲叶间，而是鱼戏莲叶上了。

　　用duplicateMovieClip添加的影片剪辑可以用 removeMovieClip方法删除。、

3． with(object){

　　statement(s);

　　}

　　使用object参数指定一个对象（比如影片剪辑），并使用 statement(s) 参数计算对象中的表达式和动作，为对象设置属性。使用with语句可以避免重复书写对象的名称或路径。

　　在为鱼的各节设置属性时使用该语句以简化脚本程序。

　　操作过程

　　 本实例的操作主要是制作元件和添加脚本，下面详细介绍“鱼戏莲叶间”的制作过程。

1． 制作鱼的各组成元件

　　我们将一条鱼拆分成许多节，根据鱼的外形特点将所有节分成3类：鱼头、带鱼鳍的鱼身和不带鱼鳍的鱼身，将这3个元件都做成带链接的影片剪辑元件。

　　（1）启动中文版Flash MX，按快捷键Ctrl+F8新建一个影片剪辑元件，并命名为head。

　　（2）选择椭圆工具，在元件编辑区中绘制一个无边框的椭圆。

　　（3）选择箭头工具，选中椭圆，单击常用命令工具栏中的对齐按钮，在出现的“对齐”面板中确定相对于舞台按钮为按下状态，单击按钮使椭圆与舞台中心对齐，如图2所示。

图 2 使椭圆与舞台中心对齐

　　  （4）选择箭头工具，将椭圆的轮廓编辑成如图3所示的效果。

　　（5）选择颜料桶工具，在颜色区选择红色放射渐变色作为填充色，用渐变色填充图形。

　　（6）选择转换填充工具，单击图形，对渐变色进行调整。