第25回　プログラムを使って絵を描く

吉岡梅

2008.10.15

　ActionScript3.0では，プログラムを使って，動的に絵を描画し，画面上に表示することができます。絵のうち，ベクターベースの絵はGraphicsクラスで管理し，ビットマップベースの絵は，BitmapDataクラスで管理します。

ベクターベースの絵を描く

　ActionScript3.0では，プログラムを使って動的に絵を描画することもできます。次のムービーは，マウスの動きに合わせてムービー上に線を引いていきます（図1）。

図1●線を引くムービー（クリックするとムービーを別ウィンドウで表示します）

　このように，Flashムービー上に，ベクターベースの線や塗りを追加して行くには，Graphicsクラスを利用します。また，Graphicsクラスは，通常，単体で使用することはありません。描画したベクターベースの絵を表示するために，ShapeクラスやSpriteクラス，さらにはMovieClipクラス等の，いわゆる「コア表示クラス」と組み合わせて使用します。

どこに絵を描くのか

　さて，今回はまず，画面上に矩形をひとつ描くコードを，2種類見ていただきましょう。まずはひとつめのコードはこちら。Flashドキュメントのメインのタイムラインに，次のようにコードを記述します。

graphics.beginFill(0xFF0000); //「赤」で塗りを開始
graphics.drawRect(50,50,100,50) //座標(50, 50)に，幅100，高さ50の矩形を描画

図2●メインのタイムラインのgraphicsに描画（クリックするとムービーを別ウィンドウで表示します）

　結果を見ると，座標(x＝50, y＝50)に，幅100，高さ50の矩形を描画できていることが確認できますね（図2）。では，次はこちらのコード。同じくFlashドキュメントのメインのタイムラインに記述します。

//Shapeクラスのインスタンスを生成
var shape:Shape = new Shape();
//座標(x:0,y:0)に，幅100，高さ50の矩形を描画
shape.graphics.beginFill(0x0000FF);
shape.graphics.drawRect(0,0,100,50);
//インスタンスの座標を設定
shape.x=50;
shape.y=50;
//画面に配置
addChild(shape);

図3●新規のShapeを生成し，描画したうえで配置（クリックするとムービーを別ウィンドウで表示します）

　こちらのコードでも，同じように，座標(50, 50)に，幅100，高さ50の矩形を描画できていることが確認できますね（図3）。2つのコードの違いはというと，もちろんコード自体の違いもありますが，「どこに絵を描くのか」という考え方の違いにあります。

　ひとつめのコードは，「あらかじめ用意されている『メインのタイムライン』のお絵かきエリアに絵を描く」という考え方です。2つめのコードは，「新規に独立した『シェイプ(ベクターデータでの絵)』を作成・お絵描きを行い，それを『メインのタイムライン』の上に配置する」という考え方です。表示リストの状態から考えると，図4のような違いがあるわけですね。