当前页面位置: » 丰搜网 » 文档中心 » 详细内容
flash dynamic mask 动态遮罩
本文译者: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.l.neto
movieclip.moveto
在实际的应用中我们可能不会全都用上,如下面的例子中我们会应用到beginfill,l.neto,moveto,endfill等.
下面我们就开始学习,先看一个简单的例子.
我们要在屏幕上绘制一个遮罩,并用它的来做遮罩,为了实现上面的效果,我们需要在场景中导入一个图片,并将其转换为影片剪辑,命名为maskee.然后我们在主帧上加入如下代码:
代码:
this.createemptymovieclip('square',0);
with(_root.square)
{
moveto(0,0);
beginfill(0x000088)
l.neto(100,0);
l.neto(100,100);
l.neto(0,100);
endfill();
}
上面的代码我们已经完成了方形的绘制,现在你可以测试你的影片,同时你可能注意到这里使用了with,目的是使我们的代码看起来更清晰,当然你也可选择其它的方法,如下,你可进行一下对比,你会认为哪一种更清晰,更易读一些.
代码:
this.createemptymovieclip('square',0);
_root.square.moveto(0,0);
_root.square.beginfill(0x000088)
_root.square.l.neto(100,0);
_root.square.l.neto(100,100);
_root.square.l.neto(0,100);
_root.square.endfill();
上面的代码我们只是绘制了方形,现在你就可以测试你的影片,如果想把我们绘制的形体指定为遮罩只需要在下面加上一行代码：
代码:
_root.maskee.setmask(_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)
l.neto(x+50,y-50);
l.neto(x+50,y+50);
l.neto(x-50,y+50);
endfill();
}
}
this.setmask (_root.square)
}
onclipevent(mousemove)
{
drawsquare();
updateafterevent();
}
测试你的影片，你会发现一个100*100的方形在随着光标移动并可为一个遮罩，与上个例了不同的是我们将绘制方形的代码定义为一个函数drawsquare();因为我们要在光标移动的时不断的调用它。另外上面用到了clear()方法，它的作用是清除square剪辑之前的所有动作。
观看演示1
刚才我们提到一个问题就clear()方法的应用,试想一下如果我们不加clear()这一行代码。你可以想象一下会发生什么。现在我们将clear()这一行删除或是加上注释.测试你的影片，你就会看到一种擦除效果，你还可以加上你自已的创意，变成任意的形状。
观看演示2
影片2：像素淡出遮罩效果
这种效果你可能会在powerpoint或是在director中见过，在本例中不需要你理解每一行的意义，这里只是对淡入遮罩的一个提示。我们仍使用上文中的例子，清除原有maskee上的代码，加入如下代码：
代码:
onclipevent(load)
{
numy = 30;
numx = 40;
numperframe = 12;
currsquare = 0;
choices = new array();
for(i = 0; i < numx*numy; i++)
{
choices.push(i);
}
_root.createemptymovieclip("mask", 0);
this.setmask(_root.mask);
function drawsquare(x,y)
{
with(_root.mask)
{
moveto(x,y);
beginfill(0x000088)
l.neto(x+10,y);
l.neto(x+10,y+10);
l.neto(x,y+10);
endfill();
}
}
}
onclipevent(enterframe)
{
if(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。最后的样子大致为：
screen.width-300)this.width=screen.width-300" border=0>
首先，你必须下面的这张图片的三角函数。
screen.width-300)this.width=screen.width-300" border=0>
在上面图的坐标分别为：
代码:
x1 = r*sin(o)
x2 = r*sin(o+do)
y1 = r*cos(o)
y2 = r*cos(o+do)
原理就是绘制出圆的1/100也就是3.6度，也就是说我们需要绘一个三角形，然后不断的绘制，直到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);
l.neto(x1,y1);
l.neto(x2,y2);
endfill();
}
}
_root.createemptymovieclip("mask",0);
this.setmask(_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
出处：webstudio
责任编辑：蓝色
上一页 下一页 动态遮罩高级教程
◎进入论坛flash专栏版块参加讨论
| | | 保持清晰的文档结构 | | | 月亮图腾教程ⅴ—最后一战 | | | x-sapce使用系列教程 | | | x-space安装系列教程 | | | 抽线以及虚线画法简明教程 | | | 创新设计 百万格子大楼 | | | discuz!转换系列教程 | | | 世界杯足球的32个变种 | | | 易上手简单图层样式扣图 | | | 一封写给mm学习linux的信 | | |
| | | 保持清晰的文档结构 | | | 月亮图腾教程ⅴ—最后一战 | | | x-sapce使用系列教程 | | | x-space安装系列教程 | | | 抽线以及虚线画法简明教程 | | | discuz!转换系列教程 | | | 易上手简单图层样式扣图 | | | 十分钟学会 xajax | | | css 菜单举一反三 | | | 利用照片制作版画简明教程 | | |
| | >> 分页 首页 前页 后页 尾页 页次：1/2页 1个记录/页 转到 页 共2个记录 蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。 特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 | | 本文总共有 6 条评论，现在显示最新的 5 条。评分：- llllllllllllllllllll + 评分人数: 2 ,平均分: 4.00
janly publish at 2005-12-16 13:15:13 评分5
老大你讲得非常清楚，非常感谢。
xiangzi920 publish at 2005-11-24 13:18:43 评分3
很好。
cyhyan publish at 2005-7-9 9:01:29
我下了前三个看得到
后面两个输出一大堆数字
没有你的那个效果
能告诉我是什么原因吗
huanglongcn publish at 2005-6-29 17:22:39
很棒
shunshun publish at 2005-6-10 11:18:59
我也要。。。
查看全部评论 | | |
| 关于站点 免责声明 联系站长 版权隐私 友情链接 网站地图 京icp备05002321号 | ©1999-2006 blueidea.com. 版权所有 | |
