テキストを配置
文字列の表示はTextFieldクラスを利用します。
var text:TextField = new TextField();
var size:int = d / TEXT.length; --(1)
text.htmlText = '<font size="' + size + '" color='#ffffff'>'
+ '<b>' + TEXT + '</font></b>'; --(2)
text.x = -text.textWidth / 2; ┐
text.y = -text.textHeight / 2; ┘(3)
text.filters = [new DropShadowFilter(1, 45, 0, 0.8)];
s.addChild(text);
座標計算を行っているところが少し複雑でしょうか。
- (1) バッジの直径に合わせて，
フォントサイズを決定している。 - (2) TextFieldクラスのhtmlTextプロパティを利用して，
HTMLの形式で文字サイズと色を設定する。 - (3) (2)で作成した文字列のサイズを取得して，
原点を中心に文字が表示されるように位置を調整する。
ちょっとした修正でいろんなバッジを
以上でソースコードの読解は完了です。ここからは，
Web2Badgeクラスの先頭では，
例えば，
private const LINE_COLOR:uint = 0x7FCE3D;
private const BODY_COLOR1:uint = 0xCDEEB7;
private const BODY_COLOR2:uint = 0x74CA31;
private const CORNER:int = 8;
private const RADIUS1:Number = 26;
private const RADIUS2:Number = 18;
private const TEXT:String = "SALE";
角の数が少なく，
曲線で結ぶ
今度は描画処理も修正してみましょう。lineTo()で直線を引いている箇所を，
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.curveTo(p1.x, p1.y, p2.x, p2.y);
}
s.graphics.endFill();
RADIUS1とRADIUS2のどちらが大きいかによって，
左の例：
private const LINE_COLOR:uint = 0xAEAFB1;
private const BODY_COLOR1:uint = 0xAEAFB1;
private const BODY_COLOR2:uint = 0x2B2B2B;
private const CORNER:int = 10;
private const RADIUS1:Number = 20;
private const RADIUS2:Number = 26;
private const TEXT:String = "BETA";
右の例：
private const LINE_COLOR:uint = 0xffffff;
private const BODY_COLOR1:uint = 0xFFDAED;
private const BODY_COLOR2:uint = 0xFD037F;
private const CORNER:int = 16;
private const RADIUS1:Number = 26;
private const RADIUS2:Number = 18;
private const TEXT:String = "SALE";
パラメータを修正するだけで，
まとめ
Flashはもともとデザイナーが使うものだっただけに，
ActionScriptを使っての描画に興味を持った方は，
次回は，
