高级Actions编程.ppt

第10章 高级Actions编程,本章要点 基本概念 加载声音 实现交互式动画 输入文本,本章逻辑结构,10.1 ActionScript的基本概念 10.1.1 对象、方法和属性 10.1.2 路径和阶层 10.2 实现交互式动画 10.2.1 按钮事件 10.2.2 影片剪辑事件 10.3 目标控制 10.3.1 tellTarget的作用,本章逻辑结构,10.3.2 tellTarget的应用 10.4 控制影片剪辑属性 10.4.1 设置属性的方法 10.4.2 调整影片剪辑的位置 10.4.3 调整影片剪辑的比例和旋转属性 10.4.4 设置影片剪辑的不透明度 10.5 控制颜色属性,10.6 使用ActionScript加载声音 10.7 载入和卸载外部影片 10.8 输入文本和动态文本 10.8.1 输入文本属性面板 10.8.2 动态文本属性面板 10.8.3 交互文本,10.1 ActionScript的基本概念,10.1.1 对象、方法和属性,对象是指程序代码和数据的结合。 在对象中，一段一段的程序称为方法。 对象内的数据或信息称为属性。,10.1.2 路径和阶层,一、路径 路径可分为两种： 绝对路径： 相对路径： 二、阶层 阶层专门用于【载入影片剪辑（loadMovie）】以及【复制影片剪辑（duplicateMovieClip）】。,10.2 实现交互式动画,交互由两个基本部分组成： 行为（或称动作，即发生了什么） 原因（即什么导致行为的发生）,10.2.1 按钮事件,由按钮控制播放的小例子，具体步骤如下： 1、新建一个文件，将背景设置为深蓝色。 2、新建一个【影片剪辑】元件，将其命名为“变 形”，如图所示。,3、选择【椭圆工具】，将【笔触颜色】设置为无 色，将【填充颜色】设置为绿色渐变，在舞台 上绘制一个绿球，将其移动到舞台的左上角。 4、在第20帧处插入关键帧。将绿球删除，用【矩 形工具】绘制一个无线条的矩形，用彩虹色填 充，然后用【箭头工具】将其变形为一个上箭 头。,5、在第40帧处插入关键帧。将箭头删除，用【铅 笔工具】绘制一只小鸟，用渐变色填充。最后 用【箭头工具】将其移到舞台的右上角。,6、分别选择第1帧和第20帧，将属性面板中的 【补间】设置为【形状】，并单击时间轴下 方的编辑多帧按钮显示全部关键帧。此时的 时间轴和舞台中的对象如图所示。,7、选择第1帧，按【F9】键打开【动作-帧 (Actions-Frame)】面板，在代码编辑区中 输入stop( )语句。,8、切换到主场景【场景 1】中，从元件库面板 中将“变形”元件拖到舞台中，然后在属性面 板中将该实例命名为shape_mc，如图所示。,9、打开公用库，从中找到如图所示的按钮。,10、将上图所示的按钮及其下方的按钮拖到舞台 中，排列在影片剪辑元件的下方，用【文本 工具】为两个按钮写上注释，如图所示。,11、用鼠标右击舞台左侧的【Play】按钮，在快 捷菜单中选择【动作】命令，打开【动作-按 钮（Ations-Button）】面板，转到专家模式。 双击左侧命令列表中的【on】，然后从弹出 的语句提示列表中双击【release】，如图所 示，将其加到当前光标处。,12、将光标移到第2行，输入shape_mc.，此时会 弹出与其相对应的语句提示列表，从中双击 play，如图所示，将其加到代码行中。,13、当第2行代码输入完成后，在语句后加一个 分号“；”，再按回车键将下半个大括号移到 第3行。如图所示。,14、用同样的方法为【stop】按钮添加如下语句： on (release) shape_mc.stop() 15、将该文件保存为“变形控制”。 16、按【Ctrl+Enter】组合键测试影片。,10.2.2 影片剪辑事件,将对前面制作的“变形控制”动画稍加修改，用【startDrag】指令来使动画随鼠标移动，从而 介绍影片剪辑事件的用法，具体操作如下： 1、按【Ctrl+O】组合键打开“变形控制”动画文 件。 2、双击元件库面板中的“变形”影片剪辑元件， 进入该元件的编辑状态。,3、选择第1帧，按【F9】键打开【动作】面板， 将其中的stop( )语句选中后删除。,4、选择第1帧，用【箭头工具】将该帧中的绿球 移到编辑区的中心，如图所示。,5、用同样的方法将第20帧和第40帧处的图形也 移到编辑区的中心。 6、单击舞台左上角的【场景 1】按钮切换到主 场景中，单击舞台中的shape_mc实例，按 【F9】键打开【动作-影片剪辑（Actions- Movie Clip）】面板。,7、将左侧指令添加到右侧的代码编辑区中，从参 数区中选择【鼠标移动（Mouse move）】， 如图所示。,8、双击左侧指令集中的【startDrag】，在右侧 参数区的【目标（Target）】栏中填写目标 的名称“/shape_mc”，其他设置如图所示。,9、按【Ctrl+Enter】组合键测试影片。,10.3 目标控制,10.3.1 tellTarget的作用,【tellTarget】命令的作用：使用它可以指定后面语句的操作对象。此命令可以被用在关键帧或按钮实例上。 下面将上节中的例子稍做修改，向其中添加tellTarget命令，并介绍该命令的作用。具体操作步骤如下：,1、按【Ctrl+O】组合键打开“变形控制”动画文件。 2、双击元件库面板中的“变形”影片剪辑元件，进入 该元件的编辑状态。 3、选择第1帧，按【F9】键打开【动作】面板，在 代码编辑区中加入stop( )语句。 4、返回到主场景中，选择shape_mc实例，按 【F9】键打开【动作影片剪辑】面板。,5、选择面板右侧代码编辑区中的第2行指令将其 删除，然后在面板左侧的【动作】指令集中 找到【tellTarget】命令，双击该命令，将它 添加到右侧的语句栏中，如图所示。,6、在面板右上部参数设置区的【目标】栏中填 写目标的名称“/shape_mc”。 7、在tellTarget语句的 中添加对Target进行的 操作。本例中添加了play( )语句，此时代码 编辑区中的代码如图所示。,8、按【Ctrl+Enter】组合键测试影片。,10.3.2 tellTarget的应用,介绍一个简单的应用实例。具体操作步骤如下： 1、新建一个影片文件，并设置该文件的大小为 600400。,2、新建一个影片剪辑元件，如图所示。,3、导入一幅图片，并从工具箱中选择【任意变 形工具】，调整导入图片的大小，如图所示。,4、在属性面板中，在帧标签文本框中输入tu1， 如图所示。,5、按同样的方法在5，10，15，20帧处再插入 一个关键帧，然后分别导入4幅图片，如图 所示。,6、新建一个按钮元件tu1。 7、在按钮编辑模式下，选中【弹起】帧，将元 件库“放大”元件中第1帧中的图片拖到舞台 上，并且调整它的大小。使用【矩形工具】 为其添加一个带颜色的边框，如图所示。,8、在【指针经过】和【按下】帧分别插入一个 关键帧，选中图片的边框，然后改变它的颜 色，如图所示。,9、用同样的方法再新建并制作4个按钮元件，然 后分别将“放大”元件中的其余4帧图片制作成 按钮。 10、为了方便演示，双击元件库中的“放大”元 件，选择第1帧至第20帧，然后执行【剪 切】和【粘贴】命令，将它们向后移一帧。,11、在第1帧中画一个大的矩形框，然后结合绘 图纸工具对其进行调整，使其正好与后面帧 中的图片一样大。接下来，在矩形框中输入 “浏览大图片”5个文字，如图所示。,12、选中第1帧，在它的【动作帧】面板中输 入一条stop( )语句。 13、将前面制作的5个按钮元件拖到主场景中， 并调整位置及大小，使它们分布于舞台的左 侧。,14、将“放大”影片剪辑元件拖到舞台右侧，将该 实例命名为“max”，如图所示。,15、在主场景中新建一个图层，用【文本工具】 和【线条工具】修饰主场景，这时的舞台如 图所示。,16、在舞台中用鼠标右键单击“tu1”按钮元件，选 择快捷菜单中【动作】命令，然后在打开的 【动作-按钮】面板中输入下图所示的 ActionScript代码。,17、再分别选中其他4个按钮，在相应【动作-按 钮】面板中分别添加图所示的代码。 18、按【Ctrl+Enter】组合键测试影片效果。,10.4 控制影片剪辑属性,所有的属性都用下划线元件“_”为前缀。在Flash中，如果想得到某个对象的属性，可以使用【getProperty】指令，当需要设置对象的属性时，则需要使用【setProPerty】指令。,10.4.1 设置属性的方法,具体设置方法如下： 1、【动作】面板，双击左侧指令集中的【动 作】 【影片剪辑控制】 【setProperty】 命令，将其添加到代码编辑区中，如下图 所示。,2、从上图可以看到，有三个参数需要设置。在 参数区的【属性】栏中指定需要设置的属 性，可以手工输入，也可以单击下拉按钮从 打开的列表中选择一个，如下图所示。,3、 在【目标】栏中输入要修改的对象名称。,4、在【值（Value）】栏中输入设置该属性时需 要的数值或内容。如图所示。,10.4.2 调整影片剪辑的位置,通过在对象实例中编写几行ActionScript代码来实现星星在不同位置闪烁的效果，具体操作步骤如下：,1、新建一个影片文件，设置它的背景色为深蓝 色，文档的其他属性如图所示。,2、新建一个图形元件“星星”，用【钢笔工具】在 元件编辑区中绘制一个黄色的星星，最后将 其线条删除，效果如图所示。,3、新建一个影片剪辑元件“1”，将元件库中的“星 星”拖到编辑区中，在时间轴的第20帧和第40 帧处分别插入关键帧，然后将第1帧和第20帧【属性】面板中的【补间】设置为【动作】。,4、将该帧中的图形对象缩小，然后在【属性】 面板中将【颜色】设置为【Alpha】，并将 其值设置为20%，如图所示。,5、按同样的步骤设置第40帧。 6、切换到主场景【场景 1】中。从元件库中将 影片剪辑元件“1”拖到舞台中，将该实例命名 为star，如图所示。,7、选择第1帧，打开【动作-帧】面板，双击指 令集中的【setProperty】指令，然后在右侧 的参数区中进行如图所示的设置。,8、用同样的方法为star设置Y轴方向的位置，此 时的程序如图所示。,9、在第2帧处插入一个关键帧。 10、保存文件，再按【Ctrl+Enter】组合键测试 影片。,10.4.3 调整影片剪辑的比例和旋转属性,下面结合影片剪辑大小和旋转角度的调整方法，将上面的例子实现满天星光闪烁的动画效果。具体操作步骤如下： 1、用鼠标右击第2帧，从弹出的快捷菜单中选 择【删除帧】命令。,2、将元件库中的动画剪辑元件“1”拖到主场景中 形成另两个实例，并将其命名为star2和 star3，如图所示。,3、新建一个影片剪辑元件“2”，然后将元件库中 的“星星”拖到编辑区中，按【Ctrl+B】组合键 将其打散，用填充工具将其填充为红色，如 图所示。,4、选择图中的图形，按【Ctrl+G】组合键使其 成组。接下来，按上例中的方法建立运动渐 变，完成后的效果如下图所示。,5、单击舞台左上角的【场景 1】按钮切称到主 场景中，将元件库中的“2”拖到舞台中，形成 三个实例，并分别命名为star4，star5和 star6，如图所示。,6、选择第1帧，在打开的【动作-帧】面板中 接着原来两条语句再添加如下语句： setProperty(“/star“,_xscale,random(100); setProperty(“/star“,_yscale,random(100); setProperty(“/star“,rotation,random(360);,其中，前面两条语句的作用是：该实例的纵横两个方向上的缩放比例均取随机值。第三条语句是作用是：该实例的旋转角度也是取随机值。,7、接着再用tellTarget语句控制实例star转向第2 帧播放。此时的程序如图所示。,8、分别在第2，3，4，5和6帧上插入关键帧，然 后参照上图中的程序分别设置第2，3，4，5， 6帧的【动作-帧】面板。其中，【目标】参数 分别对应实例star2，star3，star4，star5和 star6，gotoAndPlay语句转向的帧依次是3， 4，5，6和1，其他参数设置与第1帧相同。,9、按【Ctrl+Enter】组合键测试影片。 10、该文件保存为“繁星闪烁”。,10.4.4 设置影片剪辑的不透明度,上面的例子中，星星的不透明度是在动画剪辑元件中进行设置的，还可以通过_alpha来设置星星在屏幕上出现时的不透明度。下面对此例稍做修改，具体操作方法如下： 1、将上面的例子另存为“星星闪烁”文件。 2、双击元件库中的“1”，选择第2帧至第40帧， 删除选中的帧。,3、选择第1帧中的图形对象，用【任意变形工 具】将其适当放大，将【属性】面板上的 【Alpha】设置恢复为100%。,4、按上面的方法对影片剪辑元件“2”进行同样的 处理。此时主场景中的效果如图所示,5、选择第1帧，按【F9】键打开【动作-帧】面 板，在第6行前加入一行语句： setProperty(“/star“,_alpha,random(100); 此时的程序面板如下图所示。,6、用同样的方法修改其他程序。 7、按【Ctrl+Enter】组合键测试影片效果。,10.5 控制颜色属性,创建一个新的可访问影片剪辑实例的颜色对象。具体操作步骤如下： 1、新建一个文件，并将其背景色设置为淡粉色。 2、新建一个影片剪辑元件“小象”，用【铅笔工 具】绘制一个小象的轮廓。,3、将小象填充为黑色，再用【箭头工具】双击 图中的线条，将其删除，此时形成一个小象 的剪影，如图所示。,4、单元舞台左上角的【场景 1】按钮切换到主 场景中，将做好的影片剪辑元件“小象”拖到 舞台中，打开【属性】面板，在实例名称文 本框中输入col。如图所示。,5、打开【按钮库（Button Library）】，并向舞 台中拖曳4个【按钮】元件的实例。将4个按 钮对齐，效果如图所示。,6、选中蓝色按钮实例，打开【动作-按钮】面 板，在【专家模式】中，输入如图所示的语 句。,7、将影片保存为一个新的FLA文件，并测试该影 片。 8、在舞台上选中蓝色按钮实例，并打开【动作-按 钮】面板。在第三行后面添加如下语句： trace(“blueSolids RGB numeric value = “ + blueSolid.getRGB();,9、保存文件并测试该影片。 如果要把这些值转化回十六进值，在on(release)动作嵌套内添加下列动作： trace(“blueSolids RGB hex value = “ + blueSolid.getRGB().toString(16);,10、分别选中绿色、红色和橙色按钮，在【动作- 按钮】面板中添加代码，如下页图所示。 11、完成后，保存并测试影片。,10.6 使用ActionScript加载声音,声音对象的方法 attachSound start stop setVolume getVolume,setPan getPan setTransform getTransform,声音对象有如下优点： 能实现动态事件声音，它们随机或由用户定义的顺序播放。 能精确地控制音量和平衡。 当不再需要某个声音时，可以将该声音对象卸载（或清除）。,关于声音对象，有以下几点说明： 所有的声音对象被作为事件声音对待。不可以对流声音使用声音对象。 声音对象直接从影片的元件库中使用声音。无法通过声音对象控制那些通过使用Sound【属性】面板赋予了某些关键帧的声音。,下面以一个例子介绍如何创建声音对象，具体操作步骤如下： 1、打开前面制作的“繁星闪烁”文件。 2、按【Ctrl+R】组合键导入两段音乐，然后 分别加入到影片剪辑“1”的第1帧和第20帧 处，如下页图所示。,3、保存“繁星闪烁”文件并将其关闭，然后按 【Ctrl+N】组合键新建一个文件。,4、执行【文件】 【作为库打开】命令，在打开 的对话框中选择“繁星闪烁”文件，如图所示 （将某个Flash文件作为元件库打开可以访问 该文件中的元件和媒体）。,5、打开“繁星闪烁”的元件库面板。,6、从其元件库窗口中拖动影片剪辑“1”到新影片的舞台中。打开新影片的元件库，将看到刚刚拖入到新影片中的所有元素，如图所示。关闭【库】窗口，并将这个新的Flash影片保存为soundLib。,7、选中舞台中的实例“1”，并打开属性面板，将 这个实例命名为“1”。如图所示。,8、双击舞台中的实例“1”，进入元件编辑模式 （Symbol Editing Mode）中，创建一个空白 的图层，然后删除所有含有声音的图层（一 般需要在影片剪辑中保留至少一个图层）。,9、在新建的空层中，画一个椭圆来代表影片剪 辑“1”。接下来在椭圆上输入文本music，如 图所示。,10、单击舞台左上方的【场景 1】按钮，切换到 主场景中。,11、在向实例“1”粘贴声音之前为元件库中的每一个声音起一个惟一的ID名称。用鼠标右击Beam Scan声音文件，从【属性】菜单中选择【链接】命令，如图所示。会打开【链接属性（Linkage Properties）】对话框。,12、在【链接属性】对话框中选择【为动作脚本导 出（Export for ActionScript）】选项，并在 【标识符（Identifier）】文本框中输入 muc_1，如图所示。然后单击【确定】按钮。,13、用上述方法为元件库中的每个声音命名。增 加每个新声音名字muc_后的数字。这时的 元件库窗口如图所示。,14、创建一个新的图层，命名为“程序”。右键单击 第一帧，打开【动作-帧】面板，在专家模式 下，输入图所示的代码。,15、这样，就生成了一个用来在thisObject（或时 间轴）上创建所有声音对象的函数。在“程序” 层第一帧的【动作-帧】面板中输入如下代码： 1.createLib = createLib; 1.createLib(2);,16、保存该Flash影片，按【Ctrl+Enter】组合键 测试该影片效果。此时【输出】窗口将打开， 并显示跟踪描述。 new array created. this = _level0.1,17、关闭测试窗口并回到创作环境中。双击“程序” 层的第1帧，并在【动作】列表中添加最后几 行代码： musicLib.snd 1 .start(); musicLib.snd 2 .start(); 18、保存该Flash影片并测试其效果。,10.7 载入和卸载外部影片,利用按钮来载入和卸载外部影片，具体操作步骤如下： 1、新建一个文件，将其背景设置为淡紫色， 并将文件大小设置为600400。,2、执行【窗口】 【公用库】 【按钮】命令， 打开按钮的共享元件库，从中选择三个按钮 并拖放到舞台下方。,3、从工具箱中选择【文本工具】，在按钮下方 分别输入三个按钮名，如图所示。,4、右击【movie 1】按钮，从弹出的快捷菜单中 选择【动作】命令，打开【动作-按钮】面板。,5、选择浮动面板左侧指令集中的动作指令集的【loadMovie】命令，双击该命令，将它添加 到右侧的语句栏中，如图所示。,6、为Movie分配参数，主要是浮动面板中间的参 数区设置。在【URL】一栏中输入需要加载 的文件名称“星光.swf”。,7、在【位置（Location）】中选择【级别 （Level）】，在后面的选择框中输入【1】，指 定将影片载入到阶层1中。此时的程序面板如下 页图所示。,8、重复步骤4到步骤7的操作，为【movie 2】按 钮分配同样的载入影片动作，只是需要修改 【URL】中的文件名即可。在【URL】栏中输 入“繁星闪烁.swf”，如下页图所示。,9、用鼠标单击【unload】按钮，在【动作-按 钮】面板中选择【动作】指令集中的 【unLoadMovie】命令，双击该命令将它添 加到右侧的语句栏中，如图所示。,10、按【Ctrl+Enter】组合键进行测试。,10.8 输入文本和动态文本,10.8.1 输入文本属性面板,当在属性对话框的文本类型框中选择【输入文本】类型后，它的属性面板如图所示。,在此仅介绍不同于其他类型的选项，具体如下所述。 行类型： 【变量】： 设置格式： 设置字符：,10.8.2 动态文本属性面板,当在文本类型框中选择【动态文本】后，属性面板如图所示。此时的属性面板同输入文本属性面板非常类似。,10.8.3 交互文本,以一个实例来介绍它们的具体应用。 图所示是示例动画播放过程中的一幅画面。,该实例的具体操作如下： 1、新建一个文件，单击第1帧，选择【矩形工 具】，然后设置矩形的圆角半径，如图所示。,2、在舞台中绘制一个渐变色填充的圆角矩形， 如图所示。,3、新建一个层，单击第1帧，在其中输入图所示 的文字提示，此时使用的是静态文本。,4、选择【文本工具】，在文字提示的右侧分别 圈出三个文本域，前两个设置为输入文本， 它们的属性面板如图所示。,5、将第三个文本域设置为动态文本，并且在【变量】文本框中输入answer作为变量，如 图所示。,6、执行【窗口】 【公用库】 【按钮】命令， 打开按钮的共享元件库，从