Now loading...

[FlashPlayer10]Pixel Bender FilterのFLASHへの導入

Tags:

  1. あると便利なのでPixel Bender Toolkit (旧AIF Toolkit)をダウンロード。専用のpbkファイルがあれば実際のエフェクトの動作を手元で確認できる(もちろん元ソースも見れる)。
  2. Pixel Bender Exchangeより好みのフィルターをダウンロード。ここではTwirl Filterを使って説明(twirl.pbk)
  3. Pixel Bender ToolkitのFile > Open Pixel Bender Kernel Filter > twirl.pbkを選択
  4. File > Load Image > 好みの画像選択
  5. これで準備完了。あとはRunボタンを押せば画像にフィルターエフェクトが入り、フィルターのプロパティをスライダーを使ってリアルタイムに変更して見ることができる。twirlフィルターの場合、center(x,y)でエフェクトの中心位置、radiusでエフェクト範囲、twirlAngleでエフェクトの度合いを決定していることがわかると思う。
  6. File > Export Pixel Bender Byte Code Filter for FlashでFLASH読み込み用にパブリッシュ > twirl.pbj作成(すでにpbjファイルを同包したものもあるしpbjファイルしか配布していないものもある)

Flashに読み込ませるのは画像の扱いなんかと同じ。外部ファイルとして読み込ませる場合は以下の通り。例ではフィルターをかけるBitmapクラスは空なので適宜画像等を読み込ませてください。

import flash.display.Shader;
import flash.display.Bitmap;
import flash.events.Event;
import flash.filters.ShaderFilter;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.load(new URLRequest("twirl.pbj"));
loader.addEventListener(Event.COMPLETE,onComplete);

function onComplete(e:Event):void{
    var img:Bitmap = new Bitmap();
    var shader:Shader = new Shader(e.target.data);
    var filter:ShaderFilter = new ShaderFilter(shader);
    img.filters = [filter];
    addChild(img);
}

swfファイルに埋め込む場合は以下の通り。バイナリーデータとして埋め込むのでMime-typeの設定が必要(ここでもBitmapクラスは空)。

[Embed(source="twirl.pbj", mimeType="application/octet-stream")]
private var PbjObject:Class;

var img:Bitmap = new Bitmap();
var shader:Shader = new Shader(new PbjObject());
var filter:ShaderFilter = new ShaderFilter(shader);
img.filters = [filter];

この時点でフィルターのプロパティについては何も設定していないのでエフェクトは表示されない。先ほどのtwirl.pbkのソースをPixel Bender Toolkitで見てみるとcenter, radius, twirlAngleについて以下のように記述されていることがわかる。

parameter float2 center
    <
        minValue:float2(0.0, 0.0);
        maxValue:float2(2048.0, 2048.0);
        defaultValue:float2(256.0, 256.0);
    >;

parameter float radius
    <
        minValue:float(0.1);
        maxValue:float(2048.0);
        defaultValue:float(10.0);
    >;

parameter float twirlAngle
    <
        minValue:float(0.0);
        maxValue:float(360.0);
        defaultValue:float(90.0);
    >;

これらのプロパティへのアクセスは、例えばcenterのminValue, maxValue, defaultValueの場合はこんなかんじ。

//shader.data.center.minValueでもok
trace(shader.data["center"]["minValue"]);//0,0
trace(shader.data["center"]["maxValue"]);//2048,2048
trace(shader.data["center"]["defaultValue"]);//256,256

centerに値を入れたい場合はこんなかんじ。

//shader.data.center.valueでもok
shader.data["center"]["value"] = [125,125];
trace(shader.data["center"]["value"]);//125,125

shader.data["center"]["value"] = shader.data["center"]["defaultValue"];
trace(shader.data["center"]["value"]);//256,256

以下の例ではcenter=(125,125), radius=80, twirlAngle=100のエフェクトが画像に加えられる。

//shaderにはtwirl.pbj、imgには画像が格納済み
shader.data["center"]["value"] = [125,125];
shader.data["radius"]["value"] = [80];
shader.data["twirlAngle"]["value"] = [100];
filter= new ShaderFilter(shader);
img.filters = [filter];

完全なソースの例を見たい場合は以下のsourceを参照してください。
[FlashPlayer10]Twitter twirls
[FlashPlayer10]Twitter twirls

Related posts:


Now loading...

5 月 23, 2008

Title Link

Trackback URL

Comments

Leave a Reply