Flash/ActionScript

Actionscriptで図形を描画!

Actionscriptを使用して図形を描画する基本をマスターしましょう!直線・曲線の描画から多角形の描画までの基本をご紹介します。

執筆者:渡辺 大介

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

Actionscriptで直線を描画する

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

_root.lineStyle(3,0xff0000,100);
_root.curveTo(300,150);
Flashで直線を描画
実行結果は左図の通りです。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);
Flashで四角形を描画
これを実行すると図のように正方形を描画することが出来ます。このように、「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();
Flashで塗りを描画
先程と同様の正方形に、赤い半透明な塗りが加わりました。追記されているのは2行目と最後の行の2行です。

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

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



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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます