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 屬性)