2007/03/12
吉岡 梅

連載目次へ >>

　通常，Flashムービーでは，オーサリング時に読み込んだ画像や，自分で描いたイラスト等を使ってアニメーションを作成しますが，ムービー再生時にも，ActionScriptを使って任意の線を書くことができます。

ActionScriptでお絵かきするための二つの仕組み

　図1はマウスを使って絵を描くムービーです。また，せっかくActionScriptを使うのですから，ちょっと手を加えて線がウゴウゴと震えるようなものにしてみました。さらに[アニメ]ボタンを押すと，線を描く様子を簡単なアニメーションで表示できるようにしています。

図1：お絵かきムービー（クリックするとムービーを表示します）

　このようにFlashムービーを使って「お絵かき」をするには，大きく分けて二つの仕組みを理解する必要があります。一つが「描画メソッド」，そしてもう一つが「ビットマップ・ベースの処理」です。今回は「描画メソッド」についてご紹介します。

ムービークリップに線を引く

　ActionScriptでは，直線を引いたり，曲線を引いたり，色を塗ったりといった命令を特に「描画メソッド」と呼んでいます＊1。まずはその使い方を実際のコードを通じて見てみましょう。

　新規Flashドキュメントを作成して，任意の名前を付けて保存します。1フレーム目を選択して，次のようにコードを入力して実行してみましょう。

//まず，線の太さと色を決める
_root.lineStyle(5, 0x336699);
//線の開始地点に移動する
_root.moveTo(160, 20);
//開始地点から指定した場所に線を引く
_root.lineTo(30, 220);
//続けて線を引く
_root.lineTo(290, 220);
_root.lineTo(160, 20);

図2：ActionScriptで線を引く（クリックするとムービーを表示します）

　三角形の形に線が引かれましたね（図2）。では，一つひとつのステートメントの意味を見ていきます。

　まず，今から引く線の太さと色を「lineStyleメソッド」で決めます。

線を引きたいインスタンス.lineStyle(太さ,色);

　図2のムービーでは「_root」に引く線の太さを「6」，色をRGB値で「336699」と指定しています＊2。これで線の準備ができました。

　次に，線を引き始める場所を「moveToメソッド」で決めます。

線を引きたいインスタンス.moveTo(x座標,y座標);

　図2のムービーでは，「_root」のx座標「160」，y座標「20」の位置に移動しています＊3。

　開始位置が決まったら，線を引きたい位置まで「lineToメソッド」で線を引きます。

線を引きたいインスタンス.lineTo(x座標,y座標);

　これで開始位置から，lineToメソッドで指定した位置まで線をひけました。また，続けてlineToメソッドを実行すると，線を引き終えた座標から，新たに指定した場所へと線を引きます。

　離れた位置に線を引きたい場合には，再びmoveToメソッドで移動し，lineToメソッドで線を引く処理を繰り返します。

　このように，線を引く処理には三つのステップが必要となります。具体的には，

1. 線の太さと色を決める(lineStyleメソッド)
2. 開始位置へ移動する(moveToメソッド)
3. 線を引く(lineToメソッド)

と，三つのステップで三つのメソッドを順番に実行していくわけですね。なんだか製図用のボードで線を引くみたいな流れですね。

描画専用のインスタンスを作成する

　さて，基本的な線の引き方はわかりましたが，ここでもう一度図2の実行結果を見てください。図2では，線を引く座標をわかりやすく示すために，メインのタイムラインに星形の図を書いてあります。そして，lineToメソッドで引いた線は，その下側に隠れていますよね。

　このように，もともとステージに何か絵が書いてある場合，既存のインスタンスにそのままlineToメソッドで引いた線はその下に隠れてしまいます。じゃあ，隠れないようにするにはどうすれば良いのでしょうか？ 描画専用の何も書いていないシンボルを作成し，それをステージ上に配置すればよいのでしょうか？

次ページ以降はITpro会員(無料)の方のみお読みいただけます。
会員の方は、 ログインしてご覧ください。
まだ会員でない方は、ぜひ登録（無料）していただき、ITproの豊富なコンテンツをご覧ください。