プログラマのためのFlash遊び方

第3回 お絵かきしながら学ぶ ActionScript 3.0(後編)

この記事を読むのに必要な時間:およそ 4.5 分

テキストを配置

文字列の表示は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";

角の数が少なく,2つの半径の差が大きいため,大胆な感じになりました。

角の数が少なくなった

曲線で結ぶ

今度は描画処理も修正してみましょう。lineTo()で直線を引いている箇所を,curveTo()に変更してみます。curveTo()はベジェ曲線を描くメソッドでしたね。

  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のどちらが大きいかによって,雲のようなバッジと爆発したバッジが切り替わります。

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を使っての描画に興味を持った方は,私のブログの記事AS3でiPhone風ボタンを描画AS3でRSSアイコンを描画なども併せて読んでみると面白いかもしれません。

次回は,マウスに反応するようなインタラクティブなFlashを作ってみましょう。

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/