本节书摘来自异步社区《点睛：ActionScript3.0游戏互动编程》一书中的第2章，第2.2节，作者：游志德 , 彭文波 更多章节内容可以访问云栖社区“异步社区”公众号查看。
作为上帝的另一个化身，Flash在图层样式方面自然也不甘示弱，不过在Flash里面，它有另外一个名字——滤镜（仅仅从概念上说，Flash的滤镜包含了Photoshop里的图层样式和滤镜）。
下面打开Flash CS6/5.5，一起在滤镜里寻找Photoshop图层样式的影子，同时，我们先把Photoshop的图层样式暂时清除掉（把样式名称前面的复选框全部取消勾选即可）。
我们先新建一个文档（【文件】|【新建】或Ctrl+N），类型选择“ActionScript 3.0”，尺寸为600*100（与Photoshop的设置保持一致）。
我们用文本工具拖出一个文本框，文本格式（在属性面板里设置）与内容2.1节Photoshop文档中的一致，文本类型建议选择“静态文本”，消除锯齿选项为“可读性消除锯齿”。
【属性】面板下方有一个滤镜窗格，显示应用于文本框上的滤镜列表。对于一个新创建的文本，该列表默认为空。我们尝试单击列表左下方工具条的E:desktopAS3 Text Effectssnapshots第4章4.2添加滤镜按钮.tif按钮添加滤镜，如图2-9所示。
我们找到了图层样式的一些影子，但跟Photoshop的样式面板相比，内容真心少得可怜，再选择【投影】一项看看，如图2-10所示。
与此同时，我们把Photoshop的投影样式重新打开。
显然单项样式的功能也比Photoshop的简单很多，其可控性和表现力自然就不如Photoshop强大，实现出来的效果也没有Photoshop那么细腻和丰富。
当然，现在下结论有点为时过早，所以稍后我们会继续测试其他滤镜，然后再作出总结性的评价。
2.2.1 投影颜色与透明度的模拟默认的投影滤镜看着比Photoshop的投影样式浑浊，如图2-11所示，究其原因，似乎是颜色太深所致。
下面我们回到Photoshop查看其默认的投影参数，如图2-12所示。
我们第一眼发现了颜色样本块。同是黑色，RGB都等于0，怎么差别还这么大？看来是A通道——不透明度惹的祸。从图2-12中，我们看到 Photoshop 对阴影设置了 75%的不透明度，那 Flash 的不透明度选项在哪儿呢？Flash 里似乎找不到对应的选项……ARGB模式！这个词儿顷刻浮现了出来，透明度跟颜色在Flash里是一体的。于是我立刻打开调色板，果然，alpha就藏在这里面，如图2-13所示。我们试着把alpha调到跟Photoshop的默认设置一致，即75%。效果如图2-14所示。
2.2.2 Photoshop投影大小的模拟投影没有之前那么浓了，但是跟Photoshop的效果差别还很大，因为在Photoshop里我们还设置了另外一个属性：大小。
Flash里似乎找不到对应的选项，我们用排除法来进行定位。Photoshop投影样式的大小属性以像素为单位，Flash投影滤镜的选项只有“距离”和那对被“手铐”扣住的“模糊”属性符合条件，而Photoshop里也有一个距离，所以我们定位到【模糊】属性，如图2-15所示。
我们分别调整Photoshop的“大小”和Flash的“模糊”参数，发现两者的功能相似，都用来调整投影边缘的模糊幅度；而且数值相同的情况下，被模糊的范围也大致相等；但当数值调得比较大的时候，Flash的投影出现了比较明显的马赛克效果，没有Photoshop投影来得圆润。图2-16、图2-17分别展示了数值均设置为40时Photoshop和Flash所呈现出来的效果。
2.2.3 Flash中的投影品质与Photoshop不同，Flash的滤镜在输出的作品中仍需通过FlashPlayer进行实时渲染，所以性能显得尤为重要，在迫不得已的情况下还要以牺牲品质作为代价。所以，Flash的品质下拉列表框引起了我们的注意，我们试着把品质调整为“高”，效果就可以跟Photoshop的媲美了，如图2-18所示。
对于品质，Flash的帮助文件也给出了解释，品质的高低在FlashPlayer内部由低品质模糊执行不同的次数来进行控制，低品质只模糊1次，高品质则模糊3次。
此外，解开手铐，我们还可以给模糊的两个方向分别设置不同的值，这点Photoshop的图层样式还无法直接实现，当然了，Photoshop有更强大的滤镜功能实现这样的效果。而Flash之所以直接做在投影选项中，仅仅是为了给开发人员提供一个比较便捷的途径。总之Flash的投影模糊远没有Photoshop的复杂，没必要专门做一个独立的选项。
现在我们把【模糊X】和【模糊Y】都设置到10（跟Photoshop里的设置一样），效果如图2-19所示。
Photoshop也有个“品质”选项，而且看起来比Flash的“品质”要复杂得多。它在Flash里找不到对应的选项，因为Photoshop没有必要像Flash那样针对性能和质量去做一个平衡。
确实，Photoshop的品质跟Flash的完全不是一个概念，至少数理上是两码事。所以Photoshop的投影品质我们暂时跳过，讲到最后再回过头来研究。我们先继续挖掘这两个投影的共性。
2.2.4 Photoshop转Flash的投影角度换算我们继续往下看，Photoshop【不透明度】选项下面是【投影角度】，默认值是120°，而Flash里的“角度”是45°，两者相差将近90°，然而效果却相近，为什么？我们不妨试着把Flash的投影滤镜也设置成120°，如图2-20所示。
投影跑左边去了，x方向上与Photoshop里的投影位置截然相反。经过观察，Flash投影的角度与ActionScript的坐标系完全一致，它等于当前方向与水平线（x轴）的夹角，顺时针为正，逆时针为负。我们并非单从这两个角度的表现就得出结论，这是我把360度都试验过之后才归纳出来的规律，只是不太可能把360个角度的结果都贴出来，否则100页都贴不完。读者可以自行尝试一番。
Photoshop的角度逻辑则稍显复杂，它不直接表示投影的位置，而是光照的角度，而且坐标系跟ActionScript的相反，逆时针为正，顺时针为负。投影将落在与光照方向相反的位置上（根据光的直线传播原理得出,如图2-21所示。所以，投影方向与水平线的夹角等于（投影角度*（−1）+180度+360度）60°（+360°再取余的目的是保证角度数值落在0～360的区间内）。
我们将120°代入上式，求得最终角度=(−120+ 180+360)60=60°所以Flash应该将角度设置为60°才能保证效果与Photoshop的相吻合，如图2-22所示。
可见它们的实际角度仅相差 15 度，但这一微妙的差别，对美观度的影响也不小。调成60度以后，投影和文字在y方向上的差距拉大了，因此视觉上会显得文字更凸出，立体感更强。
Photoshop有多种样式用于创建立体效果（比如投影、斜面浮雕、光泽等），它们最终输出的颜色均与灯光方向有关，所以Photoshop投影样式设置的右侧还有个名为【使用全局光】的复选框。如果勾选该选项，这些样式就会共用同一个角度的光照（随便修改其中一个，其他的都会自动同步），从而确保多个样式之间有更好的融合度。2.2.5 投影距离的模拟Photoshop投影样式面板的下一个属性是“距离”，它也存在于Flash的投影滤镜选项中。两者初始值一致，经笔者测试，两者在效果实现和数值意义方面基本一致。Flash不需要对默认参数进行更改。
下一项是“扩展”。乍一看，Flash中并不存在对应的选项。但仔细观察，在Photoshop投影样式的基础选项里，除了alpha以外，就只剩该属性用了百分比，因此我们可以跟Flash唯一剩下的、以百分比形式表示的“强度”选项相对应。
2.2.6 Photoshop投影扩展参数在Flash滤镜中的体现分别拖动Photoshop【扩展】项的滑块以及Flash【强度】项的数值框，我们会发现它们所做的事情都一样，在于控制阴影扩展的强度，数值越大，强度越高，阴影色就越不透明，阴影被模糊的有效区域也越小。
然而，它们的取值范围让我感到相当地迷茫。Photoshop的范围为0%～100%， Flash则是0%～25500%，而且它们的变化规律也有点难以捉摸。在Photoshop里，我们匀速向右拖动滑块，投影变大的速度比较均匀（事实上受小数像素的影响，有时投影的大小在5%～10%的范围内几乎不发生任何变化，导致投影放大的过渡略显突兀）。而Flash的变化就不均匀了，一开始数值在100%附近的时候，投影变大的速度较快，但这个速度呈现急剧下降的趋势；到500%以后，要拖很长的一段距离才能让投影变大那么一点点；至于1000%以后，拖很久都看不到有明显的变化，无奈之下我们只好尝试直接输入一个很大的数（比如10000%），才能看到投影的轻微放大。
考虑到扩展与强度的对应关系比较复杂，加上在不修改该参数的前提下，Photoshop和Flash的表现就不尽相同，此处我暂且不展开讨论。
2.2.7 关于Photoshop的图层挖空投影在Photoshop里面，不管【图层挖空投影】的复选框是否处于勾选状态，显示出来的效果都几乎没有任何差别。这个挖空的作用何在？不急，我们看看Flash里的【挖空】选项。
Flash的“挖空”很明显，图2-23展示了挖空后的效果。
图像说明文字
该选项把正常状态下的不透明像素都掏空了。从挖空的现象和隐藏对象的字面意思来看，两者含义似乎一致，但结果却出乎我的意料，如图2-24所示。
图像说明文字
可见，投影与文字本身具有重叠的部分，“挖空”与“隐藏对象”的最大不同在于，“挖空”会把投影跟原始图形重叠的像素全部剔除，而隐藏对象只把原始图层隐藏掉，没有把投影的部分挖空。
那么，Photoshop“挖空”选项有没勾上的差别是否也在于此呢？只是挖空的时候没隐藏对象而已？Photoshop又该如何隐藏对象呢？
因为【图层挖空投影】仅针对投影进行挖空操作，所以我们回到最基本的混合选项中（选择【混合选项】系列，如图2-25所示）。
该界面有两个alpha选项，其中上面的【不透明度】代表整个图层的alpha，【填充不透明度】仅修改原始图像的alpha，而不对样式部分的alpha进行调整。出于对篇幅的考虑，我们就不把效果图贴出来了。
我们将“填充不透明度”设置为0之后，回到【投影面板】，测试挖空前后的差别，结果跟Flash的如出一辙，如图2-26、图2-27所示。
Photoshop这种将图层透明度独立于图层样式的做法，丰富了样式的个性化艺术创作手法，使“挖空”选项可以广泛应用于透明质感特效、光影分离、镂空设计等艺术领域。Flash里需要用多个图层来模拟，操作略显麻烦。
此外，“挖空”在Photoshop和Flash的差异还体现在挖空的强度上。Photoshop的挖空强度不受alpha影响，而Flash的挖空则跟alpha有关，alpha越大，挖空强度越高。所以，当我们把Flash的文字不透明度设置到50%时，被挖空部分将保留部分残影，如图2-28所示。
2.2.8 Photoshop品质初探——杂色我们重新回到Photoshop的品质选项。首先，【杂色】一项似乎更容易理解，我们尝试拖到30%，可以看到投影上多了一些杂点，如图2-29所示，数值越大，杂色越多，很适合用来模拟锈迹或者羊皮纸等粗糙的表面。
杂色上方的等高线可谓Photoshop图层样式的最精华之处了，下面我们就来探讨一下。
我们先把杂点一项重置为0。
2.2.9 Photoshop品质初探——等高线我们单击等高线图标右侧的箭头，将弹出一个曲线列表，如图2-30所示。
再单击第二行第4个图标看看，如图2-31所示。一个逆天的浮雕式投影效果，很神奇吧！下面我们不妨开一下小差，做点好玩的东西，比如给投影拉出一点杂色，再将文字调成灰色（#CCCCCC），填充不透明度80%，同时把图层的【混合模式】设置为“溶解”（混合模式将在后续章节给出详细的介绍）并去掉投影的挖空选项，得到的效果就像雕刻在石碑上的文字，如图2-32所示。
我们也可以调整这个艺术字侧面的颜色，使其适应文本的正面，如图2-33所示。
小差开完了，我们把混合模式，字体颜色都恢复一下，继续探讨等高线。
我们直接单击【等高线】的图标，将弹出如图2-34的对话框。
大家可以自己拖动一下曲线上的点体验下等高线变化对投影样式的影响。不过我们就随便玩玩好了，毕竟这条略显复杂的曲线，很难让我们摸索出等高线的规律。
打开【预设】下拉框，单击“线性”选项，结果将回归到默认的等高线样式，如图2-35所示，投影也恢复到设置等高线之前的效果。下面我们不加点，做些简单的变换看看。
两侧的点都拖到最顶，投影与背景的分界线变得清晰，淡出效果显著减弱，如图2-36所示。
两侧的点都拖到最底时，投影彻底消失，如图2-37所示。
E:<div style="text-align: center">
相关资源：七夕情人节表白HTML源码(两款)