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

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

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

前編では基本的な図形描画の方法を習得しました。後編では応用例としてWeb 2.0風バッジを描画します。

超クールなWeb 2.0風バッジを描く

次のようなバッジをActionScript 3.0のソースコードだけで描画します。

今回描く,Web2.0風バッジ

ちょっと長いですが,ソースコードはこうなります。

package {
  import flash.display.Sprite;                    
  import flash.geom.Matrix;                       
  import flash.geom.Point;                        (1)
  import flash.filters.DropShadowFilter;          
  import flash.text.TextField;                    

  public class Web2Badge extends Sprite {         
    // インスタンス変数を宣言
    private const LINE_COLOR:uint = 0xffffff;     
    private const BODY_COLOR1:uint = 0xffff66;    
    private const BODY_COLOR2:uint = 0xffcc00;    
    private const CORNER:int = 12;                (2)
    private const RADIUS1:Number = 26;            
    private const RADIUS2:Number = 22;            
    private const TEXT:String = "BETA";           

    // コンストラクタ
    public function Web2Badge() {
      // バッジの小さいほうの直径
      var d:Number = Math.min(RADIUS1, RADIUS2) * 2;

      // Spriteを作成
      var s:Sprite = new Sprite();
      s.graphics.lineStyle(1, LINE_COLOR);

      // グラデーションの範囲と方向を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();

      // 影をつける
      s.filters = [new DropShadowFilter(4, 45, 0, 0.5)];

      // 中に表示するテキストを作成
      var size:int = d / TEXT.length;
      var text:TextField = new TextField();
      text.htmlText = '<font size="' + size + '" color="#ffffff">'
        + '<b>' + TEXT + '</font></b>';
      text.x = -text.textWidth / 2;
      text.y = -text.textHeight / 2;
      text.filters = [new DropShadowFilter(1, 45, 0, 0.8)];
      s.addChild(text);

      // (100, 100) に表示
      s.x = s.y = 100;
      addChild(s);
    }
  }
}

ソースコードをWeb2Badge.asというファイル名で保存して,mxmlcでコンパイルしましょう。

mxmlc Web2Badge.as

Web2Badge.swfが出力されます。このファイルを表示すると,最初にお見せしたバッジが表示されます。

ソースコードを見ていこう

では,ソースコードを順番に見ていきましょう。

冒頭(1)のimport文は利用するクラスを列挙しています。前回はimportするクラスはSpriteだけでしたが,今回は一気に増えましたね。それぞれのクラスの意味は順次説明していきます。

(2)では,クラスで使用するパラメータをインスタンス変数を宣言しています。privateなインスタンス変数ですので,クラスの中の全てのメソッドから参照できる変数となります。

インスタンス変数は次のようにして宣言します。

インスタンス変数の宣言

属性にはprivate・public・internal・protectedなどのアクセス制御属性を指定できます。static属性を追加で指定すると,インスタンスではなく,クラスに所属する変数(クラス変数)となります。

インスタンス変数の宣言には,varもしくはconstキーワードを利用します。varを利用すると,実行中に何度でも値を書き換えられます。constで宣言すると,あとで値を変更できなくなります。定数と言ってもよいでしょう。ここでは,動的に値を変更する必要がないので,constで宣言しています。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/

コメント

コメントの記入