1、动画进程控制,通过语句来控制动画进程 通过按钮来控制动画进程,第 十五课 脚本语言在动画中的应用,许多Flash动画都具有很强的交互性，需要人为地控制动画的进程，如在拼图游戏中需要通过拖动鼠标来拼出一个完整的图形，在一些调查表中还需要用户选择或输入某个答案才能进行下一步操作。这些交互行为实际都是通过Actions语句来实现的。在Flash MX 2004中控制动画进程的方法有以下几种：,直接为帧添加Actions语句来控制动画进程。 为按钮添加Actions语句来控制动画进程。 为影片剪辑添加Actions语句来控制动画进程。 响应键盘上的按键动作来控制动画进程。,通过语句来控制动画进程,在F
2、lash MX 2004的“动作”面板中，“时间轴控制”、“浏览器/网络”和“影片剪辑控制”类中提供的命令就可以完成对动画的基本控制。最常用的语句有以下一些 ：,stop：使动画停止在当前时间轴的当前帧中。 play：使动画从当前帧开始播放。 gotoAndPlay：跳转到用帧标签或帧编号指定的某一特定帧并播放。 gotoAndStop：跳转到用帧标签或帧编号指定的某一特定帧并停止播放。,nextFrame：使动画跳转到下一帧并停止播放。 prevFrame：使动画回到上一帧并停止播放。 on：主要用于控制按钮的动作。 duplicateMovieClip：复制影片剪辑。 getPropert
3、y：获取影片剪辑属性。 setProperty：设置影片剪辑属性。 removeMovieClip：移除影片剪辑属性。 startDrag：在影片剪辑上开始拖放动作。 stopDrag：停止当前正在进行的拖放动作。,通过按钮来控制动画进程,前面讲过，用户不但可以为帧添加Actions语句，还可以为按钮元件添加Actions语句。要通过按钮来控制动画进程，必须首先创建一个按钮元件，并为其添加Actions语句。关于按钮元件的创建，已在前面讲解过，下面讲解如何为按钮元件添加Actions语句。为按钮添加Actions语句的方法如下。选中要添加Actions语句的按钮，然后打开“动作”面板。在其中输
4、入按钮的Actions语句。,为按钮添加Actions语句必须以关键字on开头。首先双击“影片剪辑控制”类下的 ，在右边窗口中将自动弹出如图14-1所示的下拉列表，其中的各选项都是不同的按钮事件，各个按钮事件的含义如下所示：,图14-1,press：表示当按下鼠标还未松开时发生指定的事件。 release：表示在按钮上单击一次鼠标后会发生指定的事件。它是按钮最常用的事件。 releaseOutside：表示在按钮上按下鼠标，在按钮外松开鼠标时会发生指定的事件。 rollOver：表示当鼠标光标移到按钮所在热区时会发生指定的事件。 rollOut：表示当鼠标从按钮热区移出时会发生指定的事件。 d
5、ragOver：表示在鼠标光标位于按钮上方并已按下的情况下，滑出按钮再滑回按钮时会发生指定的事件。,dragOut：表示当鼠标光标位于按钮内部，按下按钮然后移出按钮热区时会发生指定的事件。 keyPress：它是指在键盘上按下某些键时，按钮将会响应的事件。其中包括很多选项，如keyPress “”表示在键盘上按下向左的方向键时，按钮将发生指定的事件。Flash 检测键盘上的字母键时，字母都为小写。如果要检测键盘中的特殊键，Flash中有一些专门的代码来表示它们，如下：,例如，要检测键盘上的方向键“”，可以使用如下Actions语句：on(keyPress“)trace(“This is Up
6、“);按钮的Actions语句的基本语法格式如下：on(mouseEvent) / 要执行的动作,其中的mouseEvent被称为“事件”的触发器。当发生该事件时，就执行后面大括号中的动作。前面所讲的press、release、dragOver、dragOut、releaseOutside等都可以作为mouseEvent的参数值。例如，下面的语句：on (release) gotoAndStop(3);表示单击一次鼠标后，动画跳转到第3帧并停止播放。,影片剪辑属性的设置,位置属性_x和_y 大小属性_width和_height 缩放属性_xscale和_yscale 旋转属性_rotation
7、 透明度属性_alpha 鼠标位置_xmouse和_ymouse 可见属性_visible 设置属性值setProperty 获取属性值getProperty,影片剪辑属性就是影片剪辑的基本特性，如它的位置、大小、透明度等，通过改变影片剪辑的属性值，可以启动与该属性值相关的动作命令。下面介绍设置影片剪辑属性的方法。,位置属性_x和_y,创建舞台中的每个对象都有它的坐标值。坐标原点在舞台的左上角，其坐标位置为（0,0）。水平向右为正，向左为负，垂直向下为正，向上为负。Flash默认的舞台大小为550400像素，因此舞台右下角的坐标为（550,400），它表示距坐标原点的水平距离为550，垂直距离
8、为400。在Flash中，分别用_x和_y表示对象的x坐标值属性和y坐标值属性。例如，如果要在时间轴中表示影片剪辑“photo1”的位置属性，可以使用下面的方法：photo1._xphoto1._y,如果要在影片剪辑本身的脚本中表示它自己的坐标，可使用下面的方法： _x;_y;或：this._x;this._y;在Actions语句中更改_x和_y属性可以改变影片剪辑的位置。如为影片剪辑编写如下语句：onClipEvent(enterFrame)_x-=5;,_y+=6; 该语句表示影片剪辑在每次的enterFrame事件中向左移动5个像素，同时向下移动6个像素的位置。,图14-2,在“属性”
9、面板和“信息”面板中都可以查看和更改对象的位置。选择窗口设计面板信息菜单命令或按【Ctrl+I】键都可以打开“信息”面板，如图14-2所示。,大小属性_width和_height,_width和_height是影片剪辑的两个重要属性，它们分别代表影片剪辑的绝对宽度和高度。使用_width和_height语句可以调整影片剪辑的尺寸和大小，其表达方式如下： onClipEvent(enterFrame) _width=Math.abs(_root._xmouse-_x)/4; _height=Math.abs(_root._ymouse-_y)/4; ,缩放属性_xscale和_yscale,_x
10、scale和_yscale是影片剪辑的缩放属性，它们代表影片剪辑实例相对于“库”面板中的原影片剪辑元件的横向尺寸width和纵向尺寸height的百分比，与影片剪辑实例的实际尺寸无关。例如，影片剪辑元件的横向宽度为20，将其拖动到舞台上作为实例时宽度被改为了80。如果在Actions语句中将其属性_xscale设置为10，那么在播放动画时影片剪辑实例的横向宽度将是20的10%，即2，而不是80的10%。由于_xscale和_yscale代表舞台中的实例大小与原影片剪辑元件大小的百分比，因此当_xscale和_yscale的取值大于100时，表示将放大原影片剪辑；当它们的取值小于100大于0时，
11、表示缩小原影片剪辑；当取值为负时，将在缩放的基础上水平或垂直翻转影片剪辑。,_xscale下面一段语句列出了它们的含义，读者仔细阅读，并理解_xscale和_yscale的作用。 onClipEvent (load) ab = _width; /用变量ab获取原影片剪辑的宽度cd = _height; /用变量cd获取原影片剪辑的高度 onClipEvent (enterFrame) _xscale = 100*(_root._xmouse-_x)/(ab/2); /计算鼠标位置与原影片剪辑宽度的百分比，作为_xscale的值_yscale = 100*(_root._ymouse-_y)/(
12、cd/2); /计算鼠标位置与原影片剪辑高度的百分比，作为_yscale的值 ,旋转属性_rotation,_rotation表示影片剪辑的旋转属性，它是一个角度值，取值范围为-180180。如果将它的值设置在这个范围之外，系统会自动将其转换为这个范围之间的值。例如，语句： fish._rotation=120;表示将影片剪辑fish旋转120。,透明度属性_alpha,_alpha是影片剪辑的透明度属性，其取值范围在0100之间，0代表完全透明，100表示不透明。在前面章节中，已经讲过设置影片剪辑的_alpha值方法：选中要设置透明度的影片剪辑元件，在“属性”面板的 下拉列表框中选择“alp
13、ha”选项，在其后的数值框中即可设置alpha值。也可以通过Actions语句来设置影片剪辑的透明度，例如，要将影片剪辑rose的透明度设为50%，可以使用以下语句：rose._alpha=50;,如图14-3所示就是将影片剪辑的alpha值依次设为100%、55%、15%后的效果。,图14-3,鼠标位置_xmouse和_ymouse,前面已经介绍了如何获取影片剪辑的坐标位置，下面介绍如何获取动画中的鼠标位置，即鼠标光标在舞台中的坐标位置。在Flash中主要通过_xmouse和_ymouse来获取鼠标位置。其中，_xmouse表示鼠标光标的水平坐标位置，_ymouse表示鼠标光标的垂直坐标位置
14、。_xmouse和_ymouse取值在主时间轴中代表鼠标光标与舞台左上角之间的距离，在影片剪辑中代表光标与影片剪辑中心之间的距离。,如果要明确表示鼠标光标在舞台中的位置，可以使用_root._xmouse和_root._ymouse语句。例如，语句：onClipEvent(enterFrame)_x=_root._xmouse;_y=_root._ymouse;表示让影片剪辑与鼠标位置保持相同的坐标值。,制作鼠标跟随动画时也需要用到以上语句。另外，Flash无法获取超出舞台大小的鼠标位置。如将场景大小设置为400400，正常播放时能获得的鼠标位置即在(0,0)(400,400)之间。,可见属性
15、_visible,可见属性_visible主要用于设置影片剪辑的可见性，它只有两个值“true”和“false”。默认值“true”表示可见，“false”表示不可见，这时影片剪辑将从舞台上消失，在它上面设置的动作也变得无效。,设置属性值setProperty,设置影片剪辑的属性可以通过setProperty来实现。其语法格式如下：setProperty(target,property,value/expression )；其中：target表示到要设置其属性的影片剪辑实例名称的路径；property表示要设置的属性；value表示属性的新文本值；expression表示计算结果为属性新值的公
16、式。,例如，如下语句：on (release) setProperty(“rose“, _alpha, “20“);表示当单击按钮时，将名为“rose”的影片剪辑的_alpha属性设置为20%。,获取属性值getProperty,要获取其他影片剪辑的属性可以通过getProperty来实现。其语法格式如下： getProperty(my_mc, property) 其中：my_mc表示要获取其属性的影片剪辑的实例名称；Property表示影片剪辑的属性。例如，语句：fish_y = getProperty(_root.rose, _y)；表示获取影片剪辑rose的垂直坐标值(_y)，并将其分配
17、给变量fish_y。,控制影片剪辑,前面介绍了向帧和按钮元件添加Actions语句的方法，下面介绍如何向影片剪辑中添加脚本。“动作”面板中“全局函数”下的“影片剪辑控制”类中列出了最常用的几种设置控制影片剪辑的函数，如图14-4所示。,图14-,和按钮元件一样，为影片剪辑添加Actions语句也要使用事件处理函数，只是使用的关键字不同，按钮使用关键字on，而影片剪辑使用关键字onClipEvent。当某种影片剪辑事件发生时，就会触发相应的事件处理函数。影片剪辑事件的使用方法如下：onClipEvent(movieEvent)/ 要执行的动作其中的movieEvent是一个事件的触发器，当它所代
18、表的事件发生时，Flash会执行后面大括号中的语句。在“影片剪辑控制”类中双击 ，在右边的窗口中将出现如图14-5所示的下拉列表。,其中的各选项都是不同的影片剪辑事件，各个影片剪辑事件的含义如下 ：,load：将影片剪辑拖放到舞台中作为实例时启动此动作。每次播放Flash动画时，每个影片剪辑的load事件只会发生一次。,图14-,unload：删除影片剪辑后，在第1帧中启动此动作。 enterFrame：播放到影片剪辑所在帧时启动此动作。 mouseMove：每次移动鼠标时启动此动作，其中的参数_xmouse和_ymouse属性用于确定当前鼠标光标的位置。 mouseDown：按下鼠标左键时启
19、动此动作。 mouseUp：释放鼠标左键时启动此动作。 keyDown：按下键盘上某个键时启动此动作。 keyUp：释放某个键时启动此动作。,例如，语句：onClipEvent(load)gotoAndStop(5);表示加载完影片剪辑元件后，在事件处理函数onClipEvent(load)中，动画跳转到影片剪辑元件的第5帧并停止。,复制/移除影片剪辑,复制影片剪辑duplicateMovieClip移除影片剪辑removeMovieClip,复制影片剪辑的命令是duplicate MovieClip，移除影片剪辑的命令是removeMovieClip，在Flash动画中它们是经常用到的两个命
20、令，这两个命令可以实现许多效果，如下雪、下雨、射击游戏等。,复制影片剪辑duplicateMovieClip,duplicateMovieClip动作位于“动作”面板中“全局函数”下的“影片剪辑控制”类中，双击 选项，在右边窗口中将自动出现duplicateMovieClip的语法格式，如图14-6所示。,图14-6,duplicateMovieClip(target,newname,depth);其中：target表示要重制的影片剪辑所在的目标路径；newname表示已重制的影片剪辑的惟一标识符；depth表示已重制的影片剪辑的惟一深度级别。深度级别是重制的影片剪辑的堆叠顺序。深度级别的概念
21、与图层类似，较高深度级别中的图形会遮挡较低深度级别中的图形，影片剪辑所在的深度级别越高，就越接近用户。必须为每个重制的影片剪辑分配一个惟一的深度级别。,如果在同一深度级别中添加多于一个影片剪辑实例，新的影片剪辑实例将替换掉旧的影片剪辑实例。 例如，语句：duplicateMovieClip(“rain“,“rain“ add i, i);表示复制名为“rain”的影片剪辑。,移除影片剪辑removeMovieClip,移除影片剪辑removeMovieClip位于“全局函数”下的“影片剪辑控制”类中，主要用于删除影片剪辑实例，其语法格式如下： removeMovieClip(target) 其
22、中，target是用duplicateMovieClip创建的影片剪辑实例的目标路径，或者用MovieClip对象的attachMovie方法创建的影片剪辑实例名。 整个语句表示删除用attachMovie或duplicateMovieClip方法创建的MovieClip对象影片剪辑实例。,例如，语句：n=50;for(i=0;in;i+)removeMovieClip(_root“childMC“+i);,上机实战,制作影片剪辑“雨”添加Actions语句,在本课上机实战中将练习制作一个下雨的场景。以此来练习对影片剪辑的控制方法，以及removeMovieClip、setProperty、d
23、uplicateMovieClip等语句的使用方法。主要通过影片剪辑和Actions语句来实现。分为两大步来实现，一是制作一个包含雨滴下落全过程的影片剪辑，二是通过Actions语句制作大雨的效果，最终效果如图14-7所示。对于未练习到的其他语句，读者可根据课堂讲解自行练习。,图14-7,制作影片剪辑“雨”,（1）新建一个文件，将背景色设为黑色。选择插入新建元件菜单命令，创建一个名为“雨”的影片剪辑。（2）在第1帧中绘制一条从左上方向右下方倾斜的短直线，颜色设为白色，并在“混色器”中将其透明度设为40%，其位置和大小如图14-8所示。,其具体操作如下:,图14-8,（3）在第9帧插入关键帧，将
24、直线向右下角移动，其位置和大小如图14-9所示。（4）在第20帧处插入一个空白关键帧，然后在该帧中绘制如图14-10所示的图形，其位置在第二条直线的右下方一点。,图14-9,图14-10,（5）在第25帧插入关键帧，将该帧中的图形放大一些，并将其颜色设置得更偏白一些，如图14-11所示。 （6）在第54帧插入关键帧，将该帧中的图形再放大一些，并将其颜色设置得暗淡一些以表现雨滴溅落后逐渐消失的效果，如图14-12所示。,图14-11,图14-12,（7）在“属性”面板中进行如图14-13所示的设置，在第119帧、第2025帧以及第2554帧之间创建形状渐变动画。,removeMovieClip(
25、“); /移除当前影片剪辑（9）至此影片剪辑“雨”制作完成。,（8）在第124帧插入空白关键帧，然后在“动作”面板中输入如下语句，使影片剪辑在播放完毕之后自动移除。,图14-13,添加Actions语句,其具体操作如下:（1）单击 图标回到场景中，将“图层1”重命名为“背景”，然后导入图片“风景.jpg”，并对其大小进行适当调整，使其覆盖整个动画场景，如图14-14所示。,图14-14,（2）在第2帧插入一个普通帧。再新建一个名为“雨1”的图层，在“库”面板中将影片剪辑“雨”拖动到场景的上方，如图14-15所示。,图14-15,（3）选中影片剪辑“雨”，然后在“属性”面板中进行如图14-16所
26、示的设置，将该影片剪辑的实例命名为rain。,图14-16,（4）在“动作-帧”面板中，为第1帧添加如下语句： n = Number(n)+1; /设置一个变量n，并为其赋值为Number(n)+1 setProperty(“rain”, _x, -10+Math.random()*530); /设置影片剪辑“rain”的x坐标值为-10520的任意一个数 setProperty(“rain“, _y, -40+Math.random()*-45);,/设置影片剪辑“rain”的y坐标值为-40-85的任意一个数duplicateMovieClip(“rain“, “, n); /复制影片剪辑
27、“rain”，并将其深度级别设为变量n （5）在第2帧处插入空白关键帧，然后在“动作-帧”面板中为该帧添加如下语句： gotoAndPlay(1); /跳转并播放第1帧（6）新建一个名为“雨2”的图层，将“雨1”层第1帧中的Actions语句复制到“雨2”层的第1帧中，然后在“动作-帧”面板中将语句改为如下所示：n = Number(n)+1; /设置一个变量n，并为其赋值为Number(n)+1 setProperty(“rain“, _x, -10+Math.random()*530);,/设置影片剪辑“rain”的x坐标值为-10520的任意一个数setProperty(“rain“,
28、_y, -75+Math.random()*-80); /设置影片剪辑“rain”的y坐标值为-75-155的任意一个数duplicateMovieClip(“rain“, “, n); /复制影片剪辑“rain”，并将其深度级别设为变量n（7）新建一个名为“雨3”的图层，将“雨1”层第1帧中的Actions语句复制到“雨3”层的第1帧中，只是将其中的语句： setProperty(“rain“, _y, -75+Math.random()*-80); 改为：setProperty(“rain“, _y, -85+Math.random()*-90);,（8）新建一个名为“雨4”的图层，将“雨1”层第1帧中的Actions语句复制到“雨4”层的第1帧中，只是将其中的语句： setProperty(“rain“, _y, -75+Math.random()*-80); 改为： setProperty(“rain“, _y, -95+Math.random()*-100);（9）按【Ctrl+Enter】键播放动画，可看到淅淅沥沥的春雨落在水中，如图14-7所示。,上机操作题,制作一个遮罩动画，当鼠标光标移到某个位置时就显示该位置上的图片，最终效果如图14-17所示。,图14-17,提示：本实例主要用到_xscale和_yscale。,
