本文译者:egoldy

　　文章出处: http://www.5etdemi.com

　　文章性质:翻译

　　FLASH DRAWING API除了可以让我们绘制图形外,我们还可以应用它绘制遮罩,而这种绘制遮罩特点就是我们可以动态绘制.

　　怎样使用FLASH DRAWING API 绘制遮罩

　　MM提供遮罩有如下这几种:

　　代码:

　　MovieClip.beginFill
　　MovieClip.beginGradientFill
　　MovieClip.clear
　　MovieClip.curveTo
　　MovieClip.endFill
　　MovieClip.lineStyle
　　MovieClip.lineTo
　　MovieClip.moveTo　　在实际应用中我们可能不会全都用上,如下面例子中我们会应用到beginfill,lineto,moveto,endfill等.

　　下面我们就开始学习,先看个简单例子.

　　我们要在屏幕上绘制个遮罩,并用它来做遮罩,为了实现上面效果,我们需要在场景中导入个图片,并将其转换为影片剪辑,命名为maskee.然后我们在主帧上加入如下代码:

　　代码:

　　this.createEmptyMovieClip('square',0);
　　with(_root.square)
　　{
　　moveTo(0,0);
　　beginFill(0x000088)
　　lineTo(100,0);
　　lineTo(100,100);
　　lineTo(0,100);
　　endFill;
　　}　　上面代码我们已经完成了方形绘制,现在你可以测试你影片,同时你可能注意到这里使用了with,目是使我们代码看起来更清晰,当然你也可选择其它思路方法,如下,你可进行下对比,你会认为哪种更清晰,更易读些.

　　代码:

　　this.createEmptyMovieClip('square',0);
　　_root.square.moveTo(0,0);
　　_root.square.beginFill(0x000088)
　　_root.square.lineTo(100,0);
　　_root.square.lineTo(100,100);
　　_root.square.lineTo(0,100);
　　_root.square.endFill;　　上面代码我们只是绘制了方形,现在你就可以测试你影片,如果想把我们绘制形体指定为遮罩只需要在下面加上行代码:

　　代码:

　　_root.maskee.Mask(_root.square);　　这行代码意义在于将我们绘制方形指定为maskee遮罩,同时我们在上面应用了clear思路方法,它作用是清除square的前动作

　　测试你影片

　　接下来我们来看几个例子:

　　影片1:可拖动遮罩

　　根据上面我做基础仍然使用上面maskee影片剪辑将主帧上代码清除我们将下面代码加在maskee影片剪辑上而不影片剪辑帧上

　　代码:

　　onClipEvent(load)
　　{
　　_root.createEmptyMovieClip('square',0);
　　function drawSquare
　　{
　　x = _root._xmouse;
　　y = _root._ymouse;
　　with(_root.square)
　　{
　　clear;
　　moveTo(x-50,y-50);
　　beginFill(0x000088)
　　lineTo(x+50,y-50);
　　lineTo(x+50,y+50);
　　lineTo(x-50,y+50);
　　endFill;
　　}
　　}
　　this.Mask (_root.square)
　　}
　　onClipEvent(mouseMove)
　　{
　　drawSquare;
　　updateAfterEvent;
　　}　　测试你影片你会发现个100*100方形在随着光标移动并可为个遮罩和上个例了区别是我们将绘制方形代码定义为个drawSquare;我们要在光标移动时不断它另外上面用到了clear思路方法它作用是清除square剪辑的前所有动作

　　观看演示1 查看效果

　　刚才我们提到个问题就clear思路方法应用,试想下如果我们不加clear这行代码你可以想象下会发生什么现在我们将clear这行删除或是加上注释.测试你影片你就会看到种擦除效果你还可以加上你自已创意变成任意形状

　　观看演示2 查看效果

　　影片2:像素淡出遮罩效果

　　这种效果你可能会在powerpo或是在director中见过在本例中不需要你理解每行意义这里只是对淡入遮罩个提示我们仍使用上文中例子清除原有maskee上代码加入如下代码:

　　代码:

　　onClipEvent(load)
　　{
　　numY = 30;
　　numX = 40;
　　numPerFrame = 12;
　　currSquare = 0;
　　choices = Array;
　　for(i = 0; i < numX*numY; i)
　　{
　　choices.push(i);
　　}
　　_root.createEmptyMovieClip("mask", 0);
　　this.Mask(_root.mask);
　　function drawSquare(x,y)
　　{
　　with(_root.mask)
　　{
　　moveTo(x,y);
　　beginFill(0x000088)
　　lineTo(x+10,y);
　　lineTo(x+10,y+10);
　　lineTo(x,y+10);
　　endFill;
　　}
　　}
　　}
　　onClipEvent(enterFrame)
　　{
　　(currSquare < numX*numY)
　　{
　　for(i = 0; i < numPerFrame; i)
　　{
　　j = random(choices.length);
　　t = choices[j];
　　choices[j] = choices[choices.length - 1];
　　choices.pop;
　　x = t % numX;
　　y = Math.floor( t / numX );
　　drawSquare(x*10, y*10);
　　}
　　currSquare numPerFrame;
　　this._alpha = currSquare/(numX*numY)*100;
　　}　　测试你影片你会发现随机出10*10像素方形会不断出现在屏幕上同时图片淡出

　　观看演示3 查看效果

　　影片3:扇形LOADING

　　接下我们要使用动态遮罩制作个扇面LODING最后样子大致为:

　　

　　首先你必须下面这张图片 3角

　　

　　在上面图坐标分别为:

　　代码:

　　x1 = r*sin(O)
　　x2 = r*sin(O+dO)
　　y1 = r*cos(O)
　　y2 = r*cos(O+dO)　　原理就是绘制出圆1/100也就是3.6度也就是说我们需要绘个 3角形然后不断绘制直到100.

　　你需要先在场景中创建圆形转换为影片剪辑同时要注意问题是你必须在这个影片剪辑内部将其中心对齐这点是很重要

　　选择圆形剪辑加入如下代码:

　　代码:

　　onClipEvent(load)
　　{
　　_root.stop;
　　dO = 3.6;
　　r = 75;
　　function addSlice(O)
　　{
　　x1 = r*Math.sin(O*Math.PI/180);
　　x2 = r*Math.sin((O+dO)*Math.PI/180);
　　y1 = r*Math.cos((O)*Math.PI/180);
　　y2 = r*Math.cos((O+dO)*Math.PI/180);
　　trace(x1 + ":" + y1);
　　with(_root.mask)
　　{
　　moveTo(0,0);
　　beginFill(0x000088);
　　lineTo(x1,y1);
　　lineTo(x2,y2);
　　endFill;
　　}
　　}
　　_root.createEmptyMovieClip("mask",0);
　　this.Mask(_root.mask);
　　_root.mask._yscale = -100;
　　_root.mask._x = this._x;
　　_root.mask._y = this._y;
　　oldLoaded = 0;
　　}
　　onClipEvent(enterFrame)
　　{
　　loaded = Math.ceil(_root.getBytesLoaded/_root.getBytesTotal*100);
　　for(i = oldLoaded; i < loaded; i)
　　{
　　addSlice(dO*i);
　　}
　　oldLoaded = loaded;
　　}　　在上面代码中_root.mask._yscale=-100是用来按制方向正向还是反向同时我们注意到有两个变量oldloaded和loaded.的所以有oldloade是为了存放我们的前下载数值

　　好现在可以测试你影片了为了看到效果你可以边续按两次回车

　　观看演示4 查看效果

　　附源文件:dymask1.zip　pieloader.rar

　　在上篇教程中我有意避开curveTo它相对于lineTo来说多少有些复杂然后这种效果我认为变化多会优于味使用lineTo.

　　首先我们需要先了解下curveTo相关命令:

　　CURVETO命令:

　　在下面例子中我们要用到命令如下:

　　代码:

　　MovieClip.beginFill
　　MovieClip.endFill
　　MovieClip.lineTo
　　MovieClip.curveTo　　前面 3行我们已在第篇教程学习过现在只剩下curveTocurveTo(controlX,controlY,endX,endY)将从startX,startY开始绘制条 2次方曲线至endX,endY, startX,startY位置决定于使用moveTo,lineTo,或curveTo得到最后点controlX,controlY 控制着两点的间曲度你可以把controlX,controlY认为是个磁性点它会吸附曲线靠近它它工作过程有些象BEZIER贝赛尔曲线区别是每条曲线只有只能有个控制点

　　现在需要看下我们动态遮罩工作过程它要经过 3个边续过程如下图所示:

　　

　　如上图你所看到遮罩组成是由最初上面条直线然后变形成为4边形状也就是面蓝色线条将屏幕划分为4边然后再变形为红色线条最后形成整个矩形十字代表是控制点大致位置

　　在这里面你需要注要注意是第条和最后条并不是曲线而是直线所以你可将你按制点放在任何地方这也给我们增加了许多弹性空间在后面你将会看到

　　变形形体

　　我们必须要掌握将个形体变为另个形体比如蓝色形状变为红色形状这个看起来比较麻烦实际上很简单就象个物体从A点移到B点是个性质我们将移到第条曲线 3个点至第 2条曲线 3个点位置下面我们来看下例子将曲线c变形为曲线J

　　代码:

　　//Create movie clip and mask
　　//counter = -1;
　　//创建遮罩
　　_root.createEmptyMovieClip('line', 0);
　　animInt = Interval(doAnim, 17);
　　animDir = 1;//用来控制方向变量
　　//定义
　　function doAnim
　　{
　　var currMC = _root.line;
　　var time = animIndex/60;
　　var dist = time;
　　with(currMC)
　　{
　　//c曲线位置: (150, 25), (25,100), (150,175)
　　//j曲给位置: (150, 25), (125,200), (50,125)
　　clear;
　　lineStyle(0x000000);
　　moveTo(150,25);
　　curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);
　　}
　　animIndex animDir;
　　(animIndex >= 60)
　　{
　　animDir = -1
　　}
　　(animIndex <= 0)
　　{
　　animDir = 1
　　}
　　}　　这段代码中是将c曲(15025)(25200)(150175)变形为J曲线(150, 25), (125,200), (50,125)

　　注意这段代码只能在FLASHMX中运行如果想在FLASHMX2004中运行你需要在定义下animIndex在animDir=1；下面加入行var animIndex=0;测试你影片观看结果

　　观看演示1 查看效果

　　开始时创建个影片剪加line,在line内部绘制变形曲线Interval每17豪秒循环绘制次变量animIndex用来跟踪曲线绘制到位置这个例子中我们分成了60步来绘制time变量范围是从0到1决定于animIndex,同时将其附给dist用来创建现线动画

　　即然dist变量范围是从0到1那么很明显我们用到了个公式从A点到B点

　　代码:

　　x = startX + dist*deltaX;
　　y = startY + dist*deltaY;　　如下我们应用:

　　curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);　　在这个公式中startX和startY是开始点坐标deltaX和deltaY分别是x和y到开始点和结束点距离

　　Easing, bouncing and other transitions　　缓动弹性和其它运动方式

　　可能在开始你就会想我们为什么会不厌其烦使用变量time和dist那么现在让我们来看下他们的间关系你就会知道我们为什么要用它

　　如上果你所看到竖轴代表Dist,水平轴代表time.他们的间关系目前是线性也是就dist=time.图上斜线代表动画速度在这个例子中动画速度是恒定现在假如我们想做成开始时速度很快到结速时无速度则我们只需要在在t=0时加大红线斜率而在t=1时使红线无斜率就可以了这实际上就是倒转过抛物线或是 3角正弦如果想用其它运动方式我们可以创建区别dist和time关系来得到更有趣效果下面是些创建好关系可能对你会有用处:

　　

　　

　　

　　你可能会对Robert Penner's transition es感兴趣原理都是样

　　将代码合在起

　　代码:

　　//全局变量决定于你影片宽度
　　mWidth = 400;
　　//创建影片剪辑和遮罩
　　counter = -1;
　　createMovieClip;
　　animInt = Interval(doAnim, 17);
　　function createMovieClip
　　{
　　counter;
　　attachMovie('pic' add (counter % 2), 'pic' add counter, counter);
　　createEmptyMovieClip('mask' add counter, counter + 10000);
　　this['pic' add counter].Mask(this['mask' add counter]);
　　}
　　function doAnim
　　{
　　var currMC = _root['mask' add counter];
　　(animIndex < 15)
　　{
　　var time = animIndex/15;
　　var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
　　with(currMC)
　　{
　　clear;
　　beginFill(0x000000);
　　lineTo(mWidth,0);
　　lineTo(mWidth,dist*125);
　　curveTo(250,dist*40,0,10*dist);
　　endFill;
　　}
　　}
　　 (animIndex < 35)
　　{
　　var time = (animIndex-15)/20;
　　var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
　　with(currMC)
　　{
　　clear;
　　beginFill(0x000000);
　　lineTo(mWidth,0);
　　lineTo(mWidth,125);
　　curveTo(250-100*dist,40+150*dist,0,10+190*dist);
　　endFill;
　　}
　　}
　　 (animIndex <= 50)
　　{
　　var time = (animIndex-35)/15;
　　var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
　　with(currMC)
　　{
　　clear;
　　beginFill(0x000000);
　　lineTo(mWidth,0);
　　lineTo(mWidth,125+75*dist);
　　curveTo(150,190+10*dist,0,200);
　　endFill;
　　}
　　}
　　animIndex;
　　(animIndex > 50)
　　{
　　animIndex = 0;
　　_root['pic' add (counter - 1)].removeMovieClip;
　　_root['mask' add (counter - 1)].removeMovieClip;
　　createMovieClip;
　　}
　　}　　这段代码使用了两个createmovieclip用来将图片贴加到场景中并设置MASKcunter用来跟踪图片例子名称



　　Doanim被每20豪秒次整个遮罩形成过程和范例上个例子样分成 3部执行对于缓动方式你可选择其它方式只需要将DIST值改为其它公式就可以

　　观看演示2 查看效果

　　整理总结:在这两篇教程中我们先后学习了基本动态遮罩和动态绘制曲线来形成遮罩两者基本原理相同尤其你应注意是如何加入easing,bouncing等等我想这对你可能是有用

　　源文件下载:dymask2.zip