[Flex] Pixel Bender Filter 動畫應用

雖然 Pixel Bender 已經出現了好一段時間，但是一直都沒很認真的看過，周遭朋友也鮮少討論它...直到最近工作需求才有開始使用。以下是集合各家長處能簡單應用 Pixel Bender Filters 到 AS3 的作法。

1. 先到 Adobe Pixel Bender Exchange 挑選想要的特效 （這邊是選擇 Crystallize ) ，下載後解壓出 Crystallize.pbj
2. 曾經從 CJ Cat 那邊聽到 pbj 可以整個轉換到 AS 內，經過 google 大神指點，找到了一個超級無敵好用的 PBJ to AS converter... 感謝作者 Marek Burn 的好心分享!!!! 利用 converter 轉換 pbj to AS, 存成 CrystallizeShader.as 放到工作目錄內。Pbj 內可設定參數可以參考轉出來的 as 檔內說明。
   
3. 編寫 mxml: 使用 mx 包內建的 Tween
   


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()"
layout="horizontal" >
<mx:Script>
<![CDATA[
import mx.effects.Tween;

private var shader:CrystallizeShader;

private function init():void{
var initNum:Number = 50;
shader = CrystallizeShader.getInstance();
shader.size = initNum;
var tween:Tween = new Tween(this, initNum, 1, 6000, -1, onUpdate, onEnd );
w1.filters = [ new ShaderFilter(shader)];
}
private function onUpdate(num:Number):void{
shader.size = num;
w1.filters = [ new ShaderFilter(shader)];
}
private function onEnd(num:Number):void{
w1.filters = [];
}
]]>
</mx:Script>
<mx:Panel width="250" height="200" layout="absolute" title="Pixel Bender Test"
backgroundColor="#F8F8F8" id="w1" />
</mx:Application>



完工！！
Ps. Pixel Bender 需要 Flash Player10 喔！ Flash 寫法大同小異，請自行轉換...=P

References :
Pixel Bender Exchange
goAndLearn(): Animating Pixel Bender Filters
Marek Burn's PBJ to AS converter
Edit 04/21/2009 : Marek Burn's blog 連結已經失效...我手上也沒有檔案，很抱歉~~
Edit 10/02/2009 : Marek Burn's blog PBJ to AS 連結又復活囉！！不過他 blog 還是掛的...