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

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

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

描画処理を理解しよう

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

      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()を呼び出すのを忘れないようにしましょう。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/