Flash Builder 4 -> Rect -> グラデーション

Posted by muchag | Flash Builder 4 |
初回投稿:2010-08-26 (木) 16:10:23 | 最終更新:2010-08-26 (木) 16:18:10

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 配列に追加して、
グラデーションの塗りを構成するカラーを定義します。

Posted by muchag | Flash Builder 4 |
初回投稿:2010-08-26 (木) 16:10:23 | 最終更新:2010-08-26 (木) 16:18:10

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment