神魂顛倒論壇logo

icon
首頁Adobe Animate CCFlash CC 新功能專區 → Pixel Bender -- Flash CS4

雷射溶脂 | 瘦小腹 | 植髮 | 眼袋 | 玻尿酸 | 電波拉皮 | Flash | 購物車 | Flash Player 11.2 | 豐胸 |

下一主題 上一主題


Pixel Bender -- Flash CS4


Pixel Bender -- Flash CS4 簡版






Pixel Bender -- Flash CS4

來源:邦邦部落格 http://cs4.ben.idv.tw/2008/11/pixel-bender.html

Flash CS4 新增 Pixel Bender 的功能,可以自己寫濾鏡,你也可以去下載別人開發好的 Pixel Bender 來用,譬如 Adobe Exchange 也提供了 Pixel Bender 區:

http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26&loc=en_us


圖片:


我下載 RippleBlocks 這個來作展示,將下載的檔案解壓縮後是一個 RippleBlocks.pbk 文字檔,可以透過 Adobe CS4 包含的 Adobe Pixel Bender Toolkit 來開啟,並且 Run 執行效果,系統會提醒你載入一個圖檔來套用這個特效:


圖片:


接下來,要將它輸出給 Flash Player 可以用的濾鏡 RippleBlocks.pbj:


圖片:


接下來,在 Flash CS4 中,我在 frame 1 寫下以下的程式碼:


var fr:flash.net.FileReference;
var shader:flash.display.Shader;
var shaderFilter:flash.filters.ShaderFilter;
var loader:flash.display.Loader;

fr = new FileReference();
fr.addEventListener(Event.SELECT, onSelect);
fr.addEventListener(Event.COMPLETE, onComplete);
loader = new Loader();
loader.load(new flash.net.URLRequest("C:/Users/ben/Pictures/20081019_日本九州_Ben/PA190002.JPG"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
addChild(loader);
loader.addEventListener(MouseEvent.CLICK, loaderClick);

function loaderComplete(e:Event):void {
var loader:Loader = (LoaderInfo(e.target).loader);
loader.width = 550;
loader.height = 400;
}

function loaderClick(e:Event):void {
fr.browse();
}

function onSelect(e:Event):void {
fr.load();
}

function onComplete(e:Event):void {
shader = new Shader(fr.data as flash.utils.ByteArray);
shaderFilter = new ShaderFilter(shader);
loader.filters = [shaderFilter];
}


程式一執行,先載入照片,點選照片後,可以讓 user 透過 FileReference 載入外部 *.pbj 檔,並且可以於載入完成時透過 FileReference.data 得到檔案的 ByteArray 資料 (這也是新功能),然後就可以產生 Shader 與 ShaderFilter,用在 loader 上當作濾鏡。

執行畫面:


圖片:



圖片:



圖片:
 



雷射溶脂 | 回到頂部
Icon
網路的事情,讓網路解決

[ 逛網路就像是在探險 ]

    神 魂 顛 倒 T W G

http://bbs.flash2u.com.tw

http://tw.myblog.yahoo.com/flash2u-twg

http://flash-silverlight.blogspot.com/

http://flash2u.spaces.live.com/?_c02_owner=1

PBJ2AS - 打包Pixel Bender特效 (CJ CAT的) 簡版






PBJ2AS - 打包Pixel Bender特效  (CJ CAT的)

我會做這個的原因主要也是因為想要一勞永逸

當你想要把一個Pixel Bender特效用在Flash裡面的時候
要嘛你就需要用Flex SDK把它embed到一個SWF檔案裡面
要嘛你就要用URLLoader來載入外部的PBJ


圖片:
 
http://code.google.com/p/cjlibrarycs4/

基本上我平常是不用Flex SDK來做project的
然後每次要用PBJ都得用URLLoader來載入我也嫌麻煩
而且PBJ還得跟SWF附在一起
當我不想要給別人用我的PBJ的時候就不太恰當

於是經過了一翻研究
我終於找到一個能夠將PBJ"烤"在AS檔裡面的方法了


這就是 PBJ2AS
http://code.google.com/p/pbj2as/


我就來對PBJ2AS能夠做到的事情做個最簡單的說明吧


用了PBJ2AS,你可以寫出這種簡單的code

        var filter:MotionBlurFilter = new MotionBlurFilter();
        filter.amount = 20;
        fitler.angle = Math.PI / 2;
        clip_mc.filters = [filter];

CJLibrary CS4 includes:

  • CJMath - Mathametical shortcuts and common functions.
  • CJUtils - Common Array operations.
  • Symbol Base Classes (idv.cjcat.display) - Useful symbol base classes and document classes.
  • Emitter (idv.cjcat..display.particles) - Particle FX engine.
  • Carousel (idv.cjcat.display.carousel) - 2.5D carousel engine.
  • DynaShape (idv.cjcat.display.dynashape) - Dynamic shape drawing API.
  • Shapes (idv.cjcat.display.shapes) - Common basic shapes with adjustable parameters.
  • Filters (idv.cjcat.filters) - Filter classes wrapped from PBJ (Pixel Bender Filter Byte Code File).
  • Fenozix (idv.cjcat.physics.fenozix) - Simple 2D particle physics engine.
  • And more...



我這兩個範例用的code都只有一點點而已

http://0rz.tw/6b543
http://0rz.tw/f251J


用PBJ的特效就像是在用Flash內建的濾鏡一樣簡單
至於詳細使用說明我都寫在project homepage裡面了
範例原始檔在裡面都可以載得到

有興趣的人就看看吧 :)





Flash Player 12 | 回到頂部
Icon
網路的事情,讓網路解決

[ 逛網路就像是在探險 ]

    神 魂 顛 倒 T W G

http://bbs.flash2u.com.tw

http://tw.myblog.yahoo.com/flash2u-twg

http://flash-silverlight.blogspot.com/

http://flash2u.spaces.live.com/?_c02_owner=1

使用 Pixel Bender 著色器 簡版






使用 Pixel Bender 著色器

http://help.adobe.com/zh_TW/ActionScript/3.0_ProgrammingAS3/WS3E659D01-10C0-479d-8175-B40950BBC223.html

Adobe Pixel Bender Toolkit 可以讓開發人員撰寫著色器,以創造圖形效果並執行其他影像和資料處理。Pixel Bender 位元組碼可以在 ActionScript 中執行,將效果套用於影像資料或視覺內容。在 ActionScript 中使用 Pixel Bender 著色器可讓您創造自訂的視覺效果,並執行超出 ActionScript 中內建功能之外的資料處理。


Pixel Bender 相關資源

Gallery

download

Toturials pdf

http://labs.adobe.com/wiki/index.php/Pixel_Bender_Toolkit


Gotoandlearn介紹Pixel Bender


Introduction to Pixel Bender 1
http://www.gotoandlearn.com/play?id=83

Introduction to Pixel Bender 2
http://www.gotoandlearn.com/play?id=84
 









瘦小腹 | 回到頂部
Icon
網路的事情,讓網路解決

[ 逛網路就像是在探險 ]

    神 魂 顛 倒 T W G

http://bbs.flash2u.com.tw

http://tw.myblog.yahoo.com/flash2u-twg

http://flash-silverlight.blogspot.com/

http://flash2u.spaces.live.com/?_c02_owner=1

簡版






老大
感謝~
pixel bender真的有得摸了




雷射溶脂 | 回到頂部
Icon
Blog - http://blog.iamjason.com/
下一主題 上一主題