DisplacementMapFilterで自由に画像を変形させる（マップを描く編） | _level0 - KAYAC Front Engineer Blog
タイムライン派のお手軽スクリプト第１弾。 「DisplacementMapFilterで自由に画像を変形させる（マップを描く編）」です。 前回のエントリーでDisplacementMapFilterの概要と使い方を ざっくり書かせてもらいましたが、今回はマップの描き方について。 ----------------------------------------------------- 通常マップ画像は、正確な変形やインタラクティブな変形をさせる場合 1ドットずつスクリプトで計算をして色を決めて、スクリプトで描くことが多いです。 でもマップ画像は所詮画像！ ざっくりとした変形であればお絵かきソフトで書いたほうが （僕の場合は）多少早かったりします。 とりあえず、前回のエントリーでサンプルとして出してた台形変形用のマップを書いてみます。 ツール 今回はFireWorksを使って作っていきますが
DisplacementMapFilterで自由に画像を変形させる （基礎編） | _level0 - KAYAC Front Engineer Blog
最近、中途で入社しました シマダ コウショウ です。 KAYACのFLASHチームには、もう一人シマダさんがいるので名前の方で呼ばれています。 今後ともよろしくお願いします。 ------------------------------------- 記念すべき初投稿は、タイムライン派のお手軽スクリプト第１弾。 個人的に大好きな「DisplacementMapFilter」について。 FLASH8（as2）から利用できるようになったフィルタなので ネタとしてはちょっと古いですが、 先日AS2案件で使うことがあったので その仕組みから、マップの描き方まであらためてまとめてみたいと思います。 「DisplacementMapFilter」については、以前日高さんがまとめた記事もあるので ぜひそちらも合わせてお読みください。 -----------------------------------
[ActionScript 3.0] DisplacementMapFilter│miscellaneous
DisplacementMapFilterとは置き換え画像の色情報に基づいて画像を変形させるという、少しわかりづらいフィルタ。 置き換えマップのRGBとアルファ値をもとにX方向Y方向の変形を指定するが、話を簡単にするために青成分を使ってX方向だけに変形することを考える。 各行はそれぞれ、元画像、置き換えマップの適用後の画像、置き換えマップ画像になっている。 1行目は、上1/3が(青の)輝度0、次の1/3が輝度128、下の1/3が輝度255になっている。適用後の画像は上が右にずれ、中は移動せず、下は左にずれている。 2行目は、下に行くほど輝度が高くなっている。適用後の画像は斜めに直線的にずれている。(「画像を平行四辺形に変形」でも説明したようにこのような線形の変形は行列を使えば簡単にできる。) 3行目はサインカーブに応じて輝度を変えている。適用後の画像は波打ったようになる。 4行目は右側が円
鮭とプログラムとか: 鏡面反射と波紋
どうも。鮭と申します。 ActionScriptとか、PHPとかやってます。 とりあえず、いろいろやっていこうかと思ってます。 photo by ひまわりの小部屋 package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.GradientType; import flash.display.Graphics; import flash.display.Shape; import flash.display.SpreadMethod; import flash.display.Sprite; import flash.events.Event; import flash.filters.DisplacementMapFilter; import flas
DisplacementMapFilterを使って波紋を表現する - プログラミングとかそんなの
DisplacementMapFilterを使って波紋を表現する 今回も前回に引き続きDisplacementMapFilterを使ったエフェクトに挑戦してみました。今回は、Macのウィジェットを追加した時のエフェクトみたいな波紋を作ってみたいと思います。 少し分かりづらいのですが、上の画像はMacのウィジェットマネージャを起動してウィジェットを追加したときに背景が波紋で揺れるエフェクトが出た瞬間をキャプチャしたものです。 このような波紋を作るには、下記のような周期的かつ滑らかに変化する置き換えマップが必要になります。 しかし、PerlineNoiseでこのような画像を生成する方法を思いつかなかったので別なアプローチを試すことにしました。 波紋用の置き換えマップ生成法（その１） まずはじめに試したのは、単純にdrawCircle()関数で円を描きそれをBlurFilterでぼかすという方法
FACEs: バスキュールサイトのツボの所
バスキュールサイトの最後のお尻の部分に、 つぼに全てが吸い込まれていくという演出があります。 仕組みとしては大したことをしてるわけではないですし 要はジニーエフェクトの亜種なんですが 今でもそれなりに反響をもらうので解説しておこうと思います。 大分前なので結構忘れちゃいましたが。 ちなみにあそこ、その場で演算して描画してるんです。 flvとか事前に作っておけば軽くていい気がするんですが。 最初はインタラクティブになにか反応させる予定だったような。 さて、自分の場合、大きい面積で派手に絵が動く演出を作る場合 スピードを稼ぐためにflash.filters.DisplacementMapFilterに 計算で作ったBitmapDataを食わせるということをするんですが、 (数式が苦手な人には辛いと思いますがかなりスピードが稼げます。 これはこれで面白いです。そのうち機会があ
matzmtok.com - このウェブサイトは販売用です！ - matzmtok リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
DisplacementMapFilterの動作を理解する - プログラミングとかそんなの
DisplacementMapFilterの動作は理解しづらいので、パラメーターとエフェクトの関連を確認するためのツールを作ってみました。 DisplacementMapFilterとは何か？ DisplacementMapFilter クラスは、指定された BitmapData オブジェクト (置き換えマップイメージと言います) のピクセル値を使用して、オブジェクトの置き換え (変位) を実行します。このフィルタを使用して、MovieClip、SimpleButton、TextField、Video オブジェクトなどの DisplayObject クラスから継承したオブジェクト、および BitmapData オブジェクトにワープ効果や斑点効果を適用できます。 ActionScript 3.0 コンポーネントリファレンスガイドの DisplacementMapFilterクラスの説明から抜
casualplay.net blog: ゆらゆら揺れる文字 - DisplacementMapFilter
DisplacementMapFilterは、特定のビットマップ(置き換えビットマップイメージ)のピクセル値に基づいて、ムービークリップやビットマップを変形させることができます。PhotoShopでいうと、［フィルタ］メニューから［変形］→［置き換え］で同様の効果。 下図の場合、赤を基準にY方向へ移動させているため、置き換えビットマップの赤の値が中間値（128)より小さいピクセルほど下（正)方向に移動し、赤の値が大きいピクセルほど上（負)方向に変化します。 慣れるまで結構しんどいフィルタですが、よく使う変形のグラデーションパターンを一度作ってしまえば、あとは使いまわすことができます。特に厳密な計算をする必要がない場合は、ステージ上で置き換えマップを作ってしまってもよいかと思います。 以下のサンプルでは、埋め込みフォントを使用する際、必要な文字を埋め込んだダイナミックテキストを別途ステージに
casualplay.net blog: 波紋エフェクト - DisplacementMapFilter
結構スタンダードなエフェクトだと思いますけど、一応のせときます。perlinNoiseで移動させた画像を置き換えマップに使用しただけ。マウス位置で変化量が変わります。他のフィルタと組み合わせて立体感を出すつもりでしたが、フィルタを重ねるとどうしても重くなってしまうので断念。ま、これだけでも充分重い気がしますけど。 数値を調整したり他のエフェクトと組み合わせれば、陽炎や磨りガラスなどの効果も可能ですが、モーションをつける場合は、ちょっと大きい描画領域に適用すると重くなってしまうので、なかなか使いどころが難しいです。 ちなみに、DisplacementMapFilterを適用する画像は表示領域よりも少し大きめの画像を用意する必要があります。そうしないと、フィルタを適用した際、アウトラインがはみ出してしまってかっこ悪いのです。 DisplacementMapFilterについては以前のエントリー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
