ActionScriptでビットマップベースのお絵かき
図1のムービーは,ActionScriptを使って作成した簡易なお絵かきアプリケーションです。線を引いたり,色を塗ったりといった処理が,ActionScriptだけでできることを確認できますね。前回のベクターベースの線もきれいですが,今回のビットマップベースの線の,エッジがキリっと立って少しカクカクした線も別の魅力があるものです。
図1:お絵かきムービー(クリックするとムービーを表示します)
このような「お絵かき」を代表とする,ビットマップの操作をするためには,「BitmapDataクラス」を利用します。ゼロからのお絵かきから,写真画像の加工などまで,ビットマップベースの画像を加工する場合には,すべてこのBitmapDataクラスで処理を行うことが可能です。
基本的な流れ
ビットマップベースで処理を行うには,基本的に次の手順で処理を進めます。- ビットマップの準備
- ビットマップを加工
- ビットマップを表示
図2:ビットマップベースの処理の基本的な流れ
手順2と手順3は順番が入れ替わっても構いません。完全に書き上がってから表示するか,とりあえず表示しておいて,それから書き加えるかの違いです。
このうち手順2の「加工」処理は,点を打ったり,色を塗ったり,といった処理のほかにも,既存の画像ファイルを読み込んだり,変形させたり,フィルタ処理をしたりと,様々な作業が考えられます。それぞれの作業はおいおいご紹介するとして,まずは基本の三つの手順から,手順1と手順3の処理を実際のコードを通して実行してみましょう。
新規Flashドキュメントを作成し,任意の名前で保存します。タイムラインから1フレーム目を選択し,次のようにコードを記述します。
//BitmapDataクラスを使えるようにインポート import flash.display.BitmapData; //横150,縦80,緑っぽい色のビットマップを準備 var _b:BitmapData = new BitmapData(150, 80, true, 0xFF99FF66); //準備したビットマップを画面に表示 _root.attachBitmap(_b, _root.getNextHighestDepth());
図3:ビットマップを用意し,表示する(クリックするとムービーを表示します)
画面上に緑っぽい色で四角が表示されましたね。では,個々のステートメントを見ていきましょう。
まず,ビットマップを扱う「BitmapDataクラス」を使用するために,importステートメントを記述します。これはもう,決まり文句のような物です*1。
import flash.display.BitmapData;
次に,ビットマップを作成します。
new BitmapData(幅,高さ,透過処理フラグ,基本色);
ビットマップを作成するには,「new BitmapData(引数)」の形でステートメントを記述します。引数は,ビットマップの幅と高さをピクセル単位で指定,さらに透過するかどうか(いわゆるアルファ値を使いたいかどうか)の指定(true/falseのブール値で指定します),そして,ビットマップをあらかじめ任意の色で塗りつぶしておきたい場合には,その色を指定できます*2。透過処理フラグや基本色は指定しなくても構いません。その場合には「透過ナシ,白(0xFFFFFFFF)」のビットマップが作成されます。
先ほどのコードでは,「150×80」の大きさで「透過OK,緑っぽい色」のビットマップを作成し,後で扱いやすいように変数「_b」に代入しています。
var _b:BitmapData = new BitmapData(150, 80, true, 0xFF99FF66);
通常は,ここで作成したビットマップに対して絵を描いたり,貼りつけたりするのですが,それはひとまず置いておき,作成したビットマップを表示します。ビットマップを表示するには,ビットマップを表示したいムービークリップ・インスタンスを指定し,「attachBitmapメソッド」を使用します。
表示したいインスタンス.attachBitmap(ビットマップ,深度);
attachBitmapメソッドの引数には,表示したいビットマップ,さらには,attachMovieClipメソッドなどでもおなじみの「深度」を指定します。先ほどのコードでは,変数「_b」に代入しておいたビットマップを「getNextHighestDepthメソッド」*3で得られる深度の位置に表示しています。
_root.attachBitmap(_b, _root.getNextHighestDepth());
この処理が基本となります。