第15课脚本语言在动画中的应用(14).ppt

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