当前位置:首页 > Flash闪客看点 > Flash教程 > flash遮罩特效的综合操练(入门级教程)

flash遮罩特效的综合操练(入门级教程)

2017-11-28来源:闪客帝国编辑:佚名标签:

文章导读
关于遮罩的教程很多了,这里结合作者的摸索过程及创意给大家尤其是初学者作一简单讲解。

 关于遮罩的教程很多了,这里结合我的摸索过程及创意给大家尤其是初学者作一简单讲解。 


一.原理部分--羽化的美眉效果 

flash的遮罩原理在于使用一个图形作为透过光线的区域,当这个图形所在层转为遮罩层时,图形区域下一层的物体可见,而图形区域外的物体不可见。但是再往下一层的物体仍然可见,也就是说,遮罩层只对它下面一层物体起作用。 
好,下面就步入正题,介绍一个羽化美眉效果,这在photoshop中是很容易实现的。 

1.从图片库中找个漂亮的美眉,导入到舞台上,放在合适的位置,给当前层起个名字,如下图:


2.新建一层,起名mask,在当前层上用圆形工具画一个树立着的椭圆,椭圆最好不要边框线,填充色任意,这个椭圆正好把美眉挡住,如下图:

3.将此椭圆选定,按下Ctrl+c, 再新建一层,起名white, 按下Ctrl+shift+v, 这是将椭圆复制到这一层上来,并且与原来椭圆位置相同。 
4.点选mask层,右击将其转为遮罩层,关闭white层就可看到美眉被切割出来的效果,如果位置不满意,解除锁定,重新修改椭圆的位置。 
5.重新点选white层,并选定层上椭圆来修改其填充属性,这里才是最费功夫的环节:打开混色器面板,在填充颜色方式中选放射状,将两个色标的颜色都变成白色,将左边的色标的不透明度改为0,右边的不变, 
两色标的位置如下图:

6.色标设定完后,应该是下图这个样子,

在物体的空白处单击一下,看看美眉是不是露出来了,美眉的周围是不是以白色淡出呢? 
7.用填充变形工具来反复调整渐变色的区域与大小,这要费点事,效果好不好关键在这里。 
8.最后的效果应该是象这样

二. 进阶部分--跟随鼠标的探照灯效果 

效果:

 

有了上面的技术,那么制作一个探照灯效果就只剩下创意和代码编写工作了。具体的制作过程我就不在浪费时间了,估计大家看到我下面的解释及源文件就能理解并自己能作了。 
既然是探照灯效果就应该是黑色背景了,那么为了表现光照的模糊效果,就需要一个椭圆形区域,这个区域的中心是透明的,然后渐变到与背景相同的黑色。这是与上面的例子不同的地方,也算是拟向思维吧! 

1.先来看看层结构 
如下图

最上一层是这个效果需要的控制代码,下来一层是跟随鼠标的圆环,下来是圆环遮罩,下来是圆环经过时发亮的线条,再下来是发暗色的线条,鼠标没有经过时就显示这条线。 
这部分是别人早就做过的东西,这里加上是让大家对遮罩效果有个完整的认识。接下来就是我要重点讲的东西了,shadow层存放产生光照渐变效果的区域,就是上一段说到的东西,这个区域与作为遮罩层motion_mask上的motion_mask电影剪辑形状相同。 
pic层当然是放置用来照射的目标了。 

2.再看看符号库中的演员

我有个习惯,就是符号的名字尽量和它所在层的名字一样,这样好知道哪一层是放的什么。还有就是尽量用英文尽量称呼准确,如果符号多的话要编号归类并放在一个能概括它们的文件夹里。这个作品的符号少,且和层名字对应,就不再解释了。需要解释的,一个是light符号,双击打开它仔细看就会发现,它的尖角正好在舞台的中心上,这是很关键的,因为要让它跟着鼠标转动而尾部不动,其原理就在这儿。另一个是shadow符号,双击进入会发现舞台上黑乎乎什么都看不见,单击图层1就会看见一个扇形网格出现,再将舞台颜色改个颜色,这下可以看清了,是个放射填充形状。选住这个形状,打开属性面板,点击油漆桶旁边的填充颜色,打开填充颜色面板,将鼠标移到面板左上角的矩形区域中,这个区域就是当前区域的填充方式及颜色,单击就会在混色器面板中看到这个填充方式。这里介绍这么详细是因为我原来怎么也不会调出新打开文件中形状的填充属性,实在是惭愧惭愧!当时修改这个填充方式费了不少时间,点击色标可以看到其值。 

3.再解释一下跟随鼠标所用的代码 
actions上的代码:

this.onEnterFrame = function() { 
  if (_xmouse>620) { 
    light._rotation = -60; 
    //如果鼠标的x轴位置大于620,探照灯light就转-60度,light是探照灯的实例名 
  } else if (_xmouse<80) { 
    light._rotation = 30; 
  } else { 
  //如果鼠标是在80与620之间移动 
  mask._xscale = (_xmouse-50)/4+70; 
  //motion_mask层上的实例mask的宽度随鼠标的位置变化而变化,
  //所以的数字是我认为比较满意的,大家可以修改看看 
  mask._yscale = (_xmouse-50)/4+70; 
  //.........................的高度随................... 
  shadow._xscale = (_xmouse-50)/4+70; 
  //shadow层上的..................宽度.................. 
  shadow._yscale = (_xmouse-50)/4+70; 
  //..............................高度....................... 
  light._rotation = -(_xmouse-260)/6; 
  //设置light的旋转角度,由鼠标的位置计算而来,
  //并将其范围缩小以求符合实际效果,不然就露陷儿了! 
  mask._rotation = -(_xmouse-260)/6; 
  shadow._rotation = -(_xmouse-260)/6; 
 } 
}; 
 

circle和round上的代码就不再解释了,都是来跟随鼠标,贴在鼠标上的。 

三.结束语 

作了半天,这只能算是个小作品,而且也不漂亮,就送给那些和我当年一样开始学习flash的beginers吧!好的作品不仅要有对制作软件的熟练掌握,还要有自己的创意,有时将别人的东西改改,既是一种学习过程,又是一种创造,如果你美术功底好的话,再加上创作热情,初学者一定会变成有成就的闪客的。 

让我们一起成长吧!

(完)

编辑:闪客帝国

留言跟帖
热门文章
日榜 周榜
1 完整把握Flash动画设计的知识体系

本文明确阐述了在应用Flash进行动画创作和部署的完整知识,对知识体系进行了总结归纳,在知识不断增长和爆炸的时代,我们建立一个逻辑的知识体系,以利于用户快速、准确、完整地掌握它。...

2 Flash 8 Professional Copy Pixels位图象素复制

  除了Flash 8 中自带的各种简单Filter滤镜效果之外,还对bitmapData位图对象提供了非常强大的象素操作。当然,有了象素级的操作,最直接的用途就是我们可以直接控制位图中的...

3 思妙FLASH2004系列教程(10)-设置影片制作、播放、打印的参数

思妙的动画以其幽默和精美被广为流传,现在思妙推出了系列教程,以其惯有的幽默生动的讲解了FLASH动画的入门知识,闪客帝国被授权转载,本篇为初级教程的第十课:设置影片制作、播放、打印的参数。...

4 FLASH电影成功的秘笈--Yesir谈动画短片《新来的吧》剧本创作

《新来的吧》是yesir的最新作品,于2004-08-27打榜闪客帝国原创爬行榜,引起不少网友的共鸣。这里yesir从“Flash电影成功的两大秘笈”开始,与我们分享他的创作心得。...

5 中国第一代闪客谈自己的成长历程--Ricky’s竞技场

Ricky的作品《Who is Ricky?》于1999年11月22日在闪客帝国第一期原创爬行榜上位居Top1,且连续几周占据这个位置,现在他将和盘托出他的得意之作"Ricky’s竞技场"网站5年来的历次改版经过,从一个独特的视角揭示第一代闪客的进化历程。...

6 教程系列之画背景的经验谈--手把手教你用painter 7.0画背景

该文章由武文主讲,他曾协助B&T;制作《When miss you》,该作品于2003-12-12在闪客帝国原创爬行榜第191期打榜,是“唯喜派”FLASH大赛的参赛作品。本文通过实例背景的绘制,从构图、上色等各方面讲述了画背景的实战经验,是难得的指导电脑绘画的好教程。...

7 文字特效工具Swish2.0菜鸟版教程

Swish2.0是一款制作文字特效的优秀工具,它使我们在FLASH中对文字的创作更加方便、快捷,而且制作出来的效果更是琳琅满目,这对苦于FLASH学习的菜鸟们来说是不可加得的必备工具。...

8 flash遮罩特效的综合操练(入门级教程)

关于遮罩的教程很多了,这里结合作者的摸索过程及创意给大家尤其是初学者作一简单讲解。...

9 LOLS8赛季60枚符文属性分析

目前英雄联盟S7赛季已经进入尾声,有消息称S8赛季符文系统将推倒重建,进行大改版。因为现在商店里的符文已经全部免费很久了,所以有理由相信这个消息真实是十分可靠。目前官方已经放出了消息,新赛季的60枚符文已经全部揭晓,小编也为大家带来了介绍,一起来看看吧!...

10 英雄联盟打野抓人技巧分享

在英雄联盟打野这个位置,一般在势均力敌的时候是最头疼的,因为不知道应该怎么帮助队友GANK,毕竟不是所有打野都是发育性打野。所以那些前期强势的打野,就应该想方设法的在前期击垮地方。...

1 完整把握Flash动画设计的知识体系

本文明确阐述了在应用Flash进行动画创作和部署的完整知识,对知识体系进行了总结归纳,在知识不断增长和爆炸的时代,我们建立一个逻辑的知识体系,以利于用户快速、准确、完整地掌握它。...

2 Flash 8 Professional Copy Pixels位图象素复制

  除了Flash 8 中自带的各种简单Filter滤镜效果之外,还对bitmapData位图对象提供了非常强大的象素操作。当然,有了象素级的操作,最直接的用途就是我们可以直接控制位图中的...

3 思妙FLASH2004系列教程(10)-设置影片制作、播放、打印的参数

思妙的动画以其幽默和精美被广为流传,现在思妙推出了系列教程,以其惯有的幽默生动的讲解了FLASH动画的入门知识,闪客帝国被授权转载,本篇为初级教程的第十课:设置影片制作、播放、打印的参数。...

4 FLASH电影成功的秘笈--Yesir谈动画短片《新来的吧》剧本创作

《新来的吧》是yesir的最新作品,于2004-08-27打榜闪客帝国原创爬行榜,引起不少网友的共鸣。这里yesir从“Flash电影成功的两大秘笈”开始,与我们分享他的创作心得。...

5 中国第一代闪客谈自己的成长历程--Ricky’s竞技场

Ricky的作品《Who is Ricky?》于1999年11月22日在闪客帝国第一期原创爬行榜上位居Top1,且连续几周占据这个位置,现在他将和盘托出他的得意之作"Ricky’s竞技场"网站5年来的历次改版经过,从一个独特的视角揭示第一代闪客的进化历程。...

6 教程系列之画背景的经验谈--手把手教你用painter 7.0画背景

该文章由武文主讲,他曾协助B&T;制作《When miss you》,该作品于2003-12-12在闪客帝国原创爬行榜第191期打榜,是“唯喜派”FLASH大赛的参赛作品。本文通过实例背景的绘制,从构图、上色等各方面讲述了画背景的实战经验,是难得的指导电脑绘画的好教程。...

7 文字特效工具Swish2.0菜鸟版教程

Swish2.0是一款制作文字特效的优秀工具,它使我们在FLASH中对文字的创作更加方便、快捷,而且制作出来的效果更是琳琅满目,这对苦于FLASH学习的菜鸟们来说是不可加得的必备工具。...

8 flash遮罩特效的综合操练(入门级教程)

关于遮罩的教程很多了,这里结合作者的摸索过程及创意给大家尤其是初学者作一简单讲解。...

9 LOLS8赛季60枚符文属性分析

目前英雄联盟S7赛季已经进入尾声,有消息称S8赛季符文系统将推倒重建,进行大改版。因为现在商店里的符文已经全部免费很久了,所以有理由相信这个消息真实是十分可靠。目前官方已经放出了消息,新赛季的60枚符文已经全部揭晓,小编也为大家带来了介绍,一起来看看吧!...

10 英雄联盟打野抓人技巧分享

在英雄联盟打野这个位置,一般在势均力敌的时候是最头疼的,因为不知道应该怎么帮助队友GANK,毕竟不是所有打野都是发育性打野。所以那些前期强势的打野,就应该想方设法的在前期击垮地方。...

关于闪客帝国 | 联系方式 | 发展历程 | 闪客技术帮助 | 广告联系 | 网站地图

备案号:京ICP备05065306号 技术支持:闪客帝国