2007/03/23
吉岡 梅

連載目次へ >>

　Flashでビットマップ画像を加工する場合には，「flash.geomパッケージ」内に用意されているActionScriptの各種クラスを利用します。これらのクラスを使うと，加工範囲から加工方法まで，様々な処理のための情報を簡単に指定できます。

ビットマップから特定の範囲のみを切り取って処理する

　図1のムービーでは，読み込んだ画像の一部を取得し，さらにその一部の色を抜き出してタイル状に塗ることにより，いわゆるモザイクを作成しています。読み込む画像はムービーと同じフォルダ内にある「photo001.jpg」という名前の画像です。Flashムービーをこちらからダウンロードしてお試しください。

図1：モザイク作成ムービー（クリックするとムービーを表示します）

　普通の写真もあっというまに胡散臭くなりますね！ このように画像（ビットマップ）の一部に対して処理を行うには，前回ご紹介したBitmapDataクラスと，「flash.geomパッケージ」に用意されている各種クラスを組み合わせて使用します。

flash.geomパッケージとは

　「flash.geomパッケージ」とは何でしょう？ 「パッケージ」とは，任意の目的に沿ったクラス群がまとめられているフォルダのようなものです（図2）。「flash.geomパッケージ」は，さしずめ「flashでgeom（ジオメトリ「geometry」の「geom」です。幾何学とか，図形，デザインを指します）的な処理をしたい時に使うクラスがまとめられた場所」といったところでしょうか＊1。

図2：flash.geomパッケージのクラス

　つまりはこのパッケージの中に用意していただいているクラスを使えば，geom的な処理をする際に便利というわけですね。

　flash.geomパッケージには，全部で五つのクラスが用意されています。それぞれのクラスの主な用途は以下のとおりです（表1）。

表1：flash.geomパッケージ内のクラス群

クラス	用途
Point	座標を管理したい場合に使用します
Rectangle	処理を行う対象を矩形で管理したい場合に使用します
Matrix	位置や大きさ，傾きなどの情報を管理したい場合に使用します。移動や変形全般を行う時によく使います
Transform	ムービークリップの変形情報を管理したい場合に使用します
colorTransform	色の変換を管理したい場合に使用します

　(x,y)形式の座標で位置情報を管理したい場合には「Pointクラス」を利用し，「このビットマップの(10,10)の位置から(20,20)の位置までを四角く(矩形として)切り取りたい」というような場合には「Rectangleクラス」を利用する，というわけです。

　今はまだよくわからないかと思いますが，とりあえず名前をざっと見て「ああ，たぶんあんなことをしたいときに使えそうなんだな」くらいのぼんやりとしたイメージを浮かべておいてください。クラスというのは，得てして日常に使う道具と同じで，実際に使ってみないとよくわからないものなのです。

BitmapDataクラスのメソッドを利用してみよう

　では，実際にflash.geomパッケージのクラスを利用してみましょう。実は前回ご紹介したBitmapDataクラスのメソッドの多くは，flash.geomパッケージのクラスを使うことを前提としたものが多くあります。まずはビットマップの任意の範囲のみを，指定した色で塗りつぶす「fillRectメソッド」を使ってみましょう（図3）。

図3：任意の範囲を塗りつぶす（クリックするとムービーを表示します）

　fillRectメソッドは，その名の通り，指定したRectをfill(塗りつぶし)します。このRectというのはRectangleクラスで指定できる「矩形（四角形）」のことです。

　例えば，以下のステートメントで，幅300×高さ200のビットマップ「canvas」を作製したとします。

import flash.display.BitmapData;
//ビットマップを生成
var canvas:BitmapData = new BitmapData(300, 200, false, 0xFF669966);
//_rootに表示
_root.attachBitmap(canvas, _root.getNextHighestDepth());

　このビットマップの(50,40)を左上の起点とする，幅150，高さ100の矩形の領域を塗りつぶしてみましょう。

　まず，矩形を扱うRectangleクラスが使えるようにするために，コードの先頭にimportステートメントを書き加え，Rectangleクラスをインポートします。

import flash.geom.Rectangle;

　次に「x座標:50」「y座標:40」「幅:150」「高さ:100」の矩形を作成します。Rectangleクラスのコンストラクタ関数は，この四つの情報を，

new Rectangle(x座標,y座標,幅,高さ)

の形式で指定できます。ですので，先程の数値を当てはめると，

//処理を行いたい矩形の情報を定義
var _rect:Rectangle = new Rectangle(50,40,150,100);

となりますね。これで変数「_rect」には，「x座標:50」「y座標:40」「幅:150」「高さ:100」という情報を持ったRectangleクラスのインスタンスが格納されます。指定した場所に穴を開けたテンプレートやマスキングテープを作ったようなものだと思ってください。

　さてさて，Rectangleクラスを使って矩形の情報が整理できたところで，今度はこれを利用して色を塗ります。BitmapData上の任意の矩形範囲を塗るにはfillRectメソッドを使い，

ビットマップ.fillRect(矩形,色)

の形式でステートメントを記述します。この構文に，先ほど作成したRectangleクラスのインスタンス「_rect」を使用してみましょう。

//Rectangleクラスの情報を利用して塗りつぶし処理
canvas.fillRect(_rect,0xFF003300);

　これで指定した範囲の矩形のみを塗りつぶすことができました。一連のコードをもう一度おさらいすると，以下のようになりますね。

import flash.display.BitmapData;
import flash.geom.Rectangle;
//ビットマップを生成
var canvas:BitmapData = new BitmapData(300, 200, false, 0xFF669966);
//_rootに表示
_root.attachBitmap(canvas, _root.getNextHighestDepth());
//処理を行いたい矩形の情報を定義
var _rect:Rectangle = new Rectangle(50,40,150,100);
//Rectangleクラスの情報を利用して塗りつぶし処理
canvas.fillRect(_rect,0xFF003300);

　このように，Rectangleクラスを利用すると，ビットマップ中の，任意の矩形範囲のみに処理を行うことができます。

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