- 2007-02-02 (金)
- action script
昨日の記事の手法をベースに、床面に対して鏡面反射表現ができるクラス、Reflection.as を作り直しました。
まず、Flashで反射表現を実現させるために、３つのアプローチがありました。
- 反射部分を透明度で表現する
一番最初に思いついた方法です。もとの画像を反転コピーして、グラデーション画像と copyChannel 合成して、画像のアルファを100から0にフェードアウトする手法。しかし、反射したオブジェクト同士が重なった時に、後ろ側の反射が透けるのは不自然なので却下。 - "Active Blur" を使って表現する
透明度表現で行き詰まった時に、muta様にご提供いただいたアイデア。反射部分は同様にフェードアウトで表現しますが、その透明レイヤーの下に、床面の画像を敷くことで、透過を防げます。
Active Blurを使って、床面となる背景画像をキャプチャし、エフェクトをかけるMCの座標に応じて、キャプチャ画像を毎フレーム位置補正して、反射部分の下地にします。メリットとしては、背景（床）が画像でも対応できる点。その際、onEnterFrameを使えば、毎フレーム、ダイナミックに反射を描画できます。
ただ、背景となるムービークリップ全体をキャプチャするため、再描画領域が大きくなってしまうのと、Sandy で distort させる時に指定する頂点座標の取得が難しくって、今回作りたい表現にはオーバースペックだったので、このアプローチは選びませんでした。 - 反射部分に透明→背景色の矩形をかぶせる
もとの画像を反転コピー。その上にアルファ0→100（背景色）の矩形を重ねる手法。反転画像自体は不透明なので、下地が透ける問題はなし。使用状況が、背景が単色ベタ塗りの場合に限定されてしまいますが、処理の軽さとコントロールのしやすさを考慮して、今回はこのアプローチに決定しました。
３のアプローチで制作したのが、今回の Reflection.as です。コードの内容はダウンロードファイルを見ていただければ理解できると思います。
reflectionNoTransparent.zip(145KB): flash8形式
- コンストラクタ関数の引数として、反射させたいMCのインスタンス名, 反射の度合い, 背景色（※オプション：未指定の場合は 0x000000）の３引数を受け取る。
- MCの反転画像を bitmapData に draw する。
- 上に被せるグラデーション画像をコードから生成。先程の bitmapData に上書きdraw すると、前回のエントリのように、フェードアウトを擬似的に表現できる。
- それを新規ムービークリップ "reflection" に attachBitmap し、reflection を元画像の下端に移動して完成。
fla ファイル側の設定ですが、一番簡単な設定は、ステージ上にムービークリップを配置して、
import com.trick7.effects.Reflection; //クラスをimport var ref:Reflection = new Reflection(mc, 2.5); //引数は、( インスタンス名, 反射画像の高さ, 背景色 )以上で、背景色が黒の場合の反射表現の出来上がりです。
エントリのトップ画像の場合は、ステージ上にインスタンス名 "paint（ごにゃごにゃしたMC）" を追加で配置し、
import com.trick7.effects.Reflection; var ref:Reflection = new Reflection(mc, 2.5); var ref2:Reflection = new Reflection(paint, 3);となります。反射画像の高さは、元画像の高さを、第2引数で割った値となるので、元画像が150pxの時、最大値の1なら、150pxの反射画像、逆に5ぐらいにすると30pxの反射になります。これによって再描画領域をぎりぎりまで狭めることができました。
また、反射画像の高さと背景色は個別に設定できるので、背景が透明な場合、
import com.trick7.effects.Reflection; var ref:Reflection = new Reflection(mc, 2.5, 0xff0000); var ref2:Reflection = new Reflection(paint, 3, 0x00ffff);で、次のような画像になります。まぁこういう使い方はしないでしょうけど。
バグがあったらおもさげながんす。
Comment:1
- a 2008-07-16 (水) 01:37
-
本当に勉強になりましたｗ
ありがとうございます！！
Trackback:0
- TrackBack URL for this entry
- http://www.trick7.com/blog/mt-tb.cgi/469
- Listed below are links to weblogs that reference
- 反射表現クラス：com.trick7.effects.Reflection.as from trick7.com blog
![FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]](http://images.amazon.com/images/P/4881664573.01._SCTHUMBZZZ_.jpg)
