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 半透明输入、动态文字字段

Read more...

Flash Player TextField Render Bug [+/-]

Ticore's Blog

继之前的 Flex TextField Render Bug
反覆测试与简化之后
终于厘清 Bug 发生条件，与 Flex 没有直接关系
而是 Flash Player Render TextField 的 Bug

先创建以下的 DisplayObjectContainer 结构

sprite1:DisplayObjectContainer (with Filters)
　└sprite2:DisplayObjectContainer (blendMode="layer")

此时在 sprite2 添加一个 TextField
间距至少 100 ms 之后，将 sprite1 的 filter 移除
就会造成 TextField 显示异常

AS3 TextField Render Bug Demo Code：

package {
 import flash.display.*;
 import flash.filters.*;
 import flash.text.*;
 import flash.utils.*;

 public dynamic class Main extends MovieClip {
  
  public var sp1:Sprite = new Sprite();
  public var sp2:Sprite = new Sprite();
  public var txt:TextField = new TextField();
  
  public function Main():void {
   sp1.x = 100;
   sp1.y = 80;
   
   this.addChild(sp1);
   sp1.addChild(sp2);
   sp1.filters = [new BlurFilter()];
   sp2.blendMode = BlendMode.LAYER;
   
   txt.text = "TextField";
   txt.multiline = true;
   txt.type = TextFieldType.INPUT;
   txt.border = true;
   txt.height = 22;
   
   sp2.addChild(txt);
   setTimeout(removeFilters, 600);
  }
  
  public function removeFilters():void{
   sp1.filters = [];
  }
  
 }
}

AS2 TextField Render Bug Demo Code：

import flash.filters.*;

var root:MovieClip = this;
var mc1:MovieClip = root.createEmptyMovieClip("mc1", 0);
var mc2:MovieClip = mc1.createEmptyMovieClip("mc2", 0);

mc1.filters = [new BlurFilter()];
mc2.blendMode = "layer";
var txt:TextField = mc2.createTextField("txt", 0, 100, 80, 100, 22);
txt.text = "TextField";
txt.border = true;

setTimeout(function():Void{mc1.filters = [];}, 600);

以下是几种不同的 Bug 状况

Flash Player 9.0.47.0

Flash Player 9.0.115.0

这个 Bug 会在以下版本的 Windows Flash Player 发生
Flash Player 8.0.22.0
Flash Player 8.0.33.0
Flash Player 8.0.34.0
Flash Player 8.0.35.0
Flash Player 9.0.15.0
Flash Player 9.0.16.0
Flash Player 9.0.28.0
Flash Player 9.0.45.0
Flash Player 9.0.47.0
Flash Player 9.0.64.0
Flash Player 9.0.115.0
Flash Player 9.0.124.0

只是在最新版本 9.0.115.0, 9.0.124.0 上表现比较轻微而已

相关连结：
ActionScript BitmapData.draw TextField Bug

Read more...

Flex TextField Render Bug [+/-]

Ticore's Blog

最近开发 Flex 专案的时候，又遇到奇怪的 Bug
当 Container 指定 BlendMode 为 "layer" 模式时
调用 Modal Alert，会导致 Container 内的 TextField 显示不正常

Flex TextField Render Bug Demo Code：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
 <mx:Style>
  Alert {
   modalTransparencyDuration: 500;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   
   import flash.display.BlendMode;
   import mx.controls.Alert;
   
   public function onButtonClick(evtObj:Event):void{
    var alert:Alert = Alert.show("Alert Message", "Alert", Alert.OK);
   }
   
  ]]>
 </mx:Script>
 <mx:HBox id="box" blendMode="{BlendMode.LAYER}">
  <mx:Button id="btn" label="Alert" click="onButtonClick(event);" />
 </mx:HBox>
</mx:Application>

预期正常显示画面：

实际显示画面：

暂时性解决方式，加上 cacheAsBitmap=true 就好了

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
 <mx:Style>
  Alert {
   modalTransparencyDuration: 500;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   
   import flash.display.BlendMode;
   import mx.controls.Alert;
   
   public function onButtonClick(evtObj:Event):void{
    var alert:Alert = Alert.show("Alert Message", "Alert", Alert.OK);
   }
   
  ]]>
 </mx:Script>
 <mx:HBox id="box" cacheAsBitmap="true" blendMode="{BlendMode.LAYER}">
  <mx:Button id="btn" label="Alert" click="onButtonClick(event);" />
 </mx:HBox>
</mx:Application>

这 Bug 在 Flex 2, 3b2 都会发生，看起来很可能与 Flash Player 有关
实际测试之下，连最新版本 Flash Player 9.0.115.0 也都显示错误

相关连结：
Flex Label, TextField 半透明小技巧
Flash Player TextField Render Bug

PS. 只会发生在 Windows XP、Linux 上，在 Windows VISTA 上则是正常的

Read more...

Flex Label, TextField 半透明小技巧 [+/-]

Ticore's Blog

在 Flex 内，默认是没有嵌入字体的
所以假如想要对组件设置 alpha 半透明
就会发现到组件内 Label, TextField 无法表现半透明效果
如下所示：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="horizontal" verticalAlign="middle">
 <mx:Fade id="fadeOut" duration="500" alphaFrom="1" alphaTo="0.2" />
 <mx:Fade id="fadeIn" duration="500" alphaFrom="0.2" alphaTo="1" />
 <mx:Button label="Tween Alpha Button" alpha="0.2"
  rollOverEffect="{fadeIn}" rollOutEffect="{fadeOut}" />
</mx:Application>

这时候只要利用 AS3 DisplayObject 的混合模式
将 BlendMode 设为 "layer" 就可以对 Label, TextField 作 alpha 效果了

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="horizontal" verticalAlign="middle">
 <mx:Fade id="fadeOut" duration="500" alphaFrom="1" alphaTo="0.2" />
 <mx:Fade id="fadeIn" duration="500" alphaFrom="0.2" alphaTo="1" />
 <mx:Button label="Tween Alpha Button" alpha="0.2"
  blendMode="{flash.display.BlendMode.LAYER}"
  rollOverEffect="{fadeIn}" rollOutEffect="{fadeOut}" />
</mx:Application>

相关连结：
Flash 8 半透明输入、动态文字字段
Flex TextField Render Bug

Read more...

ActionScript BitmapData.draw TextField Bug [+/-]

Ticore's Blog

问题描述：

使用 BitmapData.draw 绘制 TextField 位图资料
该 TextField 使用非嵌入字体
且 draw 方法的 blendMode 参数非为 "normal"

同时使用者用鼠标拖动应用程序视窗
或是打开应用程序控制菜单(application control menu)
或是调整视窗大小
会造成该 Flash Movie 所在运行应用程序 (Flash Player、Browser、Flash IDE)
运行发生错误而终止

 

运行环境与条件：

ActionScript Version：1、2、3
SWF Version：8、9
Flash Player Version：8、9
Player Mode：StandAlone、Plugin、ActiveX、External
Browser：IE、Firefox
OS：Windows XP SP2 cht

 

ActionScript 2 Bug Demo：

import flash.display.*;
import flash.geom.*;

var root:MovieClip = this;
var txt:TextField = root.createTextField("txt", root.getNextHighestDepth(), 100, 50, 100, 100);

var bmp:BitmapData = new BitmapData(txt._width, txt._height, true, 0);
root.attachBitmap(bmp, root.getNextHighestDepth());

root.onEnterFrame = function() {
 bmp.draw(txt, new Matrix(1, 0, 0, 1), null, "add");
}; 

ActionScript 3 Bug Demo：

package {
 import flash.display.*;
 import flash.text.*;
 import flash.utils.*;
 import flash.geom.*;
 public class Main extends MovieClip {
  public var txt:TextField;
  public var bmp:BitmapData;
  public function Main () {
   txt = new TextField();
   txt.x = 100;
   txt.y = 50;
   txt.width = 100;
   txt.height = 100;
   bmp = new BitmapData(txt.width, txt.height, true, 0);
   setInterval(doDraw, 100);
  }
  public function doDraw () {
   bmp.draw(txt, new Matrix(1, 0, 0, 1), null, "add");
  }
 }
}

该 Bug 在以下版本 Windows Flash Player 测试会发生
Flash Player 9.0.15.0
Flash Player 9.0.16.0
Flash Player 9.0.28.0
Flash Player 9.0.45.0
Flash Player 9.0.47.0
Flash Player 9.0.60.120
Flash Player 9.0.60.235
Flash Player 9.0.64.0
Flash Player 9.0.115.0
Flash Player 9.0.124.0

相关连结：
Flash Player TextField Render Bug

Read more...

Flash 8 半透明输入、动态文字字段 [+/-]

Ticore's Blog

Flash 8 以前，假如要做半透输入文字字段
必须要嵌入字型

但是中文字型随便都好几 mb
会让 swf 文件大小暴增
这样便不适合在网络上使用

拜 Flash 8 新增的功能所赐 - 位图快取、滤镜、混合模式...
已经不需要嵌入字型
就可以做到半透明输入、动态文字字段

方式很多种
原理都是让 Flash Player 底层将文字字段预先以位图方式处理过
这样就可以套用 alpha 属性了

当然你也可以自己用 ActionScript 将文字字段做位图处理
不过比较麻烦一点

强迫 Flash Player 预先以位图渲染的方式：

1. 使用混合模式 (Blend Mode)
2. 使用位图快取 (MovieClip.cacheAsBitmap)
3. 套用滤镜

以下是用 AS 动态创建输入文字字段
利用滤镜强迫输入文字字段预先以位图渲染
再对文字字段设置 _alpha 属性达到半透明的效果

var txt:TextField = this.createTextField("txt", 100, 0, 0, 160, 160);
txt.type = "INPUT";
txt.border = true;
txt.multiline = true;
txt.wordWrap = true;
var tf:TextFormat = new TextFormat();
tf.size = 24;
tf.bold = true;
txt.setNewTextFormat(tf);
//
import flash.filters.*;
var bf:DropShadowFilter = new DropShadowFilter(1, 45, 1, 1);
var txtFilters:Array = txt.filters;
txtFilters.push(bf);
txt.filters = txtFilters;
//
txt._alpha = 50;

另外一种方式比较简单

直接将文字字段包覆一层 MovieClip
对外层 MovieClip 设置混合模式为 "layer"，以及 alpha 值即可

 

示范

相关连结：
Flex Label, TextField 半透明小技巧

Read more...

Flash 8 另一种 Alpha Mask 设置方法 [+/-]

Ticore's Blog

Flash 8 支持 alpha mask

有两种设置方式

第一种是遮罩物(masker)与被遮罩物(maskee)都设为位图快取
然后用遮罩图层或是用 ActionScript setMask 命令即可

第二种方式是利用混合模式(blend mode)来作

先将遮罩物与被遮罩物包成一个 MovieClip
遮罩物混合模式设成 "alpha"
外层 MovieClip 混合模式设成 "layer" 即可
(或是将外层 MovieClip 设为位图快取)

└MovieClip (blendMode = "layer")
　├Masker (blendMode = "alpha")
　└Maskee

或是

└MovieClip (cacheAsBitmap = true)
　├Masker (blendMode = "alpha")
　└Maskee

第二种的好处是可以在 Flash 工作区域上直接看到 alpha mask 呈现效果

 

Flash 8 LiveDoc - Blend Mode

2 ways to set alpha mask Read more...