1、第 10次课,影片剪辑,影片剪辑,影片剪辑就象一个独立的swf一样，运行时不受主时间轴的限制，它有它自已的时间轴。在AS中影片剪辑为 MovieClip 类类型的一个对象。可以使用 MovieClip 类的属性和方法控制影片剪辑运行时的外观和行为。因此，在下文中将影片剪辑简称为：mc,第一节 创建MC,一创建MC：为了能在AS中操作该MC，那么可有两种方式将MC加载到舞台上：一是用鼠标从库中将MC拖到舞台上，然后打开属性面板，为该MC实例命名,比如：mymc_mc。,另一种方法是：在运行中从库中加载MC： 要在运行中从库中加载MC，首先要设置MC的连接标识：在库中右击MC，点击连接，在弹出的对
2、话框中，在“为ActionSprit导出“前的方框中打钩，然后在上面标识符栏内取一个名字，比如：mymc.,attachMovie()方法 有标识符后就可以在运行时用MC的attachMovie()方法加载MC。 格式：MC. attachMovie(“标识符”，“新名称”，深度)； 这里MC是指要加载MC的MC，如果代码是写在帧上，则常用this或_root来代表主时间轴，推荐使用this，也可以省略不写。如果代码是写在元件上，要主场景加载mc就必须用：_root或this.parent.,getNextHighestDepth() 方法： 深度相当于层的概念，深度的数字越大，则越在上面。如
3、果深度相同，那新加载的对象就会覆盖原来相同深度上的对象。 attachMovie()方法加载MC时，利用getNextHighestDepth() 方法确定加载影片剪辑的深度。,例如：已在库中设好标识符的MC可以加载到场景中： this. attachMovie(“mymc”,”mymc_mc”,this.getNextHighestDepth(); 用attachMovie()方法加载的MC，会被加载到舞台上（0，0）的位置。,下面来做一个练习： 新建一个MC，居中画一个圆，在第50帧插入关键帧，将圆向右移500象素，创建补间动画。在库中右击圆元件，点击“连接”，在弹出的对话框中，在“为Ac
4、tionSprit导出“前的方框中打钩，然后在上面标识符栏内取一个名字：mymc.现在回到主场景，右击第一帧，点“动作”，在动作面板中输入：this. attachMovie(“mymc“,“mymc_mc“,this.getNextHighestDepth(); mymc_mc._x=50; mymc_mc._y=200;,二在运行时创建MC createEmptyMovieClip（）方法 在运行时可用：createEmptyMovieClip（）方法创建一个空的MC。 格式：MC. createEmptyMovieClip（”名称“，深度）； 例：this.createEmptyMovi
5、eClip（”mymc_mc”,this. getNextHighestDepth()）;,三复制MC duplicateMovieClip()方法： 格式：MC.duplicateMovieClip(“新名称“，深度) 比如上面我们已建好的一个MC，mymc_mc，现在要复制它，这样写： Mymc_mc.duplicateMovieClip(“mymc1_mc”,this.getNextHighestDepth();,duplicateMovieClip()全局函数： 格式：duplicateMovieClip(“要复制的MC的名称”，“新名称”，深度)； 例如： duplicateMovi
6、eClip(“mymc_mc”,“mymc1_mc”,this.getNextHighestDepth(),四删除加载的MC removeMovieClip()方法： 来看看上面我们做那个练习，测试时，小球不停地反复地从左向右运动，现在我们让小球只运动一次，即当小球到达右边时，移除小球MC。 做法：在库中双击小球MC，进入小球元件编辑区，在第50帧上，点右键，点动作，在帧面板中输入： this. removeMovieClip(); 测试影片，当小球移动右边，第50帧时，小球被移除了。,五几个常用的属性： _x,_y：MC在其父级容器中的坐标位置。 _alpha：透明度，其值为0-100； _
7、rotation：旋转的角度。 _height：高度 _width：宽度 _visible：MC是否可见，些值为true或1,则MC可见，如果为false或非1则不可见。 _xmouse：鼠标位置的x坐标 _ymouse：鼠标位置的y坐标 _xscale：MC宽度的百分比例，可用于设置MC的大小。 _yscale：MC高度的百分比例，可用于设置MC的大小。,六综合练习：夜色中的荧火虫 下面通过一个夜色中的荧火虫的制作，作为本节内容的综合练习。 首先新建一flash文档，新建一MC，取名为“荧光”。 用椭圆工具，禁止笔触，绿色填充，居中画一个小圆，2个像素大小就行。居中对齐。点击“修改”-“形状
8、”-“柔化填充边缘“，距离10，步骤5，方向扩展。在第10帧插入关键帧，将圆向下离一段距离。创建补间动画。在库中右击荧光元件，设置标识符为：mymc. 回到主场景，打开帧动作面板输入：,/i=0; onEnterFrame = function() if(i50) this. attachMovie(“mymc“,“mymc“+i,i); mymc_mc = eval(“mymc“+i); mymc_mc._x=random(450)+50; mymc_mc._y=50+random(300); mymc_mc._rotation = random(360); i+; else i=0; OK
9、，测试影片。,第二节 加载和卸载swf文件,本节我们将介绍加载外部swf文件的方法。,loadMovie函数及MC的loadMovie（）方法：功能：使用 loadMovie() 函数可以在播放原始 SWF 文件时，将 SWF、JPEG、GIF 或 PNG 文件加载到 Flash Player 中的影片剪辑中。加载的图像或 SWF 文件的左上角与目标影片剪辑的注册点对齐。 格式：loadMovie(“要加载的swf文件或图片“，目标影片剪辑)； 要加载的swf文件或图片可以来源于网络，书写格式为：http:/ 可以来源于本地硬盘上的文件系统，书写格式为：file:/. 如果要加载的swf文件或
10、图片与fla文件在同一目录下，则直接写文件名。 目标影片剪辑可以是任何影片剪辑，也可以是主场景，加载后，目标影片剪辑将被替换成加载的文件。,例1：加载一个网络上的swf文件sub.swf到创建的MC中： this.createEmptyMovieClip(“logo_mc“, 1); loadMovie(“http:/ logo_mc); 例2：加载一个本地的swf文件sub.swf到主舞台： loadMovie(“file:/d:/myflash/sub.swf“, this); 例3：加载一个相同目录下的图片picture.jpg到创建的MC中： this.createEmptyMovie
11、Clip(“picture_mc“, 1); loadMovie(“picture.jpg“,picture_mc); 以上是loadMovie函数的写法，而MC的loadMovie（）方法也一样，只写法不同，如：this.createEmptyMovieClip(“picture_mc“, 1); picture_mc.loadMovie(“picture.jpg“);,loadMovieNum 函数 在播放原始 SWF 文件时，将 SWF、JPEG、GIF 或 PNG 文件加载到一个级别中。用法跟loadMovie一样，只是它不是指明目标影片剪辑，而加载到一个深度上。 比如要加载相同目录下
12、的swf文件myflash.swf到深度为2的级别中: loadMovieNum(“myflash.swf”,2); 要注意的是，当深度相同时，新加载的对象会覆盖原来的对象。用下面一句来加载外部swf文件： loadMovieNum(“myflash.swf”,this.getNextHighestDepth();,第三节 MC的深度,舞台上的对象都有它自已的深度，深度数字大的盖住比它小的对象，可以把MC放到-16384 至 1048575的任一深度上。,1）getNextHighestDepth()方法：返回下一个可用的深度值。比如：this.createEmptyMovieClip(“my
13、_mc”,this.getNextHighestDepth(); 2）getInstanceAtDepth()方法：返回某个特定深度值上的MC实例。 比如要确定当前最大深度值的MC，可以用如下代码： var zddepth = this.getNextHighestDepth()-1; /获得当前最大的深度值 var my_mc:MovieClip =this.getInstanceAtDepth(zddepth);,3）getDepth()方法：返回某个MC的深度 比如要返回MC，my_mc的深度： var mymcdepth = my_mc.getDepth(); 4）swapDepths
14、()方法：交换两个MC的深度值，如果MC正在执行补间，则补间会停止。 比如有两个MC：mc1和mc2，现在要交换这两个MC的深度 mc1.swapDepths(mc2);,下面通过一个练习来熟悉本节课所介绍的内容。 效果如下：用鼠标点击挡在下面的图片，这张图片将移到最上面一层来。,制作方法： 1.新建一flash文档，导入若干图片。 2.将这些图片分别做成MC，大小随意，但宽高不应超过200或可再小一些。在库中分别右击这些MC，点击“连接”，在弹出的面板中，在为ActionSpript导出前打钩。在标识框内输入：pic1.第二个MC则输入pic2,以此类推。 3.回到主场景，打开动作面板，输入
15、下列代码：（注意下面的代码是以5张图片为例写的，如果你不是5张图片则应作相应修改，详细说明看后面的代码分析）,for(i=1;i6;i+) this.attachMovie(“pic“+i,“pic“+i+“_mc“,this.getNextHighestDepth(); var pic_mc = eval(“pic“+i+“_mc“); pic_mc._x = 150 +random(200); pic_mc._y = 100 + random(200); pic1_mc.onRelease = function() var zddepth =_root.getNextHighestDept
16、h()-1; var zd_mc:MovieClip =_root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); pic2_mc.onRelease = function() var zddepth = _root.getNextHighestDepth()-1; var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); ,pic3_mc.onRelease = function() var zddepth = _root.getN
17、extHighestDepth()-1; var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); pic4_mc.onRelease = function() var zddepth = _root.getNextHighestDepth()-1; var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); pic5_mc.onRelease = function() var zddept
18、h = _root.getNextHighestDepth()-1; var zd_mc:MovieClip = _root.getInstanceAtDepth(zddepth); this.swapDepths(zd_mc); ,第五节 拖动与碰撞检测,AS的一个重要优势就是可以实现交互动画，拖动MC则是交互动画的一个例子。 startDrag() 函数或 MovieClip.startDrag() 方法： 使用startDrag()可以实现拖动效果。格式： MC.startDrag(布尔值，左边，上边，右边，下边）； 布尔值：true或false。当设定为true时鼠标位置将锁定在要拖动
19、的MC的注册点上。 后面的4个边，确定了MC可以被拖动的范围。,下面练习一下： 自定义鼠标指针： 新建一个MC，画一个或找一个你喜欢的鼠标图形，图形应该有一个较尖的部位作为针尖吧？将这个针尖与窗口中的十字对齐。回到主场景，将这个MC拖到舞台上，打开属性面板，实例名称为：mouse_mc；打开帧动作面板输入： Mouse.hide(); mouse_mc.startDrag(true);测试影片,stopDrag()方法： 功能：停止拖动。 一般将startDrag()放到MC的onPress事件（点下鼠标时）中，而将 stopDrag()放到onRelease事件（放开鼠标时）中。,滑动控制条
20、： 有时用到滑动控制条，比如控制音量大小，播放进度等。那么滑块就需要用到拖动的方法。 用矩形工具画一个细长的矩形，将它转换为MC，双击它进入编辑状态，打开对齐面板选择相对于舞台，左对齐，回到主场景，打开属性面板，实例名称为blt_mc。然后再画一个很短的矩形，做滑块，也转换为MC,也同细长的矩形一样的做法，只是居中对齐，最后的实例名为hk_mc。 blt_mc移到你想它所处的位置，将hk_mc移到blt_mc上。 在帧动作面板中输入：,l = blt_mc._x; r = l+blt_mc._width; h = blt_mc._y; hk_mc.onPress = function() th
21、is.startDrag(“true“,l,h,r,h); hk_mc.onRelease = function() stopDrag(); num = (hk_mc._x-blt_mc._x)/blt_mc._width; ,_droptarget 属性： MC的_droptarget 属性将返回被自已重叠在下面的MC的名称。比如将苹果拖到盘子上时，苹果将盘子压在下面，苹果的_droptarget 属性将返回盘子的名称。但它返回的名称是带反斜杠的格式的，因此需要用eval()将其转换为标准格式，如：eval(苹果. _droptarget)这一句结果是：盘子。,做个练习熟悉一下： 在舞台上画
22、两个园，不同的颜色，均转换为MC，实例名称分别为：mc1_mc,mc2_mc.右击mc1_mc排列移至顶层；打开动作面板，输入：,mcx = mc1_mc._x; mcy = mc1_mc._y; mc1_mc.onPress = function() this.startDrag(true); mc1_mc.onRelease = function() stopDrag(); if(eval(mc1_mc._droptarget)=mc2_mc) this._x = mc2_mc._x; this._y = mc2_mc._y; else this._x = mcx; this._y = m
23、cy; ,测试影片，在mc1_mc上点击时可以拖动，将它拖到mc2_mc上放开鼠标，则与mc2_mc重叠，如果不在mc2_mc上放开鼠标，则回到原位。 这种检查一个MC是否被拖到另一个MC之上还有另一种方法，那就是碰撞检测。,hitTest（）方法： 该方法将检测MC是否与某点或与另一MC发生相交（碰撞）。如果发生相交则返回true,否则返回false. 用法：1.与某点相交： MC.hitTest(x,y,true或false); 这将检测MC是否与括号中的x,y所确定的点（x,y）相交。后面的布尔值如果为ture，那么将检测MC的实际图形范围，如果为false则检测MC的外框是否与（x,y
24、）相交。 2MC与MC相交：MC.hitTest(另一MC). 把上面的的练习改为下面的代码，可得到相同的结果：,mcx = mc1_mc._x; mcy = mc1_mc._y; mc1_mc.onPress = function() this.startDrag(true); mc1_mc.onRelease = function() stopDrag(); if(this.hitTest(mc2_mc) this._x = mc2_mc._x; this._y = mc2_mc._y; else this._x = mcx; this._y = mcy; ,AS绘图,AS2.0提供了绘图
25、方法，利用这些方法，可以绘制一些图形。 1) lineStyle() 方法：该方法确定线条的类型。 常用格式：MC.lineStyle(粗细，颜色，透明度)。 比如：my_mc. lineStyle(1,0xff0000,100) 这就指明了线条粗细为1，颜色是红色，透明度为100%。 2) moveTo（）方法：该方法将画笔移到起画点上。 用法：MC.moveTo(x,y); 3)lineTo()方法： 该方法将从起画点到终点画一条直线，并将起画点移到终点。 用法：MC.lineTo(x,y),this.lineStyle(1,0xff0000,100); this.moveTo(0,0);
26、 this.lineTo(200,200);测试影片，上面的代码画了一条从（0，0）到（200，200）的红色直线。 下面扩展一下，画个三角形： this.lineStyle(1,0xff0000,100); this.moveTo(200,200); this.lineTo(300,200); this.lineTo(250,300); this.lineTo(200,200);,4)beginFill()方法：开始填充。 用法：MC.beginFill(颜色，透明度) 5)endFill()方法：用beginFill()中的颜色填充图形。 比如将上面的三角形填上蓝色： 如果想要无笔触的三角
27、形，那么上面第一句不要就行了。,this.lineStyle(1,0xff0000,100); this.beginFill(0x0000ff,100); this.moveTo(200,200); this.lineTo(300,200); this.lineTo(250,300); this.lineTo(200,200); endFill(); 测试影片，会看到一个红色笔触蓝色填充的三角形。,例子：绘制五角星 将下列代码输入到帧动作面板中：,this.createEmptyMovieClip(“wx_mc“,this.getNextHighestDepth(); wx_mc._x = S
28、tage.width/2; wx_mc._y = Stage.height/2; wx_mc.beginFill(0xFF0000,100); wx_mc.moveTo(0,0); wx_mc.lineTo(0,-100); wx_mc.lineTo(25,-30); wx_mc.lineTo(0,0); wx_mc.endFill(); wx_mc.beginFill(0xee0202,100); wx_mc.moveTo(0,0); wx_mc.lineTo(0,-100); wx_mc.lineTo(-25,-30); wx_mc.lineTo(0,0); wx_mc.endFill()
29、;,for(i=0;i5;i+) wx_mc.duplicateMovieClip(“wx1“+i,this.getNextHighestDepth(); wx1 = eval(“wx1“+i); wx1._rotation = i*72; this.createEmptyMovieClip(“xg_mc“,this.getNextHighestDepth(); xg_mc._x = Stage.width/2; xg_mc._y= Stage.height/2; xg_mc.lineStyle(1,0xeed600,100); xg_mc.moveTo(0,-120); xg_mc.line
30、To(0,-140); xg_mc.moveTo(10,-160); xg_mc.lineTo(10,-180); for(j=0;j37;j+) xg_mc.duplicateMovieClip(“xg“+j,this.getNextHighestDepth(); xg1_mc = eval(“xg“+j); xg1_mc._rotation = j*10; ,6）curveTo() 方法：该方法画一条由起画点经控制点到终点的一条曲线。 用法：MC. curveTo(控制点x,控制点y,终点x,终点y);,代码： this.createEmptyMovieClip(“mh_mc“,this.
31、getNextHighestDepth(); mh_mc._x = Stage.width /2; mh_mc._y = Stage.height/2; mh_mc.beginFill(0xff0000,100); mh_mc.moveTo(0,0); mh_mc.curveTo(-20,-25,-10,-45); mh_mc.curveTo(0,-60,10,-45); mh_mc.curveTo(20,-25,0,0); mh_mc.endFill(); for(i=0;i5;i+) mh_mc.duplicateMovieClip(“mh“+i,this.getNextHighestDe
32、pth(); mh1_mc = eval(“mh“+i); mh1_mc._rotation= i*72; ,7）beginGradientFill（）方法：该方法可实现渐变填充。 参数： fillType: 线性渐变用“linear“，放射渐变用“radial“。 colors: 用于渐变色的 RGB 十六进制颜色值的数组；例如，红色为 0xFF0000，蓝色为 0x0000FF。可以至多指定 15 种颜色。对于每种颜色，确保在 alphas 和 ratios 参数中指定对应值。 alphas: colors 数组中对应颜色的 Alpha 值数组；有效值为 0 到 100。如果值小于 0，则
33、 Flash 使用 0。如果值大于 100，则 Flash 使用 100。 ratios: 颜色分布比例数组；有效值为 0 到 255。即渐变中每种颜色的比例值，可以理解为颜色面板中，渐变色的滑块的位置。比如在colors参数为：0xFF0000,0x0000FF,本参数为：250,255，,matrix: 一个转换矩阵： flash.geom.Matrix 类包括 createGradientBox() 方法，通过该方法可以方便地设置矩阵，以便用于 MovieClip 类的 beginGradientFill() 方法。 用法：首先需要导入flash.geom.Matrix类 import
34、flash.geom.* 然后，创建一个flash.geom.Matrix类的实例，再调用createGradientBox方法： matrix = new Matrix(); matrix.createGradientBox（渐变范围的宽，渐变范围的高，旋转， x轴方向的偏移量，y轴方向的偏移量）;,x轴方向的偏移量：一般为要填充的形状的x减去渐变范围的宽。 y轴方向的偏移量：一般为要填充的形状的y减去渐变范围的高。 根据形状可调。 focalPointRatio: 可选 在 Flash Player 8 中添加。一个数字，控制渐变焦点的位置。值 0 表示焦点位于中心。值 1 表示焦点位于渐
35、变圆的一条边界上。值 -1 表示焦点位于渐变圆的另一条边界上。小于 -1 或大于 1 的值将被舍入为 -1 或 1。,代码： import flash.geom.*; import flash.geom.*;this.createEmptyMovieClip(“mh_mc“,this.getNextHighestDepth();mh_mc._x = Stage.width /2;mh_mc._y = Stage.height/2;var color:Array = 0xFF0000,0xfee7f8;var alph:Array= 100,100;var rotio:Array = 0,255
36、;var matrix = new Matrix(); matrix.createGradientBox(40,100,Math.PI,-20,-40);/这里要填充的形状注册点是（0，0）这样就算出了-20，和-40（调整后的）mh_mc.beginGradientFill(“radial“,color,alph,rotio,matrix); mh_mc.moveTo(0,0);mh_mc.curveTo(-20,-25,-10,-45);mh_mc.curveTo(0,-60,10,-45);mh_mc.curveTo(20,-25,0,0);mh_mc.endFill(); for(i=
37、0;i5;i+) mh_mc.duplicateMovieClip(“mh“+i,this.getNextHighestDepth();mh1_mc = eval(“mh“+i);mh1_mc._rotation= i*72; this.createEmptyMovieClip(“hz_mc“,0);hz_mc._x =Stage.width/2; hz_mc._y = Stage.height/2; hz_mc.lineStyle(6,663333,100); hz_mc.moveTo(0,0); hz_mc.curveTo(-5,110,0,160); this.createEmptyMo
38、vieClip(“hy_mc“,this.getNextHighestDepth();hy_mc._x =Stage.width/2;hy_mc._y = Stage.height/2;color = 0x0e730d,0x06db2b;matrix.createGradientBox(60,20,Math.PI,10,50); hy_mc.beginGradientFill(“radial“,color,alph,rotio,matrix); hy_mc.moveTo(0,70); hy_mc.curveTo(35,40,70,50); hy_mc.curveTo(35,90,0,70);hy_mc.endFill(); hy_mc.duplicateMovieClip(“hy1_mc“,this.getNextHighestDepth();hy1_mc._xscale = -100; hy1_mc._x =hy_mc._x -6;hy1_mc._y =hy_mc._y +10,
