总目录:http://blog.csdn.net/iloveas2014/article/details/38304477
3.1.2 以小见大——从细节损失洞悉滤镜本质
把它再改回内斜角,边缘似乎光滑了些,但这种错觉仅仅是由于阴影与蓝色的对比度不够强烈,才会让边缘的粗糙不够显眼。把文字颜色调成浅紫以后,转角处的锯齿依旧一览无余。(图 3.6),而Photoshop应用同样的设置则不会出现同样的问题(图 3.7)。
图 3.6 模糊值为3的内侧斜角滤镜
图 3.7 大小等于3的斜面样式
如果认为这个斜面太小,看不清楚的话,那我们就用一个方块来做比较吧。大小100*100,浅紫色(#6633FF),斜面大小30像素(图 3.8,图 3.9)。
图 3.8 大小为30的斜面样式
图 3.9 模糊值为30的斜角滤镜
显然,Photoshop的质感与立体感都能完美地表现出来了,但是Flash却只出现了两团比较虚的光影。是品质问题吗?把品质设为高看看,果然不虚了,呈现出来的就是真正意义上的两团云雾。(图 3.10)
图 3.10 所谓的高品质斜角滤镜
而且,拼品质更是Photoshop的强项,图 2.94展示了雕刻清晰的效果。
图 3.11 雕刻清晰的内斜面
如果是因为模糊过度导致斜角变虚,那么,我们试着把模糊值调小,比如到10。效果如图 3.12所示。
图 3.12 模糊值设置为10后的效果
可以看到,转角处空出了一大块。再调成0,结果就更明显了。(图 3.13)
图 3.13 模糊值设置为0后的效果
再次证明了Flash内的斜角就是两块轮廓叠加的结果,此外,我们还看到相交的部分被挖空,否则,高亮区和阴影区将几乎铺满整个原始图像。
所以,从本质上说,投影和斜角滤镜的实现方式一模一样,图 3.14展示了外侧型滤镜的实现方式。跟投影相比,斜角仅仅是多复制了一次图形和多做了一次挖空的操作。
图 3.15则展示了内侧型滤镜的实现方式,处理方法跟外侧滤镜相似,所不同的只是要多创建一个镂空层(遮罩),以及距离偏移模式的微小差别。
图 3.14 外侧型滤镜实现过程图解
图 3.15 内侧型滤镜实现过程详解
以上实现过程,同样适用于其他几个简单滤镜,其中,发光(不含渐变发光)没有距离的偏移。而渐变发光和渐变斜角在上渐变色的时候会按着与轮廓垂直的方向进行颜色的渐变,其模糊值还用于控制渐变区域的大小。
而复制后进行的变色操作,用ColorTransform即可轻松完成,至于模糊的实现及具体算法,我会在后续章节中跟大家作进一步的探讨。
下面我分别用这6种简单滤镜对同一个文本进行设置,效果如图 3.16~图 3.21所示。
图 3.16 投影滤镜
3.17 模糊滤镜
图 3.18 发光滤镜
图 3.19 斜角滤镜
图 3.20 渐变发光滤镜
图 3.21 渐变斜角滤镜
不难看出,6种滤镜的构造模式都基本一致,注意到我把文本的不透明度调低至50%,以便观察不能修改距离的发光滤镜。另外,我们还可以把投影滤镜的距离设置为0,并且颜色改成红色来得到与发光滤镜完全一致的效果。(图 3.22)
图 3.22 距离设置为0以后的投影滤镜,跟发光滤镜如出一撤
ActionScript3游戏中的图像编程(连载四十六)