鱼戏莲叶间（如图1所示）是一个将鼠标跟随效果应用得非常巧妙的例子。该动画中，一条可爱的鱼儿在莲叶间畅游。最吸引人的是，这条鱼儿会紧紧跟随着您的鼠标，并且在转身回头之间，鱼头、鱼身以及鱼尾之间的运动显得非常连贯。一般的鼠标跟随效果往往只应用了简单的跟随，实际上就是Acti width=407>
实例分析
在制作“鱼戏莲叶间”之前，让我们来对实例进行一些分析，以便理清思路，对全局有一个系统的把握。
制作特点
本任务主要有以下特点：
（1）要做的鱼其实只有鱼头、带鳍的鱼身和不再鳍的鱼身3个元件，整条鱼是通过脚本程序组合起来的。在鱼和莲叶的布置上都要用到深度级别（level）的概念。
（2）鼠标跟随效果实际上是使对象位置随鼠标的运动而不断变化，这样的效果很容易就做出来了。但是要将鼠标跟随效果做到出神入化，往往需要进行一些技巧性的计算。本例的技巧重点在于对鱼的各部分的运动速度和方向的控制。
创意分析
鼠标跟随属于交互式动画的一种。在Flash里，用鼠标可以控制您想控制的任何东西。但是要使这种人为的操纵不那么生硬，就得照顾到所操纵对象的每一个细节。
本例将一条鱼拆分成若干节，首先从头至尾对每一节的大小和透明度作一个递减，这样，一条头粗尾细真实感很强的鱼就做出来了。在控制鱼的运动时，每一节的速度也有一个从快到慢的变化，使游动的鱼有一定的伸缩度，这样才能体现出鱼的灵活性。另一个环节是随着鼠标的运动，鱼的游动方向会产生剧烈的变化。如果不对每一节的旋转方向作一个比较精确的调整，鱼身的错位就会非常惊人。本例使用的方法是使鱼在游动时身体的每一节都旋转到前面一节在上一时刻的方向，这样鱼不再完全受鼠标的指使，而会跟随自身的角度产生渐变。另外，在做鱼鳍时让它附带一段改变透明度的渐变动画，使鱼更具真实感。
向场景中添加莲叶有3种方法：
【方法1】
直接将其拖到场景中，这样会使游动的鱼浮于它的上层，显然不是我们所要的效果。
【方法2】
将其拖到场景中，并用duplicateMovieClip方法调整其层级，使其浮于鱼的上层。这是本例用到的方法。
【方法3】
不将其拖到场景中，而在库中为其添加链接，使用attachMovie方法将其调用到场景中，但需要为其设置位置参数，否则它将出现在播放窗口的左上角，也就是窗口坐标中的原点位置。
技术要领
制作Flash动画“鱼戏莲叶间”的技术要领主要在于几个Acti width=188>
图 2 使椭圆与舞台中心对齐
（4）选择箭头工具，将椭圆的轮廓编辑成如图3所示的效果。
（5）选择颜料桶工具，在颜色区选择红色放射渐变色作为填充色，用渐变色填充图形。
（6）选择转换填充工具，单击图形，对渐变色进行调整。鱼头形状和调整渐变色的过程如图3所示。
图 3 修改轮廓和填充渐变色
（7）使用椭圆工具在鱼头旁边的空白区域绘制两颗鱼眼，并用箭头工具对眼睛的形状进行编辑。
（8）使用刷子工具为鱼眼添加两颗黄色的眼珠。
（9）使用箭头工具框选鱼眼，选择“修改”/“组合”命令将鱼眼组合在一起。并可以适当调整它的大小。
（10）将鱼眼拖放到鱼头的合适位置。制作鱼眼的过程如图4所示。
图 4 制作鱼眼
（11）使用箭头工具框选鱼头图形，在属性面板中对其参数作如图5所示的调整。head元件就做好了。
图 5 调整 head 元件的参数
（12）按快捷键Ctrl+F8新建一个影片剪辑元件，并命名为fin。现在开始设计带鳍的鱼身。
（13）fin元件的形状稍微复杂一点，但方法与制作head元件类似，在此不再赘述。绘制好后依然为其填充红色渐变色并进行调整，在属性面板中修改它的参数，如图6所示。
图 6 fin 元件及其参数
（14）在时间轴的第1帧上单击鼠标右键，选择“创建补间动画”命令，库中将自动生成一个名为“补间1”的图形元件。
（15）在时间轴上的第8帧单击鼠标右键，选择“插入关键帧”命令；在第16帧也同样插入一个关键帧。
（16）在第8帧上使用箭头工具选中图形，在属性面板的颜色下拉列表框中选择Alpha，将出现在其后的数值框中的数值改为50%，这样，鱼鳍就可以“动”起来了。
（17）按快捷键Ctrl+F8新建一个影片剪辑元件，并命名为body。下面绘制不带鱼鳍的鱼身，其效果及参数如图7所示。
（4）按照相同的方法为fin和head元件添加链接，使用默认的标识符。添加完链接的库面板如图9所示。 （5）使用箭头工具将图中莲叶及荷花部分以外的水面部分删除。细微部分可以放大后使用套索工具选取并删除。 （6）在图层2上单击鼠标右键，选择弹出快捷菜单中的“遮罩层”命令，将图层2变为遮罩层。 （7）回到主场景，新建一层，从库面板中将“莲叶”影片剪辑拖放到图层2中，并调整其位置和大小到合适位置。 （8）在属性面板中将背景色改为黑色。现在测试影片，发现鱼在莲叶上层游来游去。这可不是我们所要的效果。 （9）选中场景中的“莲叶”影片剪辑，在属性面板中将其实例命名为leaf，如图12所示。 （10）选中图层2的第1帧，在其动作面板中添加如下Acti width=257> 本例小结 本例的主要任务是设计并制作“鱼戏莲叶间”的鼠标跟随动画。下面，分别从设计和制作两个方面对本章的任务进行小结。 “鱼戏莲叶间”在创意设计上用的是传统的鼠标跟随手法，它采用鱼作为跟随鼠标的对象，所以设计的重心放在如何让鱼的运动尽量平滑和自然上。动画中再辅以莲叶荷花，使得整个动画别具情趣。 “鱼戏莲叶间”的制作过程是：制作鱼身各元件→在《构思添加Actions让鱼游动起来→制作并添加莲叶元件→在帧动作面板中添加Actions重新安排莲叶的层级→制作代替鼠标指针的小球→在影片剪辑面板中添加Actions让小球代替鼠标指针运动。 本例在制作上力求以循序渐进的方式一步一步完成整个动画，逐渐对动画加以完善，这是在制作Flash动画时经常采用的手法。每完成一步，就有一步的成就感。将复杂的大任务分解成几个小任务，这样每个小任务都可以迎刃而解了。 影片剪辑是一种功能强大的元件。本例用到的attachMovie、duplicateMovieClip、startDrag等脚本语句在制作很多特效时都有不可低估的作用。 鼠标跟随是Flash在交互式动画方面的一大特色，采用鼠标跟随方法可以做出许许多多不同凡响的动画。但要想使自己的作品更具创意，还得在动画设计和脚本应用上多下功夫。 无忧站长学院，建站自然无忧www.5ucms.org
图 8 为影片剪辑元件添加链接
图 10 跟随鼠标游动的鱼 图 11 “转换位图为矢量图”对话框
图 12 为“莲叶”影片剪辑实例命名
图 13 成功地将莲叶置于鱼的上层
图 14 替换了鼠标指针后的效果
| 上一篇：5ucms插件,Flash MX行为功能初体验：相册的制作 下一篇：5ucms模版,Flash MX 2004 ActionScript图文教程(一) |
|
| 本站声明：本网站所载文章等内容，目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题，请在30日内与本网联系（Email：3876307#qq.com），我们将在第一时间删除内容。若原创内容转载请注明出处。 5ucms插件,Flash实例教程——鱼戏莲叶间的关键词: |
|
相关分类
本类最新
