
第十八课 flash教程.docx
12页第十八课 影片剪辑控制(1)影片剪辑属性控制范例—控制蝴蝶通过前两课的学习,我们对 ActionScript 的编程环境和事件处理方式有了初步了解,并通过对时间轴和按钮的控制实现了一些简单的 Flash 交互动画效果在 Flash 文件(ActionScrip2.0)中,函数主要是通过时间轴、按钮和影片剪辑来控制的,本课将通过影片剪辑控制,继续深入研究 ActionScript 在 Flash 交互动画中的应用影片剪辑是 Flash 中最重要的编程对象本课主要了解在 Flash 文件(ActionScript2.0)中对影片剪辑进行控制的方法,包括一些常用的影片剪辑属性的用法以及一些常用的全局函数的用法对 Flash 文件(ActionScript3.0)来说,很多控制影片剪辑的全局函数已经不再支持,它只保留了 trace( )、Array( ) 等一些全局函数在 ActionScript3.0 中对影片剪辑进行控制的方法,主要通过flash.display>MovieClip 类来实现I. 影片剪辑属性概述Flash 可以做出千变万化、多姿多彩的动画效果,其中很大一部分都是由控制影片剪辑(MC)的属性来达到的。
1.影片剪辑属性简介在 Flash 中,MC 的属性有 30 余种,在这里介绍部分常用的属性alpha:影片剪辑实例的透明度有效值为 0(完全透明)到 100(完全不透明)默认值为 100可以通过对 MC 的_alpha 属性在 0 到 100 之间变化的控制,制作出或明或暗或模糊的效果来rotation:影片剪辑的旋转角度(以度为单位)从 0 到 180 的值表示顺时针旋转,从 0 到-180 的值表示逆时针旋转不属于上述范围的值将与 360 相加或相减以得到该范围内的值例如:语句 my_mc._rotation=450 与my_mc._rotation=90 相同visible:确定影片剪辑的可见性当 MC 的_visible 的值是 true(或者为1)时,MC 为可见;当 MC 的_visible 的值是 false(或者为 0)时,MC 为不可见height:影片剪辑的高度(以像素为单位)width:影片剪辑的宽度(以像素为单位)xscale:影片剪辑的水平缩放比例yscale:影片剪辑的垂直缩放比例当_xscale 和_yscale 的值在 0~100 之间时,是缩小影片剪辑为原影片剪辑的百分数;当_xscale 和_yscale 的值大于 100 时,是放大原影片剪辑;当_xscale 或_yscale 为负时,水平或垂直翻转原影片剪辑并进行缩放。
不要把影片剪辑的高度与垂直缩放比例混淆,也不要把影片剪辑的宽度与水平缩放比例混为一谈,例如:MC._width=50//表示把 MC 的宽设置为 50 像素;MC._xscale=50//表示把 MC 的水平宽度设置为原来水平宽度的 50%x:影片剪辑的 x 坐标(整数)y:影片剪辑的 y 坐标(整数)2.getProperty()和 setProperty()函数上面介绍了部分常用的 MC 属性,那么到底怎么去实现对其属性的控制呢? 常用的命令是 setProperty()和 getProperty(),即设置属性的函数和取得属性的函数在Flash ActionScript2.0 中,这两个函数在【动作】面板中【全局函数】|【影片剪辑控制】类别下setProperty()命令用来设置 MC 的属性,它的一般使用形式为:1. setProperty(目标,属性,值);命令中有三个参数:目标:就是要控制(设置)属性的 MC 的实例名,注意包括 MC 的位置(路径)属性:即要控制的何种属性,例如透明度、可见性、放大比例等值:属性对应的值,包括数值、布尔值等例如:setProperty(“_root.mc.mc1”,_visible, false);//表示把影片剪辑实例mc 中实例名为 mc1 的影片剪辑设置为不可见。
setProperty("_root.dm",_rotation,30);//表示要使实例名为dm 的影片剪辑转动 30 度getProperty()命令用来获取 MC 的属性,它的一般使用形式为:1. getProperty(目标,属性);命令中有两个参数:目标:被取属性的 MC 实例的名称; 属性:要取得的 MC 的属性例如:Mx= getProperty(“_root.mc.mc1”,_x);//取得影片剪辑实例 mc 中实例名为 mc1 的影片剪辑的横坐标,并把它交给变量 mx;setProperty("_root.dm1",_y, getProperty("_root.dm0",_y));//表示设置影片剪辑实例 dm1 的纵坐标为影片剪辑实例 dm0 的纵坐标或者说,取得影片剪辑实例 dm0 的纵坐标的值,把这个值作为影片剪辑实例 dm1 的纵坐标的值这种方法经常用在动态地为影片设置属性★ 在使用影片剪辑的_x 和_y 属性设置影片剪辑的位置时,应该注意:如果影片剪辑在主时间轴中,则其坐标系统将舞台的左上角作为 (0, 0),向右和向下逐渐增加如果影片剪辑在其它影片剪辑的时间轴中,则以所在影片剪辑的中心位置为(0,0),向右和向下为正,并逐渐增加。
向左和向上为负,并逐渐减小3.使用点语法存取属性值除了用 setProperty()和 getProperty()命令设置和取得 MC 的属性外,还可以用点语法“.”来设置或取得 MC 的属性点语句的用法的一般形式为:影片剪辑名称.属性=(属性对应的)值影片剪辑名称当然包括它的路径(后面会比较详细地介绍路径的概念)下面我们以前面的例子来说明setProperty(“_root.mc.mc1”,_visible, false);可以写成:_root.mc.mc1._visible=false; setProperty("_root.dm",_rotation,30); 可以写成:_root.dm._rotation=30;mx= getProperty(“_root.mc.mc1”,_x);可以写成:mx= _root.mc.mc1._x;setProperty("_root.dm1",_y, getProperty("_root.dm0",_y));可以改写成两句:my=_root.dm0._y;_root.dm1._y=my;II. 影片剪辑属性控制范例—控制蝴蝶本范例是控制 MC 属性的一个效果演示,通过在按扭上添加控制属性的命令, 观察 MC 的变化,加深对 MC 属性的理解,掌握 mc 属性的控制方法。
范例运行时,屏幕上显示一个蝴蝶和一些控制属性演示的按扭,如图 1 所示按扭上有表示属性和控制的说明内容单击按扭,就可以观察蝴蝶形态、位置等属性变化图 1 范例效果下面详细讲解制作步骤1. 创建影片文档和背景(1) 新建一个 Flash 文件(ActionScript2.0),设置舞台尺寸为 450×340像素,其它属性按照默认设置保存影片文档为“影片剪辑属性控制.fla”2) 将“图层1”重新命名为“背景”将外部图像文件(花.jpg)导入到舞台,在“属性”面板设置图像尺寸为 450×340 像素,坐标为(0,0)将图像转换为影片剪辑元件,并且在“属性”面板中设置实例的 Alpha 为 30%如图 2 所示图 2 背景★ 使用【属性】面板和动作脚本,均可以改变影片剪辑的_alpha 属性当将影片剪辑的_alpha 设置为 0 时,影片剪辑在舞台上只是变得看不见,而并没有从舞台消失,此时影片剪辑仍有可能处于活动状态若需要使影片剪辑完全禁用, 可将其_visible 属性设置为 02. 制作元件(1) 新建一个名字为“飞蝶”的影片剪辑元件2) 在这个元件的编辑场景中,绘制一个蝴蝶身体,如图 3 所示。
图 3 蝴蝶身体(3) 用补间动画制作蝴蝶左右两个翅膀舞动的效果,如图 4 所示图 4 “飞蝶”影片剪辑元件(4) 制作 4 种不同形状按钮以控制“飞蝶”的各种属性,如图 5 所示图 5 4 个按钮3. 布局场景(1)返回到“场景1”新增加一个图层,并重新命名为“蝴蝶”在这个图层上,从【库】面板中拖出“飞蝶”影片剪辑元件,调整放在适当的位置然后在【属性】面板中将它命名为 xn2)在【背景】图层上方添加一个图层,并重新命名为“控制”从【库】中将制作好的按钮拖到这个图层场景中的适当位置上,并在每个按钮上添加静态文本加以说明按钮功能,位置及文本内容如图 1 所示使用“文本工具”在场景中添加两个动态文本框,在【属性】面板中定义字体属性为:黑体、黑色、12 磅分别为两个文本框定义变量名分别为 zb 和 hw大小及位置如图 6 所示图 6 动态文本框4. 定义动作脚本(1) 选中“可见”按扭,在【动作】面板定义动作脚本:on(release) {xn._visible=true;//设置蝴蝶实例为可见,也可以写成:xn._visible=1;}选中“不可见”按扭, 在【动作】面板定义动作脚本:on(release) {xn._visible=false;//设置蝴蝶实例为不可见,也可以写成: xn._visible=0;}(2) 选中“alpha -10”按扭,在【动作】面板定义动作脚本: on(release) {xn._alpha-=10;//每按一次按钮,_alpha 的值减少 10%,当于_alpha=_alpha-10}选中“alpha +10”按扭,在【动作】面板定义动作脚本: on(release) {xn._alpha+=10//每按一次按扭,_alpha 的值增加 10%,相当于_alpha=_alpha+10;}(3) 选中“xscale -20”按扭,在【动作】面板定义动作脚本: on(release) {xn._xscale-=20;//每按一次按钮,蝴蝶横向缩小 20%}选中“_xscale+20”按扭,在【动作】面板定义动作脚本:on(release) {xn._xscale+=20;//每按一次,蝴蝶横向放大 20%}选中“yscale -20”按扭,在【动作】面板定义动作脚本: on(release) {xn._yscale-=20;//每按一次按钮,蝴蝶纵向缩小 20%}选中“yscale +20”按扭,在【动作】面板定义动作脚本: on(release) {xn._yscale+=2。
