AS 技巧 - Layer BlendMode 的用處

Ticore's Blog

Flash Player 8 新增的混合模式功能中的圖層模式 (Layer)
一般使用起來或許覺得沒有什麼特別的用處
說明文件上寫得更是令人霧茫茫
簡單的說，只是讓 DisplayObject 子物件預先混和顏色而已

基本上，除了 Normal 之外的混合模式，都會強迫預先混和子物件顏色
但是其它混合模式都是有特殊效果的
假如不需要那些效果，但是又要強迫預先混合顏色時
就要用 Layer 混合模式了

對於像是 Flex 這樣由大量的 DisplayObject 組合而成的組件
遇到需要淡入、淡出效果時
即使是在最外層設定 Alpha 透明度
每個子物件仍會先被單獨套用 Alpha 效果再疊合成一張圖
這樣就會有某些位置顏色特別突兀不透明

此時 Layer 混合模式就非常好用了
它可以讓整個表單先疊合成一張圖再進行 Alpha 效果
可以確保組件顏色看起來不會特別突兀

以下是用 Flex 作的簡單測試
可以容易觀察到多層巢狀組件在不同 Alpha, BlendMode 的效果

<?xml version="1.0"?>
<mx:Application layout="vertical" fontSize="12" backgroundColor="#FFFFFF"
   xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Style>
  HBox.whiteBox {
   paddingTop: 15px;
   paddingBottom: 15px;
   paddingLeft: 15px;
   paddingRight: 15px;
   backgroundColor: #000000;
  }
 </mx:Style>
 <mx:HBox styleName="whiteBox" alpha="{alphaSlider.value}"
    blendMode="{blendModeCb.value ? blendModeCb.value : 'normal'}">
  <mx:HBox styleName="whiteBox">
   <mx:HBox styleName="whiteBox">
    <mx:HBox styleName="whiteBox" />
   </mx:HBox>
  </mx:HBox>
 </mx:HBox>
 
 <mx:HRule width="100%" />
 <mx:HBox verticalAlign="middle">
  <mx:Label text="BlendMode: " />
  <mx:ComboBox id="blendModeCb">
   <mx:dataProvider>
    ["normal", "layer", "darken", "invert", "hardlight"]
   </mx:dataProvider>
  </mx:ComboBox>
 </mx:HBox>
 <mx:HBox verticalAlign="middle">
  <mx:Label text="Alpha: " />
  <mx:HSlider id="alphaSlider" value="0.5"
    tickValues="[0, 0.5, 1]" labels="[0, 0.5, 1]"
    minimum="0" maximum="1" liveDragging="true" />
 </mx:HBox>
</mx:Application>
<!-- Ticore's Blog - http://ticore.blogspot.com/ -->

線上測示範例：

相關連結：
Flex Label, TextField 半透明小技巧
Flash 8 半透明輸入、動態文字欄位

轉載請註明出處 http://ticore.blogspot.com/2008/06/as-layer-blendmode.html