flash代码实例 《跟随鼠标移动的星成心》

第26课时
代码实例《跟随鼠标移动的星成心》
案例说明：
本课将制作一个动画实例“跟随鼠标移动的星成心”，动画播放画面如图1所示。

播放动画时五角星会跟随鼠标移动，并且在移动的过程中自身不断进行复制，最终组成一颗爱心的形状。

当鼠标移动到其它位置时，五角星会跟着鼠标移动，在新的位置重新组合成爱心形状。

如图2所示：
图1 实例“跟随鼠标移动的星成心”动画画面1
图2 实例“跟随鼠标移动的星成心”动画画面2
授课教师：文韬
教学目的：通过本案例的学习，让学生能够掌握引导图层的使用方法、随机函数的使用和复制影片剪辑函数的使用方法、以及条件结构语句IF的使用；
教学重点：随机函数的使用和复制影片剪辑函数(duplicateMoveiClip)的使用方法；
教学难点：影片剪辑属性的设置和条件结构if语句的使用；
教学过程：
一、相关知识
1.setProperty语句的使用和参数设置
格式：setProperty(target, property, expression)
功能：用来设置影片剪辑实例（target）的属性。

参数：target用来设置和改变影片剪辑实例在舞台中的地址路径；Property用来设置影片剪辑实例的属性；expression是属性的值，可以是一个表达式。

2.duplicateMovieClip语句的使用和参数设置
格式：duplicateMovieClip(target, newname, depth)
功能：复制一个影片剪辑实例对象到舞台的指定层，并给该实例赋予一个新的名称。

参数：target给出要复制的影片剪辑元件的目标路径。

Newname给出新的影片剪辑实例的名称。

Depth给出新的影片剪辑元件所在的层号码。

3.startDrag语句的使用和参数设置
格式1：startDrag(target);
格式2：startDrag(target, [lock]);
格式3：startDrag(target, [lock, [left, top, right, bottom]]);
功能：该命令用来设置鼠标拖曳舞台工作区的影片剪辑元件对象实例。

startDrag()是开始拖曳对象。

参数：target是要拖曳的对象，lock参数是是否以锁定中心拖曳，参数left、top、right和bottom是拖曳的范围。

在[ ]中的参数是可选项。

4.if语句的使用和参数设置
（1）格式1：
If（条件表达式）{
语句体}
功能：如果条件表达式的值为true，则执行语句体；如果条件表达式的值为flase，则退出if语句，继续执行后面的语句。

（2）格式2：
If（条件表达式）{语句体1
}eles{语句体2}
功能：如果条件表达式的值为true，则执行语句体1；否则执行语句体2。

（3）格式3：
If（条件表达式1）{语句体1
}eles if(条件表达式2) {语句体2}
功能：如果条件表达式1的值为true，则执行语句体1；如果条件表达式1的值为flase，则判断条件表达式2的值，如果其值为true，则执行语句体2；如果其值为flase，则退出if语句，继续执行if后面的语句。

二、流程分析
1.图形元件“星”——绘制一颗五角星；
2.影片剪辑元件“星成心”——“星”元件沿心形路径移动；
3.影片剪辑元件“复制星”——“星成心”元件；
4.添加动作脚本；
三、案例实现
1.创建动画
(1) 启动FLASH，单击“文件”→“新建”菜单项，在打开的“新建文档”对话框中“常规”选项卡中选择“FLASH文件
(ActionScript 2.0)”选项。

新建一个文档，设置
文档大小为550×200像素，背景颜色为“白
色”，命名为“跟随鼠标的星成心”，保存文档。

(2) 在图层1的第1帧导入一幅图片作为背
景，调整该图片的大小和位置，使其正好覆盖舞台
范围。

(3) 按CTRL+F8键，打开“创建新元件”对话
框，创建名为“星”的图形元件，在元件编辑窗口
中用多角星形工具绘制一个五角星。

如图3所示：
图3 绘制五角星
(4) 返回主场景，再按CTRL+F8键，打开“创
建新元件”对话框，创建名为“星成心”的影片剪
辑元件，在元件编辑窗口中拖一个“星”元件。

如
图4所示：
(5) 在图层1上新建一个引导图层，并在引导
图层中画一“半个心形”的线条作为引导路径。

（注意相对于中心点的位置，它会影响到最终效果
的拖动位置）如图5所示：
图4 将“星”元件拖到编辑窗口
(6) 在图层1的第20帧插入一个关键帧，在
引导层的20帧处插入帧。

(7) 选中图层1的第1帧，将“星”元件的
中心点放到引导层中引导线的上部（此时打开吸
附工具可以很方便地放置上去）。

如图6所示：
(8) 选中图层1的第20帧，将“星”元件的
中心点移到引导层中引导线的下部，让其贴紧。

如图7所示：
图5 画“半个心形”的引导路径
图6 调整“星”元件运动的起点图7 调整“星”元件运动的终点
(9) 选中图层1第1帧后单击
右键，选择“创建补间动画”，完成
“星”元件沿引导线运行的动画。

（此时按回车键播放，看“星”元件
是否沿着引导线在运行。

如果不是，
重新调整图层1的第1帧与第20帧
的“星”元件位置，使它的中心点吸
附到引导线上。

）
(10) 锁住图层1和引导层，新
建一个图层3，在库中再拖出一个
“星”元件，按照以上介绍的方法，
将拖出的“星”元件沿另一半心线路
运动的效果做出来。

如图8所示：图8 两个“星”元件沿各自引导路径运动
(11) 调整好后在最后一个关键帧上加上stop( );让它只运行一次。

(12) 返回主场景，按CTRL+F8
键，打开“创建新元件”对话框，创建
名为“复制星”的影片剪辑元件，在元
件编辑窗口中拖入“星成心”元件，并
调整好它的大小和位置，然后给它取实
例名称为“star”。

如图9所示：
(13) 新建一图层，并在此图层上
插入两个空白关键帧（此时图层上应该
有三个空白关键帧），然后将图层1也
延长两帧（在图层1的第三帧“插入
帧”）。

如图10所示：
图9 “复制星”元件的制作1
图10 “复制星”元件的制作2
2．编写代码
(1) 选中图层2的第1帧，单击鼠标右键，在弹出的快捷菜单中单击“动作”菜单项，将“动作”面板打开，输入以下动作脚本。

startDrag("star", true); 月 //开始拖动star元件
n = 0; //初始化复制数量
setProperty("star", _visible, false); //在复制前将star元件设置为不可见
(2) 选中图层2的第2帧输入以下动作脚本。

if (n<20) { //如果没有复制到20颗星，则执行以下程序duplicateMovieClip("star", "star", n); //继续复制star
n++; //复制数每次加1 } else { //如果复制到20颗星n = 0; //则复制个数清0 }
(3) 选中图层2的第3帧输入以下动作脚本。

gotoAndPlay(2); //跳转到第2帧播放
四、测试影片
回到主场景，在图层1上新建一图层，将“复制星”元件拖入到主场景中，按
CTRL+ENTER键进行测试。

如果没有问题，则保存文档。

五、课后小结
本节课主要学习了五角星的绘制及引导图层的制作、随机函数的使用、复制影片剪辑函数(duplicateMoveiClip)的使用、影片剪辑属性的设置、条件结构if语句的使用，以及实例的制作。

六、上机作业
1.完成实例《跟随鼠标移动的星成心》的制作；
2.试着将心形引导路径换成其它形状的路径，如螺旋状路径。