Flashで画像を台形に変形させる方法(DisplacementMapFilter版)

2006-10-30 (月) 14:14
action script

以前エントリした、
「trick7.com blog: Flashで画像を台形に変形させる方法」
の方法は、台形変形させたい画像を、細かい三角形に分割し、それぞれをトランスフォームさせるものでした。

これとは別に、画像を台形に変形させるもう一つ別の手法があります。
「5 1/2 blog » Fuse, DisplacementMapFilter and perspective: an experiment」
で紹介されている、DisplacementMapFilterを使う方法です。

ソースもサンプルファイルも、上記リンクでダウンロードできますので、試していただければ良いかと思います。
FuseによるTweenも可能で、サンプルでは、_yscaleとx方向の変形パラメーターのscaleX（ヘルプより）をトゥイーンアニメーションさせています。
DisplacemantMapFilterを使うため、Map画像や変化量を工夫すると、台形の横辺部分をカーブ上に変形させる事ができます。（Map画像はロスレス(PNG/GIF)にすること。ただしそれでも多少ギザギザになる傾向あり）

これでOSXのジーニーエフェクトのような効果を再現できそうですね。ページの上に次のページが、ひらりと紙が重なるようなトランジションにもできそうです。

僕個人は、DisplacementMapFilterをよく理解していない（Flash8 Essentialsや、雑誌「Web Designing 2006年10月号」のScandalous Flash!で解説があったかと思います）ので、細かい三角形に区切る方法でいこうかな。

Newer: 指を骨折しまして
Older: BIG SPACESHIPの”Visualize It”

Comments:0

Trackbacks:0

Trackback URL for this entry: http://www.trick7.com/blog/2006/10/30-141402.php/trackback
Listed below are links to weblogs that reference: Flashで画像を台形に変形させる方法(DisplacementMapFilter版) from trick7

Here are my twitter delicious tumblr hatena booklog kskl ハモニナペアゲー

ブログ内検索

最近の投稿

カテゴリー

アーカイブ


AS3習得本: AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
AS3発展本: ASでアニメーションさせる面白さを知るための本。
AS2: "Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。

相互リンク: hi-posiさん
携帯Flashといえばhi-posiの岡田昇三さん。FlashLiteの有益な記事もたくさん書かれていていつもお世話になってます。ついにご挨拶させていただきました。面白すぎる人でしたw。

Return to page top