FlashでRGB分解

ネタ帳デラックス|Flashテクニック

ネタ帳デラックス|Flashテクニック」という本を買いました。
帯に「FlashActionScriptのテクニック集」と書かれているとおり、FlashActionScriptを組み合わせたテクニカルなネタ集となっていて、ちょっと立ち読みして良さそうだったので購入しました。なるべく一つずつじっくりと内容を理解しつつ、試していこうと思います。

ネタ帳デラックス | Flashテクニック (MdN books)

ネタ帳デラックス | Flashテクニック (MdN books)

Neta No. 001を試す

で、最初にやった最初のネタが北川貴清さんの「赤緑青チャンネルを使った画像エフェクト」というもの。できあがりイメージは数のようになる。

チャンネル分解するデモである。どうやっているのかソースを見ると、ポイントは2つだ。

  • BitmapDataクラスにあるcopyChannelというメソッドを使う.
  • Bitmapクラスのblendmodeをいじる.

blendmodeはFlash上でもMovieClipに対して設定できるので、何となくその存在は分かるのだが、前者のcopyChannelメソッドはヘルプでも読まないと存在に気づかない!ヘルプから抜粋すると次のような定義になっている。

copyChannel () メソッド
public function copyChannel(
  sourceBitmapData:BitmapData,
  sourceRect:Rectangle,
  destPoint:Point,
  sourceChannel:uint,
  destChannel:uint)
  :void

sourceChannelとdestChannelには以下のような定数を使います。

  • BitmapDataChannel.RED
  • BitmapDataChannel.GREEN
  • BitmapDataChannel.BLUE
  • BitmapDataChannel.ALPHA

チャンネルのデータを個別に取得できるのですね。これは便利!!
というネタでした。

疑問が出てくる

しかし、完成swfを見ていて一つ疑問が出てくる。このネタの名前からはRGB分解し、RGB合成(加法混色)をやっている名前のようだが、上図を見て分かるように、見た目とか重なり具合がCMYK分解(減法混色)であることだ。
まぁ、この本はそのタイトルにあるとおりネタ帳なのでやっていることは間違いでも何でもないのですが、個人的にRチャンネルをRで描画していないところがとても気持ち悪い。
そこで、自分で納得いくように修正してみることにしてみました。

RGB合成への修正

背景を黒にします。

flaファイルで、ステージの背景を黒(#000000)に変更します。

ビットマップデータのクリア

新規作成したBitmapDataの内容をクリアします。
ChannelImage.asファイルの38行目あたりでBitmapDataをnewしたあとに、以下のようなコードで黒(#FF000000)で塗りつぶします。

rBmd.fillRect( photoBmd.rect, 0xFF000000 );
gBmd.fillRect( photoBmd.rect, 0xFF000000 );
bBmd.fillRect( photoBmd.rect, 0xFF000000 );
ブレンドモードの変更

ブレンドモードを乗算から加算に変更します。
ChannelImage.asファイルの49行目あたりのブレンドモードの設定をBlendMode.MULTIPLYからBlendMode.ADDに変更します。

ボタン色の変更

上記の変更で、RGB合成は完了ですが、ボタンの色がCMYなのでこれもついでにFlash上で変えておきます。

修正完了

以上で修正を完了しましたので、パブリッシュすると、以下のような表示に変わることが分かると思います。

これで個人的に非常にスッキリ!

RGB分解デモ

ついでに、こないだ作ったFlickrから画像を取得する仕組みと組み合わせて、RGB合成するデモを作ってみました。RGB合成がどんなものか興味がある人はお試しください。

http://octech.sakura.ne.jp/demo/StudyFlash001_03/