Actionscriptで図形を描画！

今回はActionscriptで図形を描画する基本知識をご紹介します。あくまで基本ですので見た目は非常に地味ではありますが、これを応用すれば動的に様々な図形をコントロールすることが出来るようになりますので、チャレンジしてみましょう！

Actionscriptを使用して各種図形を描画します。 Adobe Flash8.0を使用してサンプルを作成しています。

Actionscriptで直線を描画する

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

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

実行結果は左図の通りです。1行目で線のスタイルを指定します。まず「インスタンス名.lineStyle()」で、描画するインスタンスを指定し、線のスタイルを( )内で指定しています。「太さ」と「色(16進数)」の二つです。色を示す16進数ですが「0xff0000」と書かれています。これは「0x」で以降の数字は16進数であると示す表現です。例えば白は「0xffff」、黒は「0x0000」という感じですね。これ以降に不透明度や角の種類の指定などが指定出来ます。

2行目の「インスタンス名.moveTo(X座標,Y座標)」で、指定した座標を線の起点として指定しています。続く3行目の「インスタンス名.lineTo(X座標,Y座標)」で、 起点から指定の座標まで線を描画します。

_root.lineStyle(3,0xff0000);
_root.moveTo(100,50);
_root.lineTo(300,50);
_root.lineTo(300,250);
_root.lineTo(100,250);
_root.lineTo(100,50);

これを実行すると図のように正方形を描画することが出来ます。このように、「lineTo()」と次の行に続けて記述することで、起点から次の座標、次の座標からその次の座標へと直線を描画することができます。


ではこの正方形の面に色を塗ってみましょう。以下のActionscriptを追記します。

_root.lineStyle(3,0xff0000);
_root.beginFill(0xff0000,30);
_root.moveTo(100,50);
_root.lineTo(300,50);
_root.lineTo(300,250);
_root.lineTo(100,250);
_root.lineTo(100,50);
_root.endFill();

先程と同様の正方形に、赤い半透明な塗りが加わりました。追記されているのは2行目と最後の行の2行です。

まず2行目では塗りのスタイルを指定しています。「インスタンス名.beginFill()」でインスタンスを指定し、( )内でスタイルを指定しています。ここでは「色(16進数)、不透明度」の二つを指定することが出来ます。

最後の行の「インスタンス名.endFill()」を記述することで、指定した塗りのスタイルを図形に適用しています。



ここまでの基本をマスターしましたか？
次のページでは曲線を描画する方法をマスターしましょう。