Flex 4中Spark组件利用Skin Class外观设计(6)

FXG中常用的效果滤镜有7个：

GlowFilter（单色发光滤镜）

BlurFilter（模糊滤镜）

DropShadowFilter（阴影滤镜）

BevelFilter（斜角滤镜）

GradientGlowFilter（彩色发光滤镜）

GradientBevelFilter（彩色斜角滤镜）

ColorMatrixFilter（色彩响应矩阵滤镜）

以下是一个简单的例子：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            private const myMatrix:Array = [0.3, 0.59, 0.11, 0, 0,
                                            0.3, 0.59, 0.11, 0, 0,
                                            0.3, 0.59, 0.11, 0, 0,
                                            0, 0, 0, 1, 0];
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>
    <s:VGroup  fontSize="21" fontWeight="bold" color="#FFFFFF" gap="21" horizontalAlign="center">
        <s:Group>
            <s:Label text="Simon_007"/>
            <s:filters>
                <!--单色发光滤镜-->
                <s:GlowFilter blurX="10" blurY="10" quality="3" strength="4" color="#ff7700"/>
            </s:filters>
        </s:Group>
        <s:HGroup gap="21">
            <s:Group>
                <s:Label text="Simon_001"/>
                <s:filters>
                    <!--模糊滤镜-->
                    <s:BlurFilter blurX="3" blurY="3" quality="5"/>
                </s:filters>
            </s:Group>
            <s:Group>
                <s:Label text="Simon_002"/>
                <s:filters>
                    <!--阴影滤镜-->
                    <s:DropShadowFilter blurX="3" blurY="3" quality="3" strength="1" color="#000000" alpha="0.7" angle="70" distance="3"/>
                </s:filters>
            </s:Group>
            <s:Group>
                <s:Label text="Simon_003"/>
                <s:filters>
                    <!--斜角滤镜-->
                    <s:BevelFilter blurX="3" blurY="3" quality="5" angle="120" highlightColor="#00ff00" shadowColor="#00ff00"/>
                </s:filters>
            </s:Group>
        </s:HGroup>
        <s:HGroup gap="21">
            <s:Group>
                <s:Label text="Simon_004"/>
                <s:filters>
                    <!--彩色发光滤镜-->
                    <s:GradientGlowFilter blurX="10" blurY="10" distance="0" >
                        <s:GradientEntry color="#0000ff" alpha="0"/>
                        <s:GradientEntry color="#0000ff"/>
                        <s:GradientEntry color="#ff0000"/>
                        <s:GradientEntry color="#00ff00"/>
                        <s:GradientEntry color="#000000"/>
                    </s:GradientGlowFilter>
                </s:filters>
            </s:Group>
            <s:Group>
                <s:Label text="Simon_005"/>
                <s:filters>
                    <!--彩色斜角滤镜-->
                    <s:GradientBevelFilter blurX="3" blurY="3" angle="120" quality="3">
                        <s:GradientEntry color="#0000ff"/>
                        <s:GradientEntry color="#ff7700"/>
                        <s:GradientEntry color="#00ff00"/>
                    </s:GradientBevelFilter>
                </s:filters>
            </s:Group>
            <s:Group>
                <s:Label text="Simon_006" color="#ff0000"/>
                <s:filters>
                    <!--色彩响应矩阵滤镜-->
                    <!--将红色的 Simon_006 变为黑白-->
                    <s:ColorMatrixFilter matrix="{myMatrix}"/>
                </s:filters>
            </s:Group>
        </s:HGroup>
    </s:VGroup>
</s:Skin>

效果如下：


来自http://flex4jiaocheng.com/blog/275