Flash 动态遮罩效果详解

核心提示： 你可能会对Robert Penner's transition classes感兴趣，原理都是一样的，Flash 动态遮罩效果详解(8)，将代码合在一起代码://全局变量决定于你的影片宽度mWidth = 400;//创建影片剪辑和遮罩counter = -1;createMovi

你可能会对Robert Penner's transition classes感兴趣。原理都是一样的。

将代码合在一起

代码:

　　//全局变量决定于你的影片宽度
　　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的值改为其它的公式就可以。

观看演示2 查看效果

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

源文件下载：dymask2.zip