Actionscriptで図形を描画！(2ページ目)

Actionscriptで曲線を描画する

まずは最も基本となる直線を描画します。以下のActionscriptを見てください。

_root.lineStyle(3,0xff0000,100);
_root.moveTo(100,150);
_root.curveTo(200,100,300,150);

実行結果は左図の通りです。1行目で線のスタイルを指定し、2行目の「インスタンス名.moveTo(X座標,Y座標)」で、指定した座標を線の起点として指定するところまでは直線と同様です。

3行目に注目してください。「インスタンス名.curveTo(X座標,Y座標,X座標,Y座標)」で、先のXY座標でコントロールポイントの点、後のXY座標で終点を指定して、ベジェ曲線描画しています。つまるところ、始点・コントロールポイント・終点を結ぶ曲線を描画することが出来るというものです。


例えばグネグネ曲った曲線を表現するには以下のように記述します。

_root.lineStyle(3,0xff0000,100);
_root.moveTo(100,150);
_root.curveTo(150,100,200,150);
_root.curveTo(250,200,300,150);

実行結果は左図の通りです。更にもう1つ「curveTo()」をつなげます。同様の要領で更に複雑な図形を描画することができます。また、個々に描画した図形を削除することは出来ないので、描画する際に空のインスタンスを生成する等の配慮が必要です。


今回は描画オブジェクトの基本をマスターしました。この時点では非常に地味ですが、手書きでは時間がかかるような図形も計算によって簡単に再現することが可能です。また、図形がユーザ操作に応じてインタラクティブに変化するようなFlashを作成するにはなくてはならないActionscriptです。次回はこれら基本を応用して、美しく楽しい作例をご紹介します。