文档章节

flash 遮罩层全解

 大东家
发布于 2015/01/13 10:29
字数 2554
阅读 13
收藏 0

初学者关于遮罩的话题问的较多,下面我将遮罩的一些常见问题进行一下归纳。
1、请问遮罩的原理是什么?
[效果]
 1.swf (3.97 KB)
遮罩层好比黑夜中的一支手电筒,照在哪儿(指被遮罩层)哪儿就显现。
第一步:创建两个图层,命名,一个是遮罩层,一个是被遮罩层;
第二步:在被遮罩层图层输入文字“闪吧,我的最爱”;
第三步:在遮罩层随便画一个形状,例如一个圆;
第四步:此步最关键。点击遮罩层图层,右键选择“遮罩层”,如图1(1)
 
2、我想让遮罩层运动起来,就象探照灯一样的效果,应如何做?
[效果]
 2.swf (4.08 KB)
第一步:把上面的圆转换为图形元件;

第二步:在第15帧处插入关键帧,选中元件,把它放在场景的最右端,在两帧之间右键选择“创建补间动画”,选中第1帧,右键选择“复制帧”,在第30帧处粘贴帧,在第15帧和第30帧处右键选择“创建补间动画”;
第三步:把被遮罩层的帧延长到第30处;
[源文件]
 2.fla (22.5 KB)

3、我想让遮罩层随鼠标移动而移动应怎样做?
[效果]
 3.swf (4.11 KB)
第一步:选中问题1的遮罩层,右键选择“遮罩层”,去掉前面的勾,此时取消了遮罩;选中圆,右键选择“转换为元件”,在弹出的对话框中选择“影片剪辑”,在主场景中给它个实例名mask_mc。
第二步:选中被遮罩层上的文字,同样转换为影片剪辑元件,实例名为_mc
第三步:新建图层,名为“动作”,选中第一帧,写如下代码:
_mc.setMask(mask_mc);//设置_mc被mask_mc遮罩
mask_mc.onEnterFrame = function() {
//mask_mc在运行每一帧时执行函数
this._x = _xmouse;
this._y = _ymouse;
//mask_mc的坐标等于鼠标的坐标
};
[源文件]
 3.fla (24 KB)

4、我想让遮罩层随鼠标移动有缓冲的效果应如何做?
[效果]
 4.swf (4.14 KB)
把问题3的第三步代码改为
_mc.setMask(mask_mc);
var speed:Number = 5;//申明变量
mask_mc.onEnterFrame = function() {
this._x += (_xmouse-this._x)/speed;//让遮罩层缓冲运动
this._y += (_ymouse-this._y)/speed;
};
[源文件]
 4.fla (24 KB)

5、某对象的边框一闪而过的效果怎么做?
[效果1]
 5(1).swf (33.09 KB)
[效果2]
 5(2).swf (2.55 KB)
下面以效果2为例详解其制作过程
第一步:创建三个图层,从上到下名称分别为“边框”、“矩形”、“文字”。
第二步:在“文字”图层上输入文字:“闪吧”,延长帧到第40帧处。
第三步:选中“文字”图层的第一帧复制帧,粘贴帧到“边框”图层的第一帧上;将文字按住Ctrl+B,连按两次把文字打散;选中右侧“工具”栏中的“墨水瓶工具”,在打散的文字边上点击进行描边;在该帧上用鼠标进行点击(即全选该帧上的所有对象),然后把鼠标移到右侧“工具”栏中的“填充色”上点击,再把鼠标移到弹出对话框中的右上角,将填充色设置为无;选中刚才描出的边线,在属性中将其笔触高度设置为1.5。具体设置和效果见图1:

 
第四步:选中“边线”,选择“修改”→“形状”→“将线条转换为填充”;把帧延长到第40帧处。(此步是关键,不能用线条作遮罩层,应转换为填充)具体设置见图2:
 
第五步:创建图形元件,在该元件编辑场景中画一个矩形,从上到下进行线形渐变,具体设置见图3;把该元件从库中拉入到主场景中“矩形”图层上的第一帧上,其位置在文字的上方;在第40帧处插入关键帧,把该元件的位置移到文字的下方;在第1帧和第40帧处右键选择“创建补间动画”。
 
第六步:选中“边框”图层,右键选择“遮罩层”。
[源文件]
 5(2).fla (49 KB)

6、如何做出渐变、半透明、羽化遮罩效果?
[渐变效果]
 6(1).swf (3.99 KB)
第一步:创建两个图层,从上到下名称分别是“遮罩”、“渐变”。
第二步:在“遮罩”图层中输入文字“闪吧,我的最爱!”。
第三步:在“渐变”图层中画一个矩形,填充渐变色。
第四步:选中“遮罩”图层,右键选择“遮罩层”。
[源文件]
 6(1).fla (48 KB)
[羽化效果]
 6(2).swf (91.55 KB)
第一步:创建两个图层,从上到下名称分别是“遮罩”、“图片”。
第二步:在“图片”图层上导入一张图,并转换为影片剪辑元件,实例名为tp_mc,延长帧到第40帧;在其属性面板中勾选“使用运行时位图缓存”。
第三步:在“遮罩”图层上画一个小圆,转换为影片剪辑元件,实例名为mask_mc;选择属性面板中的“滤镜”里的“模糊”,输入模糊值均为100;在第40帧处插入关键帧,把圆放大;创建补间动画。
第四步:在“动作”图层的第一帧上写代码:
tp_mc.setMask(mask_mc)
[源文件]
 6(2).fla (137.5 KB)
半透明遮罩:把你半透明的遮罩层复制到上层即可

7、我用静态文字作遮罩层或作为被遮罩时怎么没有效果?
方法①将文字连按两次Ctrl+B,把文字打散。
方法②更改该文字的属性,不采用“使用设备字体”。
方法③把文字转换为影片元件,实例名为wz_mc;把遮罩转换为影片元件,实例名为mask_mc;在帧上写代码wz_mc.setMask(mask_mc)

8、动态文本设置被遮罩怎么没有效果?
方法①把动态文本转换为影片元件,实例名为wz_mc,创建遮罩影片元件,实例名为mask_mc;然后在帧上写代码:wz_mc.setMask(mask_mc)
方法②选择嵌入,在弹出的对话框中出现的“包含这些字符”里输入动态文本中要显示的文字。(但这种方法会使文件体积变大)
[效果]
 8.swf (686 Bytes)

9、怎样让遮罩层沿着引导层上的任意路径运动?
[效果]
 9.swf (91.17 KB)
[要点]
把遮罩先做成沿引导层上路径运动的影片剪辑,再把该影片剪辑设为遮罩层
[步骤]
第一步:创建图形元件,名称为“圆”,画一个圆。
第二步:创建影片剪辑元件,名称为“运动的圆”,把图形元件“圆”拖入;让圆沿引导层上的曲线运动起来。如图9:
 
第三步:在主场景中创建两个图层,从上到下名称分别为“遮罩”、“背景”;把“运动的圆”拖入到主场景中的“遮罩”图层上;在“背景”图层上导入一张图片;选中“遮罩”图层,右键选择“遮罩层”。

10、一般右键选择设置“遮罩层”时只能遮罩一个图层,那多个图层怎么做?
方法①把没有被遮罩的图层拖入到已经被遮罩和遮罩层之间,再调整图层顺序。
方法②用鼠标按住没有被遮罩的图层不放,然后往上推,当出现灰色的虚线时释放鼠标即可。如图10:
 
11、空心圆做遮罩怎么中间的空白处也作了遮罩?
[效果]
 11.swf (90.98 KB)
[方法]把空心圆不能做成影片剪辑元件,但可以是图形元件。

12、我想鼠标点击时遮罩层出现并拖动,再次点击时消失怎么做?
[效果]
 12.swf (58.13 KB)
在第6问的第四步代码中作如下改动
Mouse.hide();
dt_mc.duplicateMovieClip("fdt_mc", 1);
fdt_mc._xscale = fdt_mc._yscale=150;
fdt_mc.setMask(mask_mc);
fdt_mc.swapDepths(fdj_mc);
mask_mc._visible = fdj_mc._visible=fdt_mc._visible=0;
mask_mc.onEnterFrame = function() {
fdt_mc._x = -this._x*0.5;
fdt_mc._y = -this._y*0.5;
fdj_mc._x = this._x += (_xmouse-this._x)/4;
fdj_mc._y = this._y += (_ymouse-this._y)/4;
updateAfterEvent();
};
onMouseDown = function () {
this.id = !this.id;
if (this.id) {
   mask_mc._visible = fdj_mc._visible=fdt_mc._visible=1;
}
if (!this.id) {
   mask_mc._visible = fdj_mc._visible=fdt_mc._visible=0;
}
};

13、导入外部的影片(如文件名1.swf)或图片(如文件名1.jpg),怎样设置遮罩?
第一步:创建影片剪辑元件,画一个你要的遮罩形状;把该元件拖入到主场景中,实例名取mask_mc。
第二步:在帧上写代码:
var my_mcl:MovieClip = createEmptyMovieClip("my_mcl", getNextHighestDepth());
var mcloader:MovieClipLoader = new MovieClipLoader();
mcloader.addListener(this);
mcloader.loadClip("1.jpg", my_mcl);
mask_mc._visible = 0;
this.setMask(mask_mc);
第三步:保存,并在该文件所在的文件夹内放一张图片,名称为1.jpg
如果导入的是外部影片,则把"1.jpg"改为"1.swf",当然,外部影片的名称为1.swf

14、放大镜是如何应用遮罩的?
[效果]
 放大镜.swf (57.85 KB)
第一步:创建四个图层,从上到下名称依次是“动作”、“放大镜”、“遮罩”、“底图”。
第二步:创建影片剪辑元件,名称为“底图”,导入一张图;把该元件拖入到主场景中的“底图”图层上,实例名为dt_mc。
第三步:创建影片剪辑元件,名称为“遮罩”,画一个圆,填充类型为放射状,中间透明,四周不透明;把该元件拖入到主场景中的“遮罩”图层上,实例名为mask_mc。再拖一个到“放大镜”图层上,实例名为fdj_mc。
第四步:在“动作”图层的第一帧上写如下代码:
Mouse.hide();//鼠标隐藏
var speed:Number = 4;//申明变量
dt_mc.duplicateMovieClip("fdt_mc", 0);//复制底图为放大图
fdt_mc._xscale = fdt_mc._yscale=150;//放大图放大
fdt_mc.setMask(mask_mc);//设置放大图被遮罩元件遮罩
fdt_mc.swapDepths(fdj_mc);//把放大镜放在最上层
mask_mc.onEnterFrame = function() {
fdt_mc._x = -this._x*0.5;//设置放大图的坐标随遮罩层的变化而变化
fdt_mc._y = -this._y*0.5;
fdj_mc._x = this._x += (_xmouse-this._x)/speed;//让遮罩层和放大镜坐标重合且缓冲运动
fdj_mc._y = this._y += (_ymouse-this._y)/speed;
updateAfterEvent();//更新舞台
};
[源文件]
 放大镜.fla (84 KB)

[后记]
遮罩无所不在,无奇不有,你还可以利用遮罩做出电影字幕、水波、万花筒、百叶窗等强视觉的作品出来。

 

© 著作权归作者所有

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
巧用CSS的 Mask 滤镜

作者:冯永曜 在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多。其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来...

晨曦之光
2012/03/09
156
0
VUX v2.1.1-rc.11 发布,基于 WeUI 的 Vue 移动端组件库

该版本主要为交互、动画优化。 demo 预览地址:https://vux.li/demos/v2/ Actionsheet [enhance] 更加流畅的遮罩层动画 Alert [enhance] 作为插件使用时,每次都重置属性值 Confirm [fix] 修...

airyland
2017/03/14
1K
1
jQuery实现带遮罩层的消息框滑入滑出效果

首先,使用一个遮罩层来遮住整个页面,在遮罩层上显示一个消息框,消息框还可以被关闭,最后使用jQuery使得消息框从页面顶部滑下,实现的效果如下: 遮罩层的样式如下: 样式说明了不论在哪种...

罗盛力
2012/02/17
1K
1
实现新手引导简单遮罩(无需shader)

效果如下: 大部分教程都有shader实现遮罩,shader可以控制更好效果的遮罩。unity自带的功能也能实现简单的新手引导遮罩,只是unity自带的遮罩会有锯齿。之后再更新加shader的版本。 以下是具...

lisa0626
2018/04/25
0
0
JS实现遮罩层

用JS实现一个常见的遮罩层,该遮罩层包含三部分(触发按钮,透明遮罩层,弹出对话层),并分解各部分(分为HTML,CSS,JavaScript),逐一讲解实现的机理。最终效果如下图: HTML结构 一个用来触...

MangoGan
2017/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部