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

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

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

複雑な図形を描くには

Graphicsクラスには,丸や四角の他にも,楕円や角丸四角を描くメソッドが用意されています。しかし,三角や星を描画することはできません。

自由に直線を引く

自由に直線を引くにはlineTo()メソッドを利用します。次のサンプルでは,lineTo()メソッドで三角形を描画しています。

package{
  import flash.display.Sprite;

  public class DrawTest2 extends Sprite{         
    public function DrawTest2(){
      // 直線を描く
      var s1:Sprite = new Sprite();          
      s1.graphics.lineStyle(1, 0xff0000);    
      s1.graphics.beginFill(0xffffff);
      s1.graphics.moveTo(0, 50);
      s1.graphics.lineTo(50, 0);
      s1.graphics.lineTo(50, 50);
      s1.graphics.endFill();
      addChild(s1);                          
    }
  }
}

moveTo()メソッドとlineTo()メソッドが新たに登場しています。

moveTo(x, y)は,何も描画せずに,現在の座標を(x, y)に移動させます。lineTo(x, y)は,現在の座標から(x, y)に線を引きます。線を引いたあとの座標は(x, y)に移動します。

それでは,このソースコードをコンパイルしてみましょう。クラス名をDrawTest2にしたので,DrawTest2.asというファイル名で保存するのを忘れないでください。ActionScriptには「クラス名とファイル名を同じにする」というルールがあります。

mxmlc DrawTest2.as

次のようなFlashになります。

DrawTest2

いかがでしょうか。moveTo()で左下(0, 50)に移動し,lineTo()で右上(50, 0),右下(50, 50)の順に直線を引いています。三角形の下側にも線がありますが,これはendFill()を実行した時点で始点と終点が直線で結ばれるためです。

曲線を引く

lineTo()メソッドでは直線しか描画できませんでした。ActionScript 3.0では2次ベジェ曲線を引くためのcurveTo()メソッドが用意されています。

curveTo(制御点X座標:Number, 制御点Y座標:Number, 
        終了点X座標:Number, 終了点Y座標:Number):void

具体例で見ていきます。次のサンプルは,(0, 50),(50, 0),(100, 50)の3点をlineTo()とcurveTo()で結んでいます。

DrawTest3

2次ベジェ曲線と言われてもピンと来ない方も多いかもしれませんが,制御点のほうに寄りながら,終了点まで曲線を引くとイメージするとよいでしょう。

ソースコードは次のようなものです。DrawTest3クラスですので,DrawTest3.asとして保存するのを忘れないでください。

package{
  import flash.display.Sprite;

  public class DrawTest3 extends Sprite{
    public function DrawTest3(){
      // 直線を描く
      var s1:Sprite = new Sprite();           
      s1.graphics.lineStyle(1, 0xff0000);     
      s1.graphics.moveTo(0, 50);
      s1.graphics.lineTo(50, 0);
      s1.graphics.lineTo(100, 50);

      // 曲線を描く
      s1.graphics.lineStyle(2, 0xffffff);     
      s1.graphics.moveTo(0, 50);
      s1.graphics.curveTo(50, 0, 100, 50);

      addChild(s1);                           
    }
  }
}

まとめ

ActionScript 3.0の文法から解説したため,ちょっと難しかったでしょうか。最初にも書きましたが,よく分からなくてもオブジェクト指向の理解は後回しにして,ひとまずはActionScript 3.0で遊んでみましょう。いつの間にかクラスの概念も理解できるようになってるかもしれません。

次回は,最初に予告したとおり,今回学習した基礎知識をもとに,超クールなWeb 2.0 風バッジを描いていきます。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/