高级ActionScript编程

第10章高级Actions编程,本章要点基本概念加载声音实现交互式动画输入文本,本章逻辑结构,10.1ActionScript的基本概念10.1.1对象、方法和属性10.1.2路径和阶层10.2实现交互式动画10.2.1按钮事件10.2.2影片剪辑事件10.3目标控制10.3.1tellTarget的作用,本章逻辑结构,10.3.2tellTarget的应用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.1ActionScript的基本概念,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-MovieClip）】面板。,7、将左侧指令添加到右侧的代码编辑区中，从参数区中选择【鼠标移动（Mousemove）】，如图所示。,8、双击左侧指令集中的【startDrag】，在右侧参数区的【目标（Target）】栏中填写目标的名称“/shape_mc”，其他设置如图所示。,9、按【Ctrl+Enter】组合键测试影片。,10.3目标控制,10.3.1tellTarget的作用,【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.2tellTarget的应用,介绍一个简单的应用实例。具体操作步骤如下：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、打开【按钮库（ButtonLibrary）】，并向舞台中拖曳4个【按钮】元件的实例。将4个按钮对齐，效果如图所示。,6、选中蓝色按钮实例，打开【动作-按钮】面板，在【专家模式】中，输入如图所示的语句。,7、将影片保存为一个新的FLA文件，并测试该影片。8、在舞台上选中蓝色按钮实例，并打开【动作-按钮】面板。在第三行后面添加如下语句：trace(blueSolidsRGBnumericvalue=+blueSolid.getRGB();,9、保存文件并测试该影片。如果要把这些值转化回十六进值，在on(release)动作嵌套内添加下列动作：trace(blueSolidsRGBhexvalue=+blueSolid.getRGB().toString(16);,10、分别选中绿色、红色和橙色按钮，在【动作-按钮】面板中添加代码，如下页图所示。11、完成后，保存并测试影片。,10.6使用ActionScript加载声音,声音对象的方法attachSoundstartstopsetVolumegetVolume,setPangetPansetTransformgetTransform,声音对象有如下优点：能实现动态事件声音，它们随机或由用户定义的顺序播放。能精确地控制音量和平衡。当不再需要某个声音时，可以将该声音对象卸载（或清除）。,关于声音对象，有以下几点说明：所有的声音对象被作为事件声音对待。不可以对流声音使用声音对象。声音对象直接从影片的元件库中使用声音。无法通过声音对象控制那些通过使用Sound【属性】面板赋予了某些关键帧的声音。,下面以一个例子介绍如何创建声音对象，具体操作步骤如下：1、打开前面制作的“繁星闪烁”文件。2、按【Ctrl+R】组合键导入两段音乐，然后分别加入到影片剪辑“1”的第1帧和第20帧处，如下页图所示。,3、保存“繁星闪烁”文件并将其关闭，然后按【Ctrl+N】组合键新建一个文件。,4、执行【文件】【作为库打开】命令，在打开的对话框中选择“繁星闪烁”文件，如图所示（将某个Flash文件作为元件库打开可以访问该文件中的元件和媒体）。,5、打开“繁星闪烁”的元件库面板。,6、从其元件库窗口中拖动影片剪辑“1”到新影片的舞台中。打开新影片的元件库，将看到刚刚拖入到新影片中的所有元素，如图所示。关闭【库】窗口，并将这个新的Flash影片保存为soundLib。,7、选中舞台中的实例“1”，并打开属性面板，将这个实例命名为“1”。如图所示。,8、双击舞台中的实例“1”，进入元件编辑模式（SymbolEditingMode）中，创建一个空白的图层，然后删除所有含有声音的图层（一般需要在影片剪辑中保留至少一个图层）。,9、在新建的空层中，画一个椭圆来代表影片剪辑“1”。接下来在椭圆上输入文本music，如图所示。,10、单击舞台左上方的【场景1】按钮，切换到主场景中。,11、在向实例“1”粘贴声音之前为元件库中的每一个声音起一个惟一的ID名称。用鼠标右击BeamScan声音文件，从【属性】菜单中选择【链接】命令，如图所示。会打开【链接属性（LinkageProperties）】对话框。,12、在【链接属性】对话框中选择【为动作脚本导出（ExportforActionScript）】选项，并在【标识符（Identifier）】文本框中输入muc_1，如图所示。然后单击【确定】按钮。,13、用上述方法为元件库中的每个声音命名。增加每个新声音名字muc_后的数字。这时的元件库窗口如图所示。,14、创建一个新的图层，命名为“程序”。右键单击第一帧，打开【动作-帧】面板，在专家模式下，输入图所示的代码。,15、这样，就生成了一个用来在thisObject（或时间轴）上创建所有声音对象的函数。在“程序”层第一帧的【动作-帧】面板中输入如下代码：1.createLib=createLib;1.createLib(2);,16、保存该Flash影片，按【Ctrl+Enter】组合键测试该影片效果。此时【输出】窗口将打开，并显示跟踪描述。newarraycreated.this=_level0.1,17、关闭测试窗口并回到创作环境中。双击“程序”层的第1帧，并在【动作】列表中添加最后几行代码：musicLib.snd1.start();musicLib.snd2.start();18、保存该Flash影片并测试其效果。,10.7载入和卸载外部影片,利用按钮来载入和卸载外部影片，具体操作步骤如下：1、新建一个文件，将其背景设置为淡紫色，并将文件大小设置为600400。,2、执行【窗口】【公用库】【按钮】命令，打开按钮的共享元件库，从中选择三个按钮并拖放到舞台下方。,3、从工具箱中选择【文本工具】，在按钮下方分别输入三个按钮名，如图所示。,4、右击【movie1】按钮，从弹出的快捷菜单中选择【动作】命令，打开【动作-按钮】面板。,5、选择浮动面板左侧指令集中的动作指令集的【loadMovie】命令，双击该命令，将它添加到右侧的语句栏中，如图所示。,6、为Movie分配参数，主要是浮动面板中间的参数区设置。在【URL】一栏中输入需要加载的文件名称“星光.swf”。,7、在【位置（Location）】中选择【级别（Level）】，在后面的选择框中输入【1】，指定将影片载入到阶层1中。此时的程序面板如下页图所示。,8、重复步骤4到步骤7的操作，为【movie2】按钮分配同样的载入影片动作，只是需要修改【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作为