Rect クラスを用いてグラデーションを付けたいときは
LinearGradient クラスあるいは RadialGradient クラスを用いる。
<参考元>
Shigeru Nakagaki:Flex 4 : グラデーションが MXML だけで描ける
ちょっと困ったというか戸惑ったのは、参考サイトでは
[mxml]
とか
[/mxml]
としてあるが、Adobe® Flex® 4.1 リファレンスガイド を見る限りでは
LinearGradient あるいは RadialGradient は mx.graphics となっており
サンプルも
[mxml]
とか
[/mxml]
となっている。
リファレンスの記載ミスかしら・・・。
いずれにせよ Rect クラスの fiil プロパティで囲んでやるようだ。
LinearGradient
LinearGradient クラスは 線形グラデーション を実現するためもの。
<LinearGradient>
mx.graphics
LinearGradient クラスを使用すると、グラフィックエレメントの塗りを指定できます。
グラデーションでは塗りのカラーにおける段階的なカラー変化が指定されます。
一連の GradientEntry オブジェクトを LinearGradient オブジェクトの entries 配列に追加して、
グラデーションの塗りを構成するカラーを定義します。
リファレンスのサンプルはこれ。
[mxml]
[/mxml]
参考サイトのサンプルはこれ。
[mxml]
[/mxml]
rotation
rotation プロパティにて、線形グラデーションの方向を設定できる。
[mxml][/mxml]
ratio プロパティの詳細は以下。
GradientEntry
GradientEntry クラスにて
透明度:alpha
色:color
位置:ratio
を設定できる。
Adobe® Flex® 4.1 リファレンスガイド:GradientEntry
ratio
LinearGradient クラスのグラデーションは 水平方向 左から右 へ設定される。
ratio プロパティを設定することで各位置での基準色を設定できる。
0 が最左。 1 が最右。
0.xx と指定することで途中にも基準色を設定できる。
残りの部分は自動計算にて配色される。
LinearGradient クラスの rotation プロパティと組み合わせることで以下のようになる。
デフォルト
左が ratio=”0″ で、右が ratio=”1″
rotation=”90″
が ratio=”0″ で、下が ratio=”1″
rotation=”180″
右が ratio=”0″ で、左が ratio=”1″
rotation=”-90″
下が ratio=”0″ で、上が ratio=”1″
RadialGradient
RadialGradient クラスは 円形グラデーション を実現するためのもの。
<RadialGradient>
mx.graphics
RadialGradient クラスにより、塗りのカラーにおいて段階的なカラー変化を指定できます。
放射状グラデーションは、グラフィックエレメントの中心から放射状に広がる塗りパターンを定義します。
一連の GradientEntry オブジェクトを RadialGradient オブジェクトの entries 配列に追加して、
グラデーションの塗りを構成するカラーを定義します。