《2022年Flash新手入门教程：AS代码中duplicateMOvieClip的应用 .pdf》由会员分享，可在线阅读，更多相关《2022年Flash新手入门教程：AS代码中duplicateMOvieClip的应用 .pdf（11页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、AS2 代码中 duplicateMOvieClip 的应用duplicateMovieClip在 AS2.0 起复制影片剪辑作用.通过对这个函数的灵活应用,可以制作出很多特效来 .诸如鼠标跟随,火焰 ,什么变换的彩色线条,下雨下雪效果, 烟花等等 .通常的做法是先创建一个影片剪辑元件 ,放到舞台上 ,然后编写代码 ,使影片剪辑不可见,通过一个无限的循环不停地复制影片剪辑元件 ,并设置复制出来的影片剪辑元件的各种属性.一般是 :x、Y 坐标 ,透明度 ,大小 ,旋转 ,颜色等属性 .通过一个变量 ,初始值设为1,每循环一次 ,即每复制一个元件,变量值增加1,当数字达到需要复制的数量时将变量重新
2、设为1.这样就利用当深度相同时新复制的元件会覆盖原来的元件的原理,使元件不断的更新,同时也使舞台上的元件始终只有一个固定的数量.根据个人的习惯不同,实现的方法也有不同,下面分别介绍一下几种方法. 一种方法是 :在主场景中插入三个关健帧.在第一帧输入 : i=1;/ 这就是上面说的,初始值为1 的变量元件名称 ._Visible=0;/ 让元件不可见在第二帧输入: duplicateMOvieClip(元件名称 ,元件名称 十 i,i); / 复制元件 ,新复制的元件名为:元件名称i, 深度为 i 新名称 =eVal(元件名称 十 i);/ 用新名称来代表新复制出来的元件名称/下面就是没置新复制
3、出来元件的各种属性新名称 ._x= ;新名称 ._Y=;新名称 ._rotation=;新名称 ._alpha= ;i+; if(i 需要的元件数量) i=1; / 当复制的数量达到需要的数量时,将变量值设为1 第三帧代码 : gotoAndPlay(2);/ 这样就形成了一个无限循环. 笫二种方法是只用一帧,代码为 : i=1; 元件名称 ._visible=O; OnEnterFrame=functiOn()/ 每一帧执行一次,这实际就形成了无限循环上面第二帧的代码 第三种方法 ,也只用一帧 ,代码为 : i=1; 元件名称 ._visible=O; function 函数名称 () 上面
4、第二帧的代码 var 任一取个变量名=setInterval( 函数名称 ,间隔的毫秒数);/每隔多少毫秒执行一次函数中的代码. 第三种方法在有时是很有用的,当你不是每一帧复制一个元件时,这种方法就特别适合. 根据上面的个绍,大家充分发挥想象,以你的聪明才智,一定能制作出非常酷眩的特效的. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 11 页 - - - - - - - - - (提示: 复制元件后 , 设置其旋转属性 ) 下面介绍一下影片剪辑元件的制作方法：在元件编
5、辑面板中 , 从十字点开始向右画一条红色的直线. 在第帧插入关键帧，将线条的颜色一次为黄色，用选择工具将线条调为向上的弧形创建补间形状第20 帧插入关键帧，将线条重新调为直线，创建补间形状，在第 30 帧插入关键帧， 将线条颜色调为绿色，形状调为向下的弧形，创建补间形状第40 帧插入关键帧，将线条颜色调为蓝色，形状调为直线，创建补间形状就行了通过实例学习AS（四） 画折扇即然是纯 AS的，那么就在第一帧打开动作面板，开始写代码吧。首先的两句：import flash.geom.* import com.darronschall.DynamicRegistration; 首先引入两个类，第一个是
6、我们在后面的矩阵要用到它，第二个是一个动态改变注册点的类。import 是引入的意思，我只需记住要用到矩阵就要引入上面第一个类，要动态改变注册点就要引入第二类就行了。首先画扇梗，先分析一下，如下图：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 11 页 - - - - - - - - - 要画扇梗，首先要确定这四个点的坐标，先说a 点，扇子要放场景中间，那么a 点的 x就应该是在场景中心偏右一点， a 点的 y 值就应该在场景的下半部了。 为了确定 a 的坐标我们就要找
7、到场景的中心，所以接下来我这样写：var px:Number = Stage.width/2;/场景中心的 x var py:Number = Stage.height/2;/场景中心的 y var ax:Number = px+30; var ay:Number = py+100; Staege 可以理解为舞台， width 是宽度， height是高度。那么上面这句就应该理解了吧。接下来看b 点，我们在确定某点的坐标时，始终以离它最近的一点作参考，就好确定了。那么离 b 点最近的是 a 点。从图上看， b 点的 x 值比a 点稍在一点点， b 点的 y 值是扇梗下端的宽度，所以，接下来的是
8、：var bx:Number = ax+5 ; var by:Number= ay - 10; c 点：bx cx = 扇梗的长度，能明白吗？从图上看，扇梗上斜着的，也就是说c 的位置比 b的位置略高。所以：var cx = bx -250; var cy = by-100; d 点，从图上看， d 点比 c 点稍偏左，而 dy cy = 扇梗的上端宽度。所以：var dx = cx-5; var dy = cy + 18; 这中个点就确定了，实际这些点都是大概的数字，画出来后，如果图形不规则再作调整就行了。现在开始画扇梗，首先在创建一个mc ：this.createEmptyMovieCli
9、p(sg,0); 这句：createEmptyMovieClip ()：创建一个空的 mc ，括号中两个参数，第一个用引号引起的是 mc的名称，逗号后面是深度。有了上面一句，一个叫sg 的 mc被创建，然后我们就可以用sg 来绘扇梗了：sg.lineStyle(1,0 x6c6146,100); sg.beginFill(0 xfbf2d0,100); sg.moveTo(ax,ay); sg.lineTo(bx,by); sg.lineTo(cx,cy); sg.lineTo(dx,dy); sg.lineTo(ax,ay); sg.endFill(); 上面几句语句介绍：lineStyle
10、()：确定线条的的样式，括号中个参数，分别是：粗细、颜色、透明度beginFill()：开始填充，括号中个参数分别是：填充颜色、透明度moveTo(x，y) ：将画笔移到括号中的x，y 坐标处lineTo(x,y)：从画笔所在位置开始画一条直线到括号中的x,y 坐标处，并将画笔停留在这里。如果下面还有lineTo()那么将这里向下面的lineTo 中的 x,y 画直线。endFill()：结束填充，这时将会这图形填上色。如果你画的不是一个闭合图形，那么将自动闭合填充。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理
11、- - - - - - - 第 3 页，共 11 页 - - - - - - - - - 画到现在第一条扇梗就画好了，这时应测试影片，看看画出的扇梗是否符合要求，如果不对，就调整上面各点的x,y 坐标，直到符合要求。如图：next 接下来我们来画其它的扇梗，我们采用复制旋转的方式来画其它的扇梗。但这里有个问题，用 AS画出的图形它的注册点上其左上角，用复制旋转的方法显然不行。 解决的办法，就只能是改变 mc的注册点，好在我们在网上找到一个可以动态改变注册点的类：DynamicRegistration，关于这个类的教程， 请参见我在论坛中的“动态改变注册点“的教程。打开的扇子底边并不是一条直线，
12、而是向上斜的，其夹角大概是度，我们的扇梗以度画一条，刚好可以画条，下面的代码完成了其它扇梗的绘制：for (var i = 1;i11;i+) sg.duplicateMovieClip(sg+i,i); var fzsg = eval(sg+i); / eval 将括号中的” sg”+i 变成了 sgi DynamicRegistration.initialize(fzsg); fzsg.setRegistration(ax-20, ay-14); / 将注册点改到了ax-20,ay-14的地方。fzsg._rotation2 = i*15; 现在测试影片看到的应该是这样的效果：扇梗画好了，
13、现在我们画扇面，首先还是先确定几个点的坐标：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 11 页 - - - - - - - - - e 点用 d 点作参考： ex-dx = 扇面的高度；因为扇梗是倾斜的，所以e 点应比 d 点略向下一些。h 点：x 坐标应是场景中心，即hx = px ；py-hy ex-dx; f 点、g 点、i 点 f 均参考上面的方法确定。 f 、g 点的位置要注意一下，应该要把最后一根扇梗露出来，不要盖住。sma 、smb则分别在两段园弧的中
14、间。再次说明，这些点的位置并不十分准确，画好后测试景片，不对再调整，就跟鼠绘一样，你在用鼠绘画的时候也不会去精确计算，哪一笔该画到什么位置。那么有没有精确的点呢，这个当然是存在的。很多AS绘图教程都会介绍怎样去计算这些点。又是数字计算，又是几何知识，三角函数，写了一大堆，能懂的人不多。仅管这些知识都是学过的，至少我都还给老师了。所以我们不用去计算，我们用非常先进的仪器来测量这些点的位置，那就是眼睛。我们注意到，扇面中出现了弧形，而上面的lineTo 只能画直线，所以我们要用到画弧线的方法：curveTo(x ,y ,x ,y ) ：这是画弧线的方法，它是从画笔所在位置画一条通过（x1,y1 ）
15、到（ x2,y2 ）的弧线。好，现在可以画扇面了：var ex = dx +150; var ey = dy + 55; var fx = ax +60; var fy = ay - 32; var gx = fx + 158; var gy = fy - 29; var jx = dx - 15; var jy = dy - 5; var hy = ay -150; var hx =ax-10 ; var ix = ax +10; var iy = ay -260; var smax = gx - 40; var smay = gy -170; var smbx = jx+80; var s
16、mby = jy-170; this.createEmptyMovieClip(sm,11);/注意，因为扇梗将的深度占了，所以这里的深度应该是 . 赿上面的深度数字应该赿大。sm.beginFill(0 xffffff,100); sm.moveTo(ex,ey); sm.curveTo(hx,hy,fx,fy); sm.lineTo(gx,gy); sm.curveTo(smax,smay,ix,iy); sm.curveTo(smbx,smby,dx,dy); sm.lineTo(ex,ey); sm.endFill(); 画出的扇面应该如上图的样子，不对就调整。next 名师资料总结
17、- - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 11 页 - - - - - - - - - 接下来，画阴影，确定如图K点的位置，然后就可以画了。var kx = ex +13; var ky = ey - 8;this.createEmptyMovieClip(yy,20);yy.beginFill(0 x000000,10);yy.moveTo(ex,ey);yy.lineTo(kx,ky);yy.lineTo(cx,cy);yy.lineTo(dx,dy);yy.lineTo(e
18、x,ey);yy.endFill();for (var j = 21;j30;j+)yy.duplicateMovieClip(yy+j,j);var fzyy = eval(yy+j);DynamicRegistration.initialize(fzyy);fzyy.setRegistration(ax-20, ay-14);fzyy._rotation2 = (j-20)*15;现在测试效果如图。应该说扇子已画好了，不过纯白色的扇面的点不好看？在扇面上再画点啥点缀一下？好的，我们先画一点花，再给它整上一首诗如何？其实大家都看到了，最后弄出来的效果好象更差了，管的哦，我们的目的是学习AS
19、，弄点这些东西，我也才好介绍其它的一些内容。先画花枝，如下图确定各点位置，然后可以画了。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 11 页 - - - - - - - - - var hzax = ex ; var hzay = ey - 40; var hzbx = hzax ; var hzby = hzay - 100; var hzcx = hzax +10; var hzcy = hzay -150; var hzdx = hzcx -10; var hz
20、dy = hzay - 180; var hzex = hzax -10; var hzey = hzay - 5; var hzfx = hzax-3; var hzfy = hzay-100; var hzgx = hzax + 50; var hzgy = hzay - 130; var hzhx = hzax + 25; var hzhy = hzay - 110; var hzix = hzax - 2; var hziy = hzay - 50; var hzjx = hzax - 10; var hzjy = hzay - 30; var hzkx = hzax - 50; va
21、r hzky = hzay - 100; this.createEmptyMovieClip(hz,30); hz.beginFill(0 x4d2b2b,100); hz.moveTo(hzax,hzay); hz.curveTo(hzbx,hzby,hzcx,hzcy); hz.curveTo(hzdx,hzdy,hzex,hzey); hz.lineTo(hzax,hzay); hz.endFill(); hz.lineStyle(3,0 x4d2b2b,100); hz.moveTo(hzfx,hzfy); hz.curveTo(hzhx,hzhy,hzgx,hzgy); hz.mov
22、eTo(hzix,hziy); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 11 页 - - - - - - - - - hz.curveTo(hzjx,hzjy,hzkx,hzky);next 下面画花，画一个瓣花图形，位置在那都行，因为随后我们会移动它。按下图确定各点坐标：这里要介绍一个渐变填充，因花瓣我们要用放射填充。beginGradientFill(fillType, colors, alphas, ratios, matrix)：这个命令会产生一个渐变填充
23、，括号中的参数为：第个是填充类形，就是线性还是放射类，线性为：LINEAR,放射类 为 RADIAL 。第个是一个数组，里面是要用到的颜色。数组是一些数据的组合，还记得我们在第一个练习中提到的变量吗？在内存中分了很多房间来存放变量，房间中只能有一个数据，记得在那里我举例说，房间中原来是，现在来了，一脚将踢了出去，因为房间中只能住一个数据。现在是文明社会，不兴这样干。 于是来了， 跟签了合租协议，于是和都住进了这个房间，房间中就不止一个数据了，这时我们将这个房间叫数组。数组的声明是这样的：var 数组名称 :Array = 数组成员，数组成员，。比如本例中我们要用到的颜色数组：我们在用到的放射填
24、充要用到两种颜色：var colors:Array = 0 xfc3f3f, 0 xfdd2ce;第个参数也是一个数组，它里面装的是颜色数组中各个颜色的透明度。第个参数还是一个数组，它理面装的是颜色组数中各个颜色的比率。第个参数是一个矩阵，用规定渐变填充的一些设置。不用怕， 很简单。 要使用矩阵， 必须引入 geom类，这个我们已经在代码的第一行进行了。然后，需要声明一个矩阵如：matrix = new Matrix()然后需要用createGradientBox方法来创建矩阵，格式为：矩阵名称。 createGradientBox（填充宽度，填充高度，填充的旋转（弧度），填充中心点x 值，填
25、充中心点 y 值）。是不是很简单呢？如果你看别的书，对括号中的参数他们不是这样解释的，我这样解释是来自于实践，也能让大家一看就明白。说实话，为这个渐变我搞了一晚上，头都痛了，始终无法实现渐变填充，都是纯色。最后终于总结出矩阵中最后两个参数是填充中心点坐标，为我鼓掌吧。书上为什么就不说明白呢？他们把它叫做：水平移动，垂直移动。next 好了，现在可以画花了：var fillType:String = radial; var colors:Array = 0 xfc3f3f, 0 xfdd2ce; var alphas:Array = 100, 100; var ratios:Array = 0,
26、 255; var thax = px +10; var thay = py - 5 ; var thbx = px; var thby = py - 10; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 11 页 - - - - - - - - - var thcx = px - 5; var thcy = py-20; var thdx = px -10; var thdy = py -10; var thex = px - 20; var they = py -
27、5; var thfx = px - 15; var thfy = py; var thgx = thfx -5; var thgy = thfy +5; var thhx = thfx+5; var thhy = thfy+5; var thix = px+5; var thiy = py+10; matrix = new Matrix(); matrix.createGradientBox(50,50,Math.PI, thax-55,thay-25); this.createEmptyMovieClip(th,41); th.beginGradientFill(fillType, col
28、ors, alphas, ratios, matrix); th.moveTo(px,py); th.curveTo(thax,thay,thbx,thby); th.curveTo(thcx,thcy,thdx,thdy); th.curveTo(thex,they,thfx,thfy); th.curveTo(thgx,thgy,thhx,thhy); th.curveTo(thix,thiy,px,py); th.endFill(); 花画好了，现在就要将它移到花枝上，先将注册点改到花的的中心，然后中，设置花的x,y 值，将花移到花枝上。再执行几次复制，复制若干朵花，分别移动花枝的相应位
29、置。DynamicRegistration.initialize(th); th.setRegistration(thax-10, thay ); th._x2 = hzax + 50 ; th._y2= hzay - 130 ; th.duplicateMovieClip(th1,40); DynamicRegistration.initialize(th1); th1.setRegistration(thax-10, thay ); th1._x2 = hzax + 40 ; th1._y2= hzay - 140 ; th.duplicateMovieClip(th2,42); Dyna
30、micRegistration.initialize(th2); th2.setRegistration(thax-10, thay ); th2._x2 = hzax + 35 ; th2._y2= hzay - 120 ; th.duplicateMovieClip(th3,43); DynamicRegistration.initialize(th3); th3.setRegistration(thax-10, thay ); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9
31、 页，共 11 页 - - - - - - - - - th3._x2 = hzkx ; th3._y2= hzky ; th.duplicateMovieClip(th4,44); DynamicRegistration.initialize(th4); th4.setRegistration(thax-10, thay ); th4._x2 = hzkx+10 ; th4._y2= hzky+5 ; th.duplicateMovieClip(th5,45); DynamicRegistration.initialize(th5); th5.setRegistration(thax-10,
32、 thay ); th5._x2 = hzcx-3 ; th5._y2= hzcy+10 ; th.duplicateMovieClip(th6,46); DynamicRegistration.initialize(th6); th6.setRegistration(thax-10, thay ); th6._x2 = hzcx ; th6._y2= hzcy + 20; th.duplicateMovieClip(th7,47); DynamicRegistration.initialize(th7); th7.setRegistration(thax-10, thay ); th7._x
33、2 = hzcx-20 ; th7._y2= hzcy+30 ; 现在测试效果应该是这样的：扇面右边还有点空，弄首诗吧。这个动态创建的文本框，我还真拿它没办法，竖排没法实现，一设置旋转，人家来脾气，不见了，所认只好这样了。当然，如果你知道怎样解决，希望能在后面跟帖讲解一下，我将不胜感激，给你加分分。最后的诗这样实现：this.createTextField(stext,51,px+80,py-70,120,100); var stxt:TextFormat = new TextFormat();/声明了一个文本框格式stxt.size = 18;/设置文字大小stxt.bold = true;
34、/设置字体为粗stext.text =团扇薄不摇，窈窕摇蒲葵。相怜中道罢，定是阿谁非。 stext.setTextFormat(stxt);/将文本框格式运用于文本框stext.wordWrap = true;/设置文本框可以自动换行。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 11 页 - - - - - - - - - 这句：createTextField(stext,51,px+80,py-70,120,100);创建一个文本框，括号中的参数分别是：第个参数：文本框的名称。第个参数：深度；第、个参数：文本的 x、y 坐标，第、个参数：文本的宽高。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 11 页 - - - - - - - - -