原创设计 · PhotoShop · AI/CD · Fireworks · AutoCAD · 3DMAX · Flash · 网页设计 · 高精图库 · 笔刷滤镜 · 矢量素材 · 图片素材 · 模板素材· CG素材 · 思缘相册
加入VIP,免费下载精美素材 · PS新手学习推荐教程 · PS教程 · PS探讨和提问 · 思缘求图 · 数码暗房 · 设计作品欣赏 · 设计理论 · PSD素材 · 摄影作品交流 · 素材求助区

900G矢量素材,PSD设计图库
设计优秀作品十二期/新手学习贴
加入VIP,即送3000缘分币,每月500
 下载素材,加入VIP,享受更多权限
发新话题
打印

[技术交流] Flash遮罩特效的综合操练

Flash遮罩特效的综合操练

出处:闪客帝国  作者:lwz7512

  关于Flash遮罩的教程很多了,这里结合作者的摸索过程及创意给大家尤其是初学者作一简单讲解。(相关文章:Flash 8:水的形成思路和方法

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

    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.再解释一下跟随鼠标所用的代码:

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吧!好的作品不仅要有对制作软件的熟练掌握,还要有自己的创意,有时将别人的东西改改,既是一种学习过程,又是一种创造,如果你美术功底好的话,再加上创作热情,初学者一定会变成有成就的闪客的。

    让我们一起成长吧!



加入论坛VIP,下尽您想要的素材,点击进入!

如果您在做图或者看教程(PHOTOSHOP方面),遇到任何问题请到问题交流区提问,地址:http://www.missyuan.com/forum-41-1.html;我们会在第一时间帮助您解决问题,如果在教程后面跟帖,一律不给予解决!~


TOP

谢谢  楼主
我会经常来这里学习的



TOP

发新话题


关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz!6.0.0 Copyright © 2008 www.missyuan.com All rights reserved.