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

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

今回からは、実践的なFlash作りを始めていきます。ActionScriptで簡単な図形描画をしながらActionScript 3.0の感覚をつかんでいきましょう。

最初は地味なサンプルと退屈な文法の解説が続きますが、後編では次のようなWeb 2.0 風バッジをActionScriptだけで描画します。がんばってついてきてください。

Web 2.0 風バッジ

サンプルコードをコンパイルしよう

円や四角を描画するだけの簡単なサンプルを用意しました。味気ないサンプルですが、ActionScript 3.0の基本がたっぷり詰まっています。

package{                                      ------(1)
  import flash.display.Sprite;                ------(2)

  public class DrawTest1 extends Sprite {     ------(3)
    public function DrawTest1() {             ------(4)
      // 円を描く
      var s1:Sprite = new Sprite();          
      s1.graphics.lineStyle(1, 0xff0000);    
      s1.graphics.drawCircle(0, 0, 50);      
      s1.x = 100;                            
      s1.y = 100;                            
      addChild(s1);                          

      // 四角を描く
      var s2:Sprite = new Sprite();
      s2.graphics.lineStyle(1, 0x0000ff);
      s2.graphics.beginFill(0xffffff);
      s2.graphics.drawRect(0, 0, 50, 50);
      s2.graphics.endFill();
      s2.x = 150;
      s2.y = 50;
      addChild(s2);
    }
  }
}

DrawTest1.asとして保存して、コンパイルしてみてください。

mxmlc DrawTest1.as

次のようなFlashができあがります。

DrawTest1.swf

まずはこのソースコードをじっくり理解していきましょう。

オブジェクト指向に詳しくない方にとっては、聞きなれない単語がどんどん出てくると思います。よく分からなくても「ふーん」程度に読み飛ばして、遠慮せずに次のページに進んでください。クラスの意味が分からなくても、次のページで解説する描画処理さえ理解できれば、ActionScript 3.0で遊べます!

クラス定義を理解しよう

ソースコード冒頭では、DrawTest1クラスが所属するパッケージを宣言しています。(1)ではパッケージ名が指定されていないため、トップレベルのパッケージとなります。ソースコードの規模が大きくなってくると、クラスの種類ごとに別々のパッケージに分類すると便利です。

次のimport文(2)は、⁠flash.displayパッケージのSpriteクラスを利用する」と宣言しています。ActionScript 3.0には、最初からいくつものパッケージとクラスが用意されています。Flex3リファレンスガイドに一覧がありますす。沢山ありすぎて迷ってしまいそうですが、mxで始まるパッケージは基本的にFlexで利用するものですし、日常的に使うクラスは限られています。少しずつ覚えていきましょう。

DrawTest1 クラスの定義

(3)ではDrawTest1クラスを定義しています。

クラスの定義

クラス属性はdynamic、final、internal、publicの4つが利用できます。publicはパッケージの外部に対してクラスを公開することを意味します。その他の属性については「ActionScript 3.0のプログラミング」クラス属性をご覧ください。

次のextends Spriteは、DrawTest1クラスがSpriteクラスを継承することを宣言しています。SpriteクラスはFlashで表示を行うときに汎用的に用いられるクラスです。コンパイル対象のファイルで定義されたクラスは、Sprite クラスを継承している必要があります。

DrawTest1 クラスのメソッド

クラスには複数のメソッドを定義できます。メソッドの定義は次のような形で行います。

メソッドの定義

publicはクラス外部からも呼び出せることを意味します。publicの他に、internal、private、protectedなどのアクセス制御属性を指定できます。アクセス制御属性とあわせて、staticも指定できます。staticを指定すると、インスタンスではなくクラスに所属する静的なメソッドとなります。詳しくは「ActionScript 3.0のプログラミング」クラスプロパティの属性をご覧ください。

DrawTest1 クラスにはメソッドが1つだけ定義されています(4)。メソッド名はクラス名と同じ DrawTest1 です。このように、クラス名と同じ名前のメソッドはコンストラクタとして扱われます。コンストラクタはインスタンスの生成時に1度だけ呼ばれるメソッドです。

Flash表示時の処理

ここではFlashが表示される際に、どのような処理が行われるかを簡単に見ておきましょう。

  1. コンパイルしたファイルで定義されているクラスのインスタンスが生成される
  2. インスタンスがFlashのステージ上に配置される

今回はDrawTest1.asをコンパイルしたので、DrawTest1クラスのインスタンスが生成されます。つまり、Flashの表示時にDrawTest1クラスのコンストラクタが呼ばれます。プログラムのエントリポイントはDrawTest1クラスのコンストラクタであると言い換えてもよいでしょう。

コンストラクタが呼ばれたあと、DrawTest1のインスタンスがステージに配置されます。その結果として、コンストラクタで描画した内容が画面に表示されるわけです。

描画処理を理解しよう

次に、コンストラクタの中を見ていきます。四角を描画している部分です。

      var s1:Sprite = new Sprite();           ---- (5)
      s1.graphics.lineStyle(1, 0xff0000);     ---- (6)
      s1.graphics.drawCircle(0, 0, 50);       ---- (7)
      s1.x = 100;                             ----┐
      s1.y = 100;                             ----┘(8)
      addChild(s1);                           ---- (9)

(5)ではSpriteクラスのインスタンスを作成して、s1という変数で参照できるようにしています。

ActionScriptで変数を宣言するには

var 変数名:型;

と書きます。他の言語と比べて少し独特ですね。型を省略することもできますが、その場合はコンパイル時に警告が出ます。通常は明示的に型を宣言したほうがよいでしょう。

赤い線で円を描画する

インスタンスを作成した段階では、s1には何も描画されていません。何か描画するにはGraphicsクラスを利用します。s1に関連付けられたGraphicsクラスのインスタンスはs1.graphicsで参照できます。

(6)では、GraphicsインスタンスのlineStyle()メソッドを呼び出して線の設定を行っています。lineStyleメソッドは次のようにして利用します。

lineStyle( 線の太さ:Number, 線の色:uint ):void

s1.graphics.lineStyle(1,0xff0000);は、太さ1の赤色(#ff0000)の線を意味します。lineStyle()メソッドでは、第3引数以降で細かな指定を行えますが、省略可能な引数となっています。詳しく知るにはFlex3リファレンスガイドのGraphicsクラスを見てみるとよいでしょう。

次に、drawCircle()メソッドを使って、原点(0,0)を中心に半径50pxの円を描画しています(7⁠⁠。その後、s1の座標を(100,100)に設定して(8)addChild()メソッドでDrawTest1のインスタンス上にs1を配置しています(9)

座標系を理解する

座標がややこしいので図にしてみました。

座標

s1上には(0,0)を中心に半径50pxの円が描かれています。これはs1の座標系での話です。Flash全体(正確にはDrawTest1のインスタンス)から見ると、s1は(100,100) に配置されています。

つまり、s1 の (0, 0) は Flash の座標系で見ると (100, 100) の位置になるわけです。このように、Sprite ごとに異なる座標系を持っている点に注意が必要です。

beginFill()とendFill()

続く2つ目の図形を見ていきましょう。2つ目の図形にはs2という変数名を割り当てています。

      var s2:Sprite = new Sprite();
      s2.graphics.lineStyle(1, 0x0000ff);
      s2.graphics.beginFill(0xffffff);   
      s2.graphics.drawRect(0, 0, 50, 50);       
      s2.graphics.endFill();             
      s2.x = 150;
      s2.y = 50;
      addChild(s2);

drawRect()メソッドを利用して四角を描いています。図形を塗りつぶすためにbeginFill()とendFill()を呼び出しているところに注目です。

beginFill()メソッドは次のようにして使います。

beginFill( 色:uint, 透明度:Number = 1.0 ):void

第二引数の透明度が「 = 1.0」となっているのは、⁠省略可能なパラメータであり、省略した場合は 1.0 ⁠不透明⁠⁠」ということを意味します。

beginFill()メソッドを利用した場合には、図形を描画したあとにendFill()を呼び出すのを忘れないようにしましょう。

複雑な図形を描くには

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 風バッジを描いていきます。

おすすめ記事

記事・ニュース一覧