千禧鸟 2008-8-8 13:36
Flash动态遮罩高级教程（实用）
首先我们需要先了解一下curveTo的相关命令： [b]CURVETO命令：[/b]
在下面的例子中我们要用到的命令如下：
[b]代码:[/b]
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贝赛尔曲线，不同的是每一条曲线只有只能有一个控制点。
现在需要看一下我们的动态遮罩的工作过程，它要经过三个边续的过程，如下图所示：
[align=center][img]http://www.webjx.com/upfiles/20050309/20050309142735_1.gif[/img][/align]如上图你所看到，遮罩的组成是由最初上面的一条直线然后变形成为4边的形状也就是面的蓝色线条将屏幕划分为4边，然后再变形为红色的线条，最后形成整个矩形。十字代表的是控制点的大致位置。
在这里面你需要注要注意的是第一条和最后一条并不是曲线，而是直线，所以你可将你的按制点放在任何地方，这也给我们增加了许多弹性空间。在后面你将会看到。
[b]变形形体[/b]
我们必须要掌握将一个形体变为另一个形体，比如蓝色形状变为红色形状，这个看起来比较麻烦，实际上很简单，就象一个物体从A点移到B点是一个性质。我们将移到第一条曲线的三个点至第二条曲线三个点的位置，下面我们来看一下例子，将曲线c变形为曲线J。
[b]代码:[/b]
//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;测试你的影片，观看结果。
[b]观看演示1[/b]
[swf]http://www.blueidea.com/articleimg/2005/03/2441/dymask2001.swf[/swf]
开始时创建一个影片剪加line,在line的内部绘制变形曲线，setInterval每17豪秒循环绘制一次，变量animIndex用来跟踪曲线绘制到的位置，这个例子中我们分成了60步来绘制，time变量的范围是从0到1，决定于animIndex,同时将其附给dist，用来创建现线动画。
即然dist的变量范围是从0到1，那么很明显我们用到了一个公式从A点到B点
[b]代码:[/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
[b]缓动，弹性和其它运动方式[/b]
可能在一开始你就会想我们为什么会不厌其烦的使用变量time和dist，那么现在让我们来看一下他们之间的关系，你就会知道我们为什么要用它。
如上果你所看到的竖轴代表Dist,水平轴代表time.他们之间的关系目前是线性，也是就dist=time.图上的斜线代表动画的速度。在这个例子中动画的速度是恒定的。现在假如我们想做成开始时速度很快到结速时无速度，则我们只需要在在t=0时加大红线的斜率，而在t=1时使红线无斜率就可以了。这实际上就是倒转过的抛物线或是三角正弦，如果想用其它的运动方式我们可以创建不同的dist和time的关系，来得到更有趣的效果，下面是一些创建好的关系，可能对你会有用处：
[align=center][img]http://www.webjx.com/upfiles/20050309/20050309142808_2.gif[/img][img]http://www.webjx.com/upfiles/20050309/20050309142823_3.gif[/img][/align][align=center][img]http://www.webjx.com/upfiles/20050309/20050309142903_4.gif[/img][img]http://www.webjx.com/upfiles/20050309/20050309142919_5.gif[/img][/align][align=center][img]http://www.webjx.com/upfiles/20050309/20050309142935_6.gif[/img][/align]你可能会对Robert Penner's transition classes感兴趣。原理都是一样的。
[b]将代码合在一起[/b]
[b]代码:[/b]
//全局变量决定于你的影片宽度
mWidth = 400;
//创建影片剪辑和遮罩
counter = -1;
createMovieClip();
animInt = setInterval(doAnim, 17);
function createMovieClip()
{
counter++;
attachMovie('pic' add (counter % 2), 'pic' add counter, counter);
createEmptyMovieClip('mask' add counter, counter + 10000);
this['pic' add counter].setMask(this['mask' add counter]);
}
function doAnim()
{
var currMC = _root['mask' add counter];
if(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();
}
}
else if (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();
}
}
else if (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++;
if(animIndex > 50)
{
animIndex = 0;
_root['pic' add (counter - 1)].removeMovieClip();
_root['mask' add (counter - 1)].removeMovieClip();
createMovieClip();
}
}
这段代码使用了两个函数，createmovieclip用来将图片贴加到场景中并设置MASK，cunter用来跟踪图片的实例名称。
Doanim函数被每20豪秒调用一次，整个遮罩形成过程与范例上一个例子一样分成三部执行。对于缓动方式你可选择其它的方式，只需要将DIST的值改为其它的公式就可以。
[b]观看演示2[/b]
[swf]http://www.blueidea.com/articleimg/2005/03/2441/dymask2003.swf[/swf]
[[i] 本帖最后由 千禧鸟 于 2008-8-8 13:40 编辑 [/i]]
lipin712098 2008-8-10 07:58
好教程 谢谢楼主
strawberrysweet 2008-10-10 15:39
学习学习 谢谢楼主分享