0

TourDeFlex(Button With Icon) の例のソースを読んでいますが、スキン レイヤーを理解するのが難しいことがわかりました。

TDFPanelSkin.mxmlのコードを参照してください。

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" />
    <s:State name="disabledWithControlBar" />
</s:states>

<!-- drop shadow -->
<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
                         angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
    </s:stroke>
</s:Rect>


<!-- layer 2: background fill -->
<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
<s:Rect left="0" right="0" bottom="0" height="15">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xE2E2E2" />
            <s:GradientEntry color="0x000000" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

コメントでわかるように、「レイヤー 1」と「レイヤー 2」があります。

単なるパネルですが、なぜレイヤーがあるのですか? コンポーネントにはいくつのレイヤーを含めることができますか? レイヤーが持つべきものをどこで知ることができますか?

4

1 に答える 1

2

簡単な答えは次のとおりです。

レイヤーは、Sparkスキンについて考えるのに役立つ方法です。それらは厳密に必要とされるわけではなく、あなたが持つことができる数に制限もありません。レイヤーがある理由は、Photoshopなどのアプリケーションの場合と同様の方法でコンポーネントの視覚的な外観を構築できるためです。また、コンポーネントの状態に基づいて、コンポーネントの外観をきめ細かく制御することもできます。

長い答えは次のとおりです。

RectangularDropShadowスキニングされるコンポーネントの下に表示されるドロップシャドウです。その上にRect、しっかりとしたストロークのaが描画されます。その上にRect線形グラデーションのaが描画されます。

通常、これらのレイヤーは完全に視覚的であり、アプリケーションの設計によって決定されます。私の経験では、デザイナーからPhotoshopのドキュメントを受け取りました。ボタンのようなものは、さまざまなブレンドモード、塗りつぶし、ストロークなど、さまざまなレイヤー上に構築されています。スキンをレイヤー化すると、実際のSparkスキンを（ほとんど）ソースPSDと一致させることができます。これは素晴らしいことです。

スキンをレイヤー化するもう1つの利点は、スキンの状態に基づいてレイヤーを簡単に調整できることです。一般的な例は、コンポーネントを「無効」状態にすることです。この例では、上部に4つの状態が宣言されており、そのうちの1つが「無効」になっていることがわかります。alpha.disabled="0.5"「背景塗りつぶし」で使用される属性を追加するLinearGradientことにより、パネルを更新して、無効にしたときに半透明になるようにすることができます。

Sparkを使い始めたとき、SparkSkinningに関するAdobeドキュメントを使用しました。

于 2012-07-27T16:41:47.053 に答える