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

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

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

バッジ本体の描画

グラデーションを定義する

まずはバッジの背景を描画するところを見ていきましょう。背景にはうっすらとグラデーションがかかっています。

前回ご説明したbeginFill()メソッドは単色でしか塗れませんでしたが,beginGradientFill()メソッドを使えば複雑なグラデーションで描画できます。

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

最初に,createGradientFill()メソッドに渡すためのMatrixオブジェクトを作成しています。createGradientBox()メソッドを利用して,グラデーションの範囲と角度を設定しています。変数dはバッジの直径を表します。

次に,beginGradientFill()メソッドにグラデーションのパラメータを与えています。引数の数が多くて複雑ですが,コメントを見れば意味は把握できるでしょう。BODY_COLOR1とBODY_COLOR2はソースコードの先頭で定義しているグラデーションの開始色と終了色です。

星型を描画する

星を描画するところのソースを見てみましょう。

  // 星型の描画
  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()メソッドは,原点からの距離と角度を渡すと,その座標のX座標,Y座標が格納されたPointオブジェクトを返します。

2つの円(半径RADIUS1と半径RADIUS2)の円周上の点を,順番に結んでいるのがお分かりいただけるでしょうか。

2つの円(半径RADIUS1と半径RADIUS2)の円周上の点を,順番に結んでいる

影をつけるには

バッジにはうっすらと影がついています。影をつけるにはDropShadowFilterクラスを用います。

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

DropShadowFilter のコンストラクタに渡しているパラメータは,それぞれ,距離・角度・色・透明度です。

フィルタを指定するには,Spriteクラスの filtersプロパティに配列の形で指定します。上のコードを丁寧に書くと,次のようになります。

  // フィルタを作成
  var filter:DropShadowFilter= new DropShadowFilter(4, 45, 0, 0.5);
  // 配列を作成
  var array:Array = [];
  // 配列にfilterを追加
  array.push(filter);
  // s のfiltersプロパティにarrayを指定
  s.filters = array;

配列で指定しているところからも分かる通り,複数のフィルタを同時に指定できます。利用できるフィルタの一覧は,Flex3リファレンスガイドのflash.filtersパッケージをご覧ください。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/