バッジ本体の描画
グラデーションを定義する
まずはバッジの背景を描画するところを見ていきましょう。背景にはうっすらとグラデーションがかかっています。
前回ご説明したbeginFill()メソッドは単色でしか塗れませんでしたが,
// グラデーションの範囲と方向を Matrix オブジェクトに格納
// (d×dの範囲を-45°の方向に)
var matrix:Matrix = new Matrix();
matrix.createGradientBox(d, d, -Math.PI / 4);
// グラデーションの情報を指定
s.graphics.beginGradientFill(
"linear", // 線状のグラデーション
[BODY_COLOR1, BODY_COLOR2], // 色
[1, 1], // 透明度
[0, 255], // 色の位置
matrix); // 範囲と角度
最初に,
次に,
星型を描画する
星を描画するところのソースを見てみましょう。
// 星型の描画
var angle:Number = 2 * Math.PI / CORNER;
var p1:Point, p2:Point;
s.graphics.moveTo(RADIUS1, 0);
for(var i:int = 0; i < CORNER; i++) {
p1 = Point.polar(RADIUS2, angle * (i + 0.5));
p2 = Point.polar(RADIUS1, angle * (i + 1));
s.graphics.lineTo(p1.x, p1.y);
s.graphics.lineTo(p2.x, p2.y);
}
s.graphics.endFill();
for文を利用していますね。CORNERの回数だけループを回しています。
点の座標計算にはPointクラスのstaticなメソッドpolar()を利用しています。
polar( 原点からの距離:Number, ラジアンで表した角度:Number ):Point
polar()メソッドは,
2つの円
影をつけるには
バッジにはうっすらと影がついています。影をつけるにはDropShadowFilterクラスを用います。
// 影をつける
s.filters = [new DropShadowFilter(4, 45, 0, 0.5)];
DropShadowFilter のコンストラクタに渡しているパラメータは,
フィルタを指定するには,
// フィルタを作成
var filter:DropShadowFilter= new DropShadowFilter(4, 45, 0, 0.5);
// 配列を作成
var array:Array = [];
// 配列にfilterを追加
array.push(filter);
// s のfiltersプロパティにarrayを指定
s.filters = array;
配列で指定しているところからも分かる通り,