Flash遮罩特效的综合操练
2008-04-02 10:58:24来源:互联网 阅读 ()
一.原理部分--羽化的美眉效果
flash的遮罩原理在于使用一个图像作为透过光线的区域,当这个图像所在层转为遮罩层时,图像区域下一层的物体可见,而图像区域外的物体不可见。但是再往下一层的物体仍然可见,也就是说,遮罩层只对他下面一层物体起作用。
好,下面就步入正题,介绍一个羽化美眉效果,这在photoshop中是很容易实现的。
1.从图片库中找个漂亮的美眉,导入到舞台上,放在合适的位置,给当前层起个名字,如下图:
2.新建一层,起名mask,在当前层上用圆形工具画一个树立着的椭圆,椭圆最好不要边框线,填充色任意,这个椭圆正好把美眉挡住,如下图:
3.将此椭圆选定,按下Ctrl c, 再新建一层,起名white, 按下Ctrl shift v, 这是将椭圆复制到这一层上来,并且和原来椭圆位置相同。
4.点选mask层,右击将其转为遮罩层,关闭white层就可看到美眉被切割出来的效果,假如位置不满意,解除锁定,重新修改椭圆的位置。
5.重新点选white层,并选定层上椭圆来修改其填充属性,这里才是最费功夫的环节:打开混色器面板,在填充颜色方式中选放射状,将两个色标的颜色都变成白色,将左边的色标的不透明度改为0,右边的不变, 两色标的位置如下图:
6.色标设定完后,应该是下图这个样子
在物体的空白处单击一下,看看美眉是不是露出来了,美眉的周围是不是以白色淡出呢?
7.用填充变形工具来反复调整渐变色的区域和大小,这要费点事,效果好不好关键在这里。
8.最后的效果应该是象这样
二. 进阶部分--跟随鼠标的探照灯效果
效果:
http://www.webjx.com/upfiles/20051026/20051026174547_1.swf
有了上面的技术,那么制作一个探照灯效果就只剩下创意和代码编写工作了。具体的制作过程我就不在浪费时间了,估计大家看到我下面的解释及源文档就能理解并自己能作了。
既然是探照灯效果就应该是黑色背景了,那么为了表现光照的模糊效果,就需要一个椭圆形区域,这个区域的中央是透明的,然后渐变到和背景相同的黑色。这是和上面的例子不同的地方,也算是拟向思维吧!
1.先来看看层结构,如下图
最上一层是这个效果需要的控制代码,下来一层是跟随鼠标的圆环,下来是圆环遮罩,下来是圆环经过时发亮的线条,再下来是发暗色的线条,鼠标没有经过时就显示这条线。
这部分是别人早就做过的东西,这里加上是让大家对遮罩效果有个完整的认识。接下来就是我要重点讲的东西了,shadow层存放产生光照渐变效果的区域,就是上一段说到的东西,这个区域和作为遮罩层motion_mask上的motion_mask电影剪辑形状相同。pic层当然是放置用来照射的目标了。
2.再看看符号库中的演员
我有个习惯,就是符号的名字尽量和他所在层的名字相同,这样好知道哪一层是放的什么。更有就是尽量用英文尽量称呼准确,假如符号多的话要编号归类并放在一个能概括他们的文档夹里。这个作品的符号少,且和层名字对应,就不再解释了。需要解释的,一个是light符号,双击打开他仔细看就会发现,他的尖角正好在舞台的中央上,这是很关键的,因为要让他跟着鼠标转动而尾部不动,其原理就在这儿。
另一个是shadow符号,双击进入会发现舞台上黑乎乎什么都看不见,单击图层1就会看见一个扇形网格出现,再将舞台颜色改个颜色,这下能够看清了,是个放射填充形状。选住这个形状,打开属性面板,点击油漆桶旁边的填充颜色,打开填充颜色面板,将鼠标移到面板左上角的矩形区域中,这个区域就是当前区域的填充方式及颜色,单击就会在混色器面板中看到这个填充方式。这里介绍这么周详是因为我原来怎么也不会调出新打开文档中形状的填充属性,实在是惭愧惭愧!当时修改这个填充方式费了不少时间,点击色标能够看到其值。
3.再解释一下跟随鼠标所用的代码:
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的旋转角度,由鼠标的位置计算而来,
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash