Flash动态遮罩高级教程

　　首先我们需要先了解一下curveTo的相关命令：

　　CURVETO命令：

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

　　代码:

　　

---

　　MovieClip.beginFill()

　　MovieClip.endFill()

　　MovieClip.lineTo()

　　MovieClip.curveTo()

　　

---

　　前面三行我们已在第一篇教程学习过，现在只剩下curveTo，curveTo(controlX,controlY,endX,endY)将从startX,startY开始绘制一条二次方曲线至endX,endY, startX,startY的位置决定于使用moveTo,lineTo,或curveTo得到的最后一点，controlX,controlY 控制着两点之间的曲度，您能够把controlX,controlY认为是个磁性点，他会吸附曲线靠近他。他的工作过程有些象BEZIER贝赛尔曲线，不同的是每一条曲线只有只能有一个控制点。

　　现在需要看一下我们的动态遮罩的工作过程，他要经过三个边续的过程，如下图所示：

　　

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

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

　　变形形体

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

　　代码:

　　

---

　　//Create movie clip and mask

　　//counter = -1;

　　//创建遮罩

　　_root.createEmptyMovieClip('line', 0);

　　animInt = setInterval(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;

　　if(animIndex >= 60)

　　{

　　animDir = -1

　　}

　　if(animIndex <= 0)

　　{

　　animDir = 1

　　}

　　}

　　

---

　　这段代码中是将c曲（150，25）（25，200），（150，175）变形为J曲线(150, 25), (125,200), (50,125)

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

　　观看演示1

　　

　　开始时创建一个影片剪加line,在line的内部绘制变形曲线，setInterval每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到开始点和结束点的距离。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有