首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

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

2012-11-06 
Flex 4中Spark组件利用Skin Class外观设计(6)FXG中常用的效果滤镜有7个:GlowFilter(单色发光滤镜)BlurFilt

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

热点排行