PR

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

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

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

図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に描画(クリックするとムービーを別ウィンドウで表示します)
図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を生成し,描画したうえで配置(クリックするとムービーを別ウィンドウで表示します)
図3●新規のShapeを生成し,描画したうえで配置(クリックするとムービーを別ウィンドウで表示します)

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

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

図4●2つの考え方の表示リスト
図4●2つの考え方の表示リスト

 ひとつめのコードは,いわゆる「背景」としての画像のように,もう動かす必要が無い場合などに有効です。それに対して,2つめのコードは,絵を独立した「シェイプ」として配置しましたので,おなじみのxプロパティやyプロパティの値を変えることで,自由な位置に再配置できます。

 このように,絵を描く場合には,まず,「どこに描くのか」ということを決めておく必要があります。