2009/5/1

Flex DisplayObject mask, blend mode, filters

Masks Blend Modes Graphics Filters 這三篇文章討論圖形的基本處理,配合Using filters in Flex 這篇文章,我們可以用程式對 DisplayObject 套上一些特效。

對一個UI元件,可以用繼承自 DisplayObject 的 filters Array 填上多個 filter classes,包含 DropShadowFilter(加上陰影), GlowFilter(顏色像墨水暈開的樣子,呈現在元件的外框上), and BlurFilter(模糊), BevelFilter(將元件以九宮格的方式切割後,分別給以不同的顏色或陰影,讓元件更有立體感),這些filter 都能用在所有 DisplayObejct 的子類別上,包含MovieClip, SimpleButton, TextField, Video objects, BitmapData。

另外有個ShaderFilter,可以即時下載 pbj 濾鏡檔案,並將該檔案的ByteArray資料轉換成ShaderFilter,就能讓照片有水波紋的效果,以這篇文章為例 Pixel Bender,可以使用Pixel Bender 的功能,自己寫濾鏡。

Blend mode 只會影響non-transparent與semi-transparent的區域,有以下這幾種: NORMAL, ADD, ALPHA, DARKEN, DIFFERENCE, ERASE, HARDLIGHT, INVERT, LAYER, LIGHTEN, MULTIPLY, OVERLAY, SCREEN, SUBTRACT,舉例來說,如果是BlendMode.LIGHTEN,因為每一個pixel都是由 RGB 三原色所組成的,Blend mode 會比較三個部份,並採用比較亮(大)的數字作為結果,例如 display object 的 pixel color 為 0xFFCC33,背景 pixel color 為 0xDDF800,結果就是 0xFFF833,因為 0xFF>0xDD 0xCC<0xf8,>0x00。DisplayObject blendMode 這裡有把所有的 BlendMode 舉例說明結果。



-----------------
在測試的時候,會用 actionscript 撰寫 Sprite 元件,但是在Canvas上 addChild 的時候,卻遇到這樣的問題:
TypeError: Error #1034: 強制轉型失敗: 無法將 flash.display::Sprite@83de181 轉換成 mx.core.IUIComponent

是因為 Canvas 繼承 Container 繼承 UIComponent 繼承 FlexSprite 繼承 Sprite 繼承 DisplayObjectContainer 繼承 InteractiveObject 繼承 DisplayObject,而在 Canvas上要增加元件的 addChild(child:DisplayObject):DisplayObject,雖然參數是 DisplayObject,但是addChild的原始程式裡面,卻有轉型的動作 child is UIComponent,所以必須要先 var tempUI:UIComponent=new UIComponent(); 把 tempSprite 放到 UICompoenent 裡面 tempUI.addChild(tempSprite); ,這樣才能 在 Canvas 上 addChild(tempUI);

-----------------
cacheAsBitmap
這個屬性並不是提昇效能的萬靈丹,反而要小心使用。在livedocs的說明中:將影片片段的 cacheAsBitmap 屬性設為 true 之後,並不會變更顯示結果,但是影片片段會自動執行像素貼齊。在不同複雜程度的向量內容上,動畫速度都可以獲得明顯的提升。cacheAsBitmap 屬性最適合與主要為靜態內容,且不會經常縮放和旋轉的影片片段搭配使用。

所以如果只是在x、y軸移動DisplayObject,那麼cacheAsBitmap可以提昇效能,但如果要旋轉、縮放、更改透明度,cacheAsBitmap則會拖慢顯示速度。

不應該濫用cacheAsBitmap
Why cacheAsBitmap is bad
cacheAsBitmap (MovieClip.cacheAsBitmap 屬性)