第 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、新建一个影片文件,并设置该文件的大小为
600× 400。
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("blueSolid's RGB numeric value = " +
blueSolid.getRGB());
9、保存文件并测试该影片。
如果要把这些值转化回十六进值,在 on(release)
动作嵌套内添加下列动作:
trace("blueSolid's 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、新建一个文件,将其背景设置为淡紫色,
并将文件大小设置为 600× 400。
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、执行 【 窗口 】 【 公用库 】 【 按钮 】 命令,
打开按钮的共享元件库,从中选择 4个按钮放置到舞台中,并且分别在它们的右侧输入提示文字,如图所示。
7、打开 【 动作-按钮 】 面板,切换到 【 专家模式 】,然后在其中输入图所示的语句。
8、将面板暂时折叠,然后单击 【 减 】 按钮,再次展开 【 动作-按钮 】 面板,在其中输入图所示的语句。
9、用同样的方法再为 【 乘 】 和 【 除 】 按钮添加图所示的语句。
10、测试动画效果并将其保存为“加减乘除”。
习题(十)
选择题
1、如果某元件名的后缀为 _mc,表示该实例元件为( )。
A,图形元件
B,按钮元件
C,影片剪辑元件
C
2、在使用 ActionScript程序时经常用到对象、属性、方法三个概念,其中( )可以是程序里的任何元素,( )可以是用户定义的也可以是编程语言预定义的,它们具有可变的和可以访问的特性。
A,对象
B,属性
C,方法
D,值
AA
3,每个影片剪辑实例都有可定义的属性或是状态,这些属性或状态控制了该影片剪辑的
( )。
A,外观
B,尺寸
C,颜色
D,位置
ABCD
4、路径,简单地说,是通向一个目的地的途径,一个地址。可以用绝对或相对模式来指定影片剪辑的路径。它可以分为( )
和( )。
A,相对路径
B,绝对路径
C,直接路径
D,间接路径
B
A
5、在使用影片剪辑时可以改变其属性,如果要设置该实例在屏幕上的位置时,则需要通过
( )来设置。
A,_xscale和 _yscale
B,_x和 _y
C,_width和 _high
D,_visible
B
判断题
1,Flash MX的颜色对象赋予用户对影片剪辑对象的可控性。通过使用 ActionScript的颜色对象可以控制作品的颜色(或透明度)。
( )
2、颜色对象可以存储新颜色的值,使用 setRGB
和 setTransform方法将它们应用到按钮元件上。 ( )
√
×
3、我们可以通过声音对象控制那些通过使用 【 声音 】 面板赋予了某些关键帧的声音。 ( )
4、可以使用 ActionScript来改变影片剪辑实例的位置、比例和旋转。更多的物理状态可以通过在指定影片剪辑路径后面跟随属性名称(例如
_root.myMCinstance._rotation)的方式来访问。 ( )√
×
5、在任何时刻都可以访问和修改影片剪辑的属性。 ( )√
基本概念
加载声音
实现交互式动画
输入文本本章逻辑结构
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、新建一个影片文件,并设置该文件的大小为
600× 400。
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("blueSolid's RGB numeric value = " +
blueSolid.getRGB());
9、保存文件并测试该影片。
如果要把这些值转化回十六进值,在 on(release)
动作嵌套内添加下列动作:
trace("blueSolid's 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、新建一个文件,将其背景设置为淡紫色,
并将文件大小设置为 600× 400。
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、执行 【 窗口 】 【 公用库 】 【 按钮 】 命令,
打开按钮的共享元件库,从中选择 4个按钮放置到舞台中,并且分别在它们的右侧输入提示文字,如图所示。
7、打开 【 动作-按钮 】 面板,切换到 【 专家模式 】,然后在其中输入图所示的语句。
8、将面板暂时折叠,然后单击 【 减 】 按钮,再次展开 【 动作-按钮 】 面板,在其中输入图所示的语句。
9、用同样的方法再为 【 乘 】 和 【 除 】 按钮添加图所示的语句。
10、测试动画效果并将其保存为“加减乘除”。
习题(十)
选择题
1、如果某元件名的后缀为 _mc,表示该实例元件为( )。
A,图形元件
B,按钮元件
C,影片剪辑元件
C
2、在使用 ActionScript程序时经常用到对象、属性、方法三个概念,其中( )可以是程序里的任何元素,( )可以是用户定义的也可以是编程语言预定义的,它们具有可变的和可以访问的特性。
A,对象
B,属性
C,方法
D,值
AA
3,每个影片剪辑实例都有可定义的属性或是状态,这些属性或状态控制了该影片剪辑的
( )。
A,外观
B,尺寸
C,颜色
D,位置
ABCD
4、路径,简单地说,是通向一个目的地的途径,一个地址。可以用绝对或相对模式来指定影片剪辑的路径。它可以分为( )
和( )。
A,相对路径
B,绝对路径
C,直接路径
D,间接路径
B
A
5、在使用影片剪辑时可以改变其属性,如果要设置该实例在屏幕上的位置时,则需要通过
( )来设置。
A,_xscale和 _yscale
B,_x和 _y
C,_width和 _high
D,_visible
B
判断题
1,Flash MX的颜色对象赋予用户对影片剪辑对象的可控性。通过使用 ActionScript的颜色对象可以控制作品的颜色(或透明度)。
( )
2、颜色对象可以存储新颜色的值,使用 setRGB
和 setTransform方法将它们应用到按钮元件上。 ( )
√
×
3、我们可以通过声音对象控制那些通过使用 【 声音 】 面板赋予了某些关键帧的声音。 ( )
4、可以使用 ActionScript来改变影片剪辑实例的位置、比例和旋转。更多的物理状态可以通过在指定影片剪辑路径后面跟随属性名称(例如
_root.myMCinstance._rotation)的方式来访问。 ( )√
×
5、在任何时刻都可以访问和修改影片剪辑的属性。 ( )√