zrong's Blog » ActionScript

[转]ColorMatrixFilter色彩矩阵滤镜

zrong — Fri, 09 Sep 2011 06:20:12 +0000

matrix是一个长度为4*5＝20的数组，其构成如下所示：

 R  ,G,  B,  A, offset
[1,  0,  0,  0,  0]); // red
[0,  1,  0,  0,  0]); // green
[0,  0,  1,  0,  0]); // blue
[0,  0,  0,  1,  0]); // alpha

上面是matrix的初始状态。

下面我分先来分析一下其初始状态。

red通道的值：（1，0，0，0，0）表示，R通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜色），色彩偏移量off是0；

别的通道依次类推。

下面来做一些效果，增加对colorMatrixFilter的认识：

1、调整亮度：

亮度(N取值为-255到255)

1,0,0,0,N
0,1,0,0,N
0,0,1,0,N
0,0,0,1,0

我们只需要设置一下RGB的色彩偏移就能调节其亮度，是不是很简单呢。

2、颜色反向

-1,0,0,0,255
0,-1,0,0,255
0,0,-1,0,255
0,0,0,1,0

先解释一下颜色反向：就是把0变为255，255变为0，1变为254，254变为1…..

因此，我们只需把RGB通道的原通道乘数设为－1，然后再把色彩偏移量设为255就行了。

3、图像去色：

0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0    , 0    , 0    , 1, 0

1）、首先了解一下去色原理：只要把RGB三通道的色彩信息设置成一样；即：R＝G＝B，那么图像就变成了灰色，并且，为了保证图像亮度不变，同一个通道中的R+G+B=1:如：0.3086+0.6094+0.0820＝1；

2）、三个数字的由来：0.3086, 0.6094, 0.0820；

按理说应该把RGB平分，都是0.3333333。三个数字应该是根据色彩光波频率及色彩心理学计算出来的（本人是这么认为，当然也查询了一些资料，目前尚未找到准确答案。

在作用于人眼的光线中，彩色光要明显强于无色光。对一个图像按RGB平分理论给图像去色的话，人眼就会明显感觉到图像变暗了（当然可能有心理上的原因，也有光波的科学依据）另外，在彩色图像中能识别的一下细节也可能会丢失。我假想：可能绿色的一些东西会丢失。

下面是我从PS中对RGB都为255的明度对比图：

同样的RGB，给人的感觉是绿色最亮，红色次之，蓝色最暗。它们的比例大概是3：6：1，即：0.3086, 0.6094, 0.0820

所以，在给图像去色时我们保留了大量的G通道信息，使得图像不至于变暗或者绿色信息不至于丢失（我猜想）。

4、色彩饱和度

N取值为0到2，当然也可以更高。

0.3086*(1-N) + N, 0.6094*(1-N)    , 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N) + N, 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N)    , 0.0820*(1-N) + N 0, 0,
0        , 0        , 0        , 1, 0

分析：

当色彩饱和度低到一定成度的时候，就想当于给图像去色，所以跟第3条：图像去色，有着千丝万缕的联系，在此不想过多解释；
N为原有通道信息保留量；可以理解为百分之几，等于0时完全去色，小于1时降低色度，大于1时增加色度，等于2时色度翻一倍，等于3时……。注意：RGB的原有通道信息保留量都应该相等，不然会产生偏色。
为什么是这样的计算公式：

N是原通道色彩保留量：所以，在原通道中，我们都+ N，这是不能被别的通道瓜分的。剩余的就是（1－N），就让RGB按0.3086, 0.6094, 0.0820的比例还瓜分这个剩余量吧。

5、对比度

N取值为0到10

N,0,0,0,128*(1-N)
0,N,0,0,128*(1-N)
0,0,N,0,128*(1-N)
0,0,0,1,0

分析：

所谓对比度就是让红的更红，绿的更绿……或反之。初一想，我们只需要修改RGB的乘数（要一至，不然偏色）。可仔细一琢磨，不对。如果只增加乘数，那么整个图像就会被漂白，（或反之）。好，有办法了，设置色彩偏移量，offset。具体要偏移多少呢，我们找到了一个折中的方案：128（1－N);即：一幅图像，不论很亮或很黑，但对比度为0了，最终得到的都是一幅中性灰度的图像（128），

6、阈值

所谓阈值，就是以一个色度值为基准对图像作非黑即白的处理（注意没有灰色），由于不去除了彩色属性，因此，也离不开0.3086, 0.6094, 0.0820这三组神奇的数字。

(N取值为0到255)

下面的256也可以改成255；（那样就能看到图一和图五的小黑点和小白点）；

0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0, 0, 0, 1, 0

分析：

先不看最后面的色彩偏移：-256*N

前面我们提及过，当RGB三个通道的色彩信息一模一样时，图像就失去了色彩（去色），从0.3086256,0.6094256,0.0820256,0,-256N可以看出：图像已经去色了，并且，（*256）亮度已经翻了256倍（当然也可以是255）；我们知道，RGB的有效值是0－255，即：0，1，2……255，把这些值乘以255以后会出现什么情况呢？但是除了0之外，别的全都大于或等于255了，所以此时的图像除了剩有几个黑点外，其它的全都变成白色了如图一（N＝0）；那么现在我们再作色彩偏移处理：把RGB都减去255；上次值为255（白色）的现在又变成0（黑色了）超过255的仍然是白色，我们不断的反复减255，图2，图3，图4，图5，分别是N＝64，N＝128，n=192,n=255时的图像：

7、色彩旋转

所谓色彩旋转就是让某一个通道的色彩信息让另一个通道去显示；比如，R显示G的信息，G显示B的信息，B显示R的信息，也可以只拿出一部份信息让给别的通道去显示，至于参数的瓜分可以平分。不必太讲究，但是，始终要坚持的一个原则就是每一个通道中的RGB信息量之和一定要为1，不然将会生偏色，如果您要制作偏色效果又另当别论；请偿试下面的参数：

0,1,0,0,0
0,0,1,0,0
1,0,0,0,0
0,0,0,1,0

//—————

0,0,1,0,0
1,0,0,0,0
0,1,0,0,0
0,0,0,1,0

8、只显示某个通道；

1,0,0,0,0
0,0,0,0,0
0,0,0,0,0
0,0,0,1,0

上面是只显示红色通道。依次类推。

将当前目录下的所有as文件加入缓冲区列表

zrong — Sat, 27 Aug 2011 11:45:27 +0000

vim的缓冲区列表(buffer list)保存着打开过的文件集合。使用 :b filename 可以快速打开需要的文件，且支持文件名自动补全，为编辑提供方便。

如果所有源文件都加入到缓冲区列表中，在编辑源码的时候不就更方便了么？

使用 :badd 命令可以将一个文件加入到缓冲区，我写了3个函数来提供批量加入和文件搜索的功能：

GetFileList返回提供的路径（和子目录）下的所有as文件的列表；
EchoBaddList将提供的路径（和子目录）下的所有as文件输出成Vim支持的添加缓冲区列表语句，并输出到当前缓冲区中；使用这个函数，可以方便的编辑自己的Session文件；
BaddList则直接将提供的路径（和子目录）下的所有as文件加入到缓冲区列表。

^?View Code VIM

" 获取目录下的所有文件的列表
function! GetFileList(...)
    if exists('a:1')
        let path = a:1
    else
        let path = glob("%:h")
    endif
    if exists('a:2')
        let ext = a:2
    else
        let ext = "as"
    endif
    let trueList = []
    " 获取子目录中的文件列表
    let fileList = split(glob(path."/**/*.".ext), "\<NL>")
    for afile in fileList
        if isdirectory(afile)
        " 排除目录
            continue    
        end
        call add(trueList, afile)
    endfor
    return trueList
endfunction
 
" 输出buffer列表到当前缓冲区
function! EchoBaddList(...)
    let baddList = call("GetFileList", a:000)
    for afile in baddList
        execute 'normal obadd '.afile
    endfor
endfunction
 
" 将path中的文件直接加入buffer列表
function! BaddList(...)
    let baddList = call("GetFileList", a:000)
    for afile in baddList
        execute 'badd '.afile
    endfor
endfunctio

运行一下看看 :call BaddList('src')
再看看缓冲区是否被加入了： :ls

Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系

zrong — Thu, 21 Apr 2011 12:42:42 +0000

2011-05-06更新：加入SWF SWC SWZ部分

2011-09-19更新：smithfox推荐了一篇英文的，比我的更详细：Versions in the Flash Platform

这篇文章本来是我在9ria上对网友的回复，但最近询问此类问题的网友越来越多，就整理了一下，增加了一些东西。原贴见这里

ActionScript

ActionScript通常简称为AS，它是Flash平台的语言。AS编写的程序，最终可以编译成SWF、SWC。SWF就是我们常说的Flash动画。但是现在SWF已经不仅仅是动画，而是RIA的载体。

ActionScript有3个版本，分别是1.0版（AS1），2.0版（AS2）和3.0版（AS3）。只有Flash Player 9及以上播放器才支持AS3编译的SWF。这三个版本的差别非常大，现在最流行的版本是AS3。

Flex与MXML

因为在开发RIA的时候，需要很多常用的功能，例如控件（Button,ComboBox,List……）、布局（VGroup、VBox……）等等…… Adobe就开发了一套官方的框架集来实现这些功能，这套框架集就叫做Flex。

为了方便程序员快速编写RIA程序界面，Adobe又实现了一种基于XML语法的语言MXML，这套语言很像HTML，可以与AS混用，MXML最终也是编译成SWF或SWC。 Flex框架就是使用AS3与MXML两种语言写成的。但说白了，MXML 外加实现了MXML语法，如果你有兴趣，也可以自己实现这些。 Flash和Flex，都是用AS编写，使用swf体现。

Flash

现在Adobe已经将Flash其定义为一个平台（Flash Plantform），包括了Flash IDE、Flash Builder、AIR、Flash Player以及更多。但我们一般讲Flash，有两个意思，一个是指Flash动画（也就是网页上扩展名为swf的动画），另一个就是Flash IDE。

Flash（IDE）从4.0开始进入中国，前期一直在网页动画方面告诉发展，多被用来做网页小广告（让你CPU100%的罪魁祸首之一）和MV（showgood三国系列、小小系列、大学自习室……曾经风靡一时啊）。那时的“闪客”，主要是做动画，即使涉及到编程，也大多是用当时的AS1.0（后来Flash MX 2004升级为AS2.0）写一点stop、gotoAndPlay之类的东东了。Flash（IDE）发展到8.0版本以后，才开始大量用于编程，当时比较流行的就是“Flash留言本”等等。相关历史我做了一张图来表示，括号里的数字是年份。

Flash Builder/Flex Builder

AS发展到3.0之后，由于其语法和JAVA比较像，再加上增强的性能与强类型，可以完全脱离FLA文件，使用纯文本编码，受到了许多其他程序员（尤其是JAVA程序员）的青睐。由此得以高速发展，用AS开发程序的人也越来越多。AS在视频网站、游戏行业发展迅速。但是，Flash IDE虽然是一个很好的动画制作工具，却不是一个好的开发工具。于是，Adobe又发布了Flex Builder，一个基于Eclipse的IDE，并发布了Flex SDK，后来又开源了。

有了免费的编译器，Flex得以快速发展。用Flex Builder也可以开发纯AS项目（即所有的文件都是as文件，不包含MXML，也不包含FLA）。一个真正的程序猿，应该更愿意使用这种方式吧？Flex Builder从4.0开始，被Adobe改名为Flash Builder。

Flash Builder和Flash IDE不应该放在一起比较，它们不是一类软件。如果一定要比较一下的话，那么就是Flash IDE比较偏重于设计一点，用它做动画比较方便，当然也可以用它编写AS3程序。用Flash IDE编写的程序，会有一个FLA源文件，可能还包含多个as文件。Flash Builder偏重于程序，用它可以开发MXML（也就是Flex）项目。也可以用它编写纯AS项目。用Flash Builder编写的项目，都是纯文本文件（.as或者.mxml）。对于程序流，当然偏爱Flash Builder，而设计流比较偏爱Flash IDE。

当然，IDE并非只有Adobe官方的东西，Flash Develop就是个免费的IDE。如果你愿意，用记事本做编辑器也没什么不好（比如说zrong就正在尝试VIM），因为SDK和编译器都是免费的。

Flash Player

swf动画需要在网页上显示出来，就需要安装Flash Player。Flash Player的不同版本，其实与Flash IDE也有一定的对应关系（从上图也能看出来）。但到了AS3时代后，这个对应关系就不那么明显了。Flash Player 9是能支持AS3 的最低版本（其实前面还有一个Flash Player 8.5，只是没普及就升级到9了），后面的Flash Player 都能支持AS3了。关于Flash Player，我写过一篇有史以来关于Flash Player的最详细说明，看这个就很清楚了。

AIR

Flash Player 再强大，也是运行在浏览器中，受浏览器约束。为了摆脱浏览器，Adobe又出奇招，发布了AIR。AIR其实就是一个Runtime，你可以把它理解成JVM。有了AIR，就可以用AS3开发桌面软件，而且开发出的软件可跨平台运行（这和JAVA的一次编译，随处运行不是如出一辙么！)。目前国内的AIR应用主要集中在网站的客户端方面，例如新浪微博AIR客户端等。

SWF SWC SWZ

SWF
swf是我们见到的最多的Flash平台文件了。是的，它就是Flash平台的最终表现形式。前面说到了，无论是Flex、Flash还是纯AS3，最终编译出来的文件都是swf格式，浏览器中的Flash Player插件和独立的Flash Player，也只能“打开”swf文件进行播放。前面说到的AIR，它的本质也就是运行时+swf而已。

其实并非所有的swf都能直接播放的。swf有3种：

程序SWF(application swf)：可以直接在flash player中运行的swf；
库SWF（library swf）：swc文件中的library.swf；
模块SWF（module swf）：Flex Module产生的swf文件。

最终用户碰到的绝大多数都是“程序SWF”，而程序猿们碰到后面两种SWF的可能性就比较大。

SWC

SWC是一种库文件，通常用来发布非开源的类。程序猿们将源码编译成SWC文件，并发布API文档，我们就可以使用这些SWC提供的类库进行自己的开发。SWC并不是运行时共享的，而是在编译的时候直接加入了程序SWF中。最终的程序SWF可以脱离SWC运行。

SWC本质就是一个zip文档，其中包含一个library.swf文件和一个用于描述的xml文件，你可以用zip管理器打开它查看。

SWZ

你可能会发现，从TLF出现以来，Flex SDK中多了一个flashx包，这个包中的功能，就是用SWZ实现的。SWZ是在运行时共享的库，你可以将其看作一个可以放在外部的SWC。而且SWZ的共享是平台级别的（Moudle SWF的共享是浏览器级别），存在于操作系统缓存中（Module SWF的存在浏览器缓存），只要下载过一次SWZ，你的操作系统中所有用到这些SWZ中的地方（无论是IE、FF、Chrome还是AIR）都不用重新下载。

对于程序猿，这里的关于SWC和SWZ的信息肯定是不够的，所以建议看一下smithfox的swf swc swz RSLs ant，本文的这个部分也是参照它写成的。

全文完

[转]原来Tween缓冲是这么回事

zrong — Mon, 04 Oct 2010 15:48:16 +0000

转自：http://bbs.9ria.com/viewthread.php?tid=63977

Tween缓冲

Tween缓冲大家应该都不陌生，说白了就是从一起始位置逐渐移动到目标位置的过程，这个过程可以是加速移动，也可以是减速移动，这些不同的缓动方式就是Tween的各种ease。

Tween算法

概念知道了，了解一下Tween的算法对我们更好的使用Tween或者编写自己的Tween都是很有帮助的。
在缓动过程中，随着时间的推移，对象从起始位置开始逐渐向目标位置移动，我们假设移动的距离为disX，并将其作为y轴，时间t作为x轴，这样可以轻松的得到一条曲线，如下图：在上图中我取了三个时间点ta、tb和tc，他们对于的移动的距离分别是da、db和dc，其中ta到tb与tb到tc之间的时间相同，但是很明显的可以看到db-da比dc-db小，也就是说相同的时间内，时间越靠后，对象移动的越快，实际上着就是Tween中的Cubic缓动模式，你可以在下面的SWF中看到它的效果。

如果曲线是下面这种情况，你觉得缓动应该是什么样子的呢？

在开始部分的SWF的舞台中点击，试着找到这条曲线，看到了吗？上面的方块像是一个篮球掉在地上一样，反弹了几下然后停止在目标位置，这是Tween种的Bounce缓冲效果。Tween中还有很多很好玩的缓冲模式，你可以在TweenLite开源类库中找到这些缓冲模式。

效果是看到了,但是缓动是怎么计算的呢?别着急，听我们慢慢给你细说。

首先我先声明几个变量：

time：缓动经历过的时间
beforeMove：起始位置
changeDistance：起始位置与目标位置的距离,也就是距离上的一个变化量
duration：我们要求对象从起始位置移动到目标位置所需的时间，也就是缓动的总时长

我们假设对象是匀速像目标位置移动，那么根据这四个变量可以轻松的计算出对象在经历time时间后应处的位置pos，公式如下：

^?View Code ACTIONSCRIPT

pos = changeDistance * ( time/duration ) + beforeMove

能看明白上面的公式吗？在经历的time时间后，用changeDistance乘以这个时间time占缓动总时长duration的比例，可以得到移动的距离，再加上初始位置便是对象实际应该处的位置。
请你试着代开TweenLite开源类中的Linear类，你会看到下面的代码：

^?View Code ACTIONSCRIPT

package gs.easing {
        public class Linear {
                public static function easeNone (t:Number, b:Number, c:Number, d:Number):Number
		{
                        return c*t/d + b;
                }
                public static function easeIn (t:Number, b:Number, c:Number, d:Number):Number 
		{
                        return c*t/d + b;
                }
                public static function easeOut (t:Number, b:Number, c:Number, d:Number):Number 
		{
                        return c*t/d + b;
                }
                public static function easeInOut (t:Number, b:Number, c:Number, d:Number):Number 
		{
                        return c*t/d + b;
                }
        }
}

是不是很眼熟？是的，就是刚刚我讲过的那个公式，这就是TweenLite中Linear缓动模式的算法，你可以试着打开其他缓动模式类看一下它们的源码，虽然easeIn、easeOut和easeInOut的算法不同，但是它们都包含了这四个参数：t（time）、b（beforeMove）、c（changeDistance）及d（duration）。
但是在TweenLite计算缓动时，并不是直接将起始位置和起始与目标位置的距离作为参数传递给easeIn函数，因为TweenLite不只是缓动坐标，还包括对象的宽高，透明度等等，所以实际上TweenLite是将这两个数值分别用0和1代替，得到经历时间与缓动时间长的比例factor，然后再用factor应用到对象属性的缓动上。

^?View Code ACTIONSCRIPT

factor        = Linear.easeIn ( t,0,1,d);
object.para= changeValue * factor + beforeValue;

理解了缓动的计算原理，你是不是可以运用大学里学的曲线方程写出自己的缓动模式呢？！

Alcon/De MonsterDebugger/Arthropod Flash Debugger简单评测

zrong — Mon, 20 Sep 2010 06:37:31 +0000

Alcon、De MonsterDebugger、Arthropod都是基于AIR的Debugger工具。今天有时间简单使用了一下这三个Debugger，下面是一些使用感受和选择建议。

首选：De MonsterDebugger

优点：

显示正在运行的swf的显示列表
实时更改显示对象的属性
在Debugger中选择某个显示对象的时候，swf中该对象周边还会出现黄色边框
可以筛选（筛选比搜索更好用）调试信息
可以调整界面的显示，不显示不需要的界面
有Monitor界面

缺点：

Debug.as文件较大
运行速度较慢

快速开发：Alcon

优点：

启动快速
使用更加简单
单独的Inspect可以显示复杂对象

缺点：

暂无

不再推荐：Arthropod

著名的JWPlayer也可以采用Arthropod进行调试。但和上面两个调试器比起来就没什么特色了。

[译]20个不能错过的ActionScript类库

zrong — Fri, 18 Dec 2009 07:23:00 +0000

本文译自20 Flash Resources and Tools You’ll Want

原文比较老了，所以里面很多东西我改了。

TweenLite 最快的补间动画引擎。看这个测试。仅3K大小，可用于AS3和 AS2。滤镜看这里：TweenFilterLite 引擎。
Papervision3D 最流行的3D引擎。
Away3D另一个3D引擎。查看范例
WOW Engine AS3 3D 物理引擎。与 Papervision3D 或者 Away3D配合使用不错。

FIVe3D还是3D动画引擎。
Ribbit – An amazing technology that lets Flash call a phone and use the microphone on your computer. Enables Flash pieces to receive phone calls. Visual voice mail, with speech to text capabilities. Very easy component-based implementation.
WiiFlash让Wii控制器用于Flash。使用WiiFlash，你可以创建更有趣的体验。
APE (Actionscript Physics Engine) 最大的物理引擎。
AMFPHP 在Flash中通过PHP连接数据库。（不过zrong更推荐weborb for PHP）
Flickr Libraryzrong：修改了原文提供的地址。
RSS Library zrong：修改了原文提供的地址。
YouTube zrong:修改了原文提供的地址。还可以用这个google官方提供的YouTube API。当然，国内基本用不上。
FZip 在客户端压缩zip文件。以前必须使用服务器端代码才能做到这些。
AS3SoundEditorLib 使用这个库，可以以频谱的形式可视化的显示mp3文件，并支持提示点，可以在提示点之间播放mp3。
Facebook-AS3zrong:不说了，国内基本用不上。
AS3Crypto用ActionScript3加密。
AlivePDF AlivePDF是一个开源的ActionScript 3 (Flash, Flex, AIR) PDF 生成库。使用它可以在客户端生成PDF文件。zrong:这里还有一个aPDF
ASSQL让ActionScript与MySQL直接沟通（不通过PHP等服务端）。
Yahoo!地图服务器通信开发包。

AS3CoreLib 包含数个基于ActionScript3的工具类库。有MD5 和 SHA 1 加密（上面的AS3Crypt也有这个），图像压缩（现在已经直接整合进入Flex4 SDK了），和 JSON 解析和生成工具，以及一些数字和日期API。

在Flex中实现聊天表情图片支持-实战篇

zrong — Wed, 16 Sep 2009 07:40:09 +0000

2011年6月17日更新：有网友说

SDK4.5下编译报错 1119: 访问可能未定义的属性 textFlow (通过 static 类型 spark.core:IEditableText 引用)。 TextChat.mxml /TextChat/src 第 94 行

问题的原因，在于SDK4.5将TextInput和TextArea的外观部件textDisplay的类型从原来的RichEditableText改为了IEditableText，因此无法得到textFlow属性。这是为了适应Mobile设备。在Spark主题下，它是 RichEditableText，而在Mobile主题下，它是StyleableTextField。

我解决的办法是强制将IEditableText转换成RichEditableText（见TextChat.mxml第95,100行）。这在Spark主题下当然是没问题的，但这并非是最好的办法。现在的源码是可以正常在SDK4和SDK4.5下编译的，请重新下载。

另外，经常有网友问到下载的压缩包中是一个FXP文件，这个该如何处理。其实这个问题Google一下自然有答案，做Flex，居然不知道FXP是什么，而且随手Google也不愿意做，我就只能鄙视你一下了。为了避免大家的麻烦，新提供的源码中增加了编译好的swf方便大家看效果，同时也放弃了FXP格式。我现在采用的是ANT+SDK编译，所以不要问我怎么把项目导入Flash Builder。

2010年10月7日更新：很多网友反应在SDK4正式版中，即使修改了源码也用不了，于是就顺手改了一下。现在的源码基于SDK4.1正式版，删除了一些原来beta版的时候用来解决beta版bug的代码，并加入了切分字符串的功能。也就是说，如果先输入文字，然后将输入点置于文字中再插入图片，图片会自动将文字分开。唉——转眼间这个源码发布一年了，时间过得真快啊……
顺便说一句：后来我又做了一个魔法表情功能，可以看这里

2009年10月29日更新：今天发现，有几个问题，Flash Builder beta2自带的SDK已经解决了（下面标出了），看来beta确实是不能用于正式产品啊……

2009年10月8日更新：Flash Builder beta 2发布后，spark组件中有些类的名称修改了，比如TextFilter改为TextConverter，SimpleText改为Label，TextArea.textview.textFlow改为TextArea.textFlow……因此如果使用beta2，那么下面的源码可能不会编译通过，请自行修改。

我发布“在Flex中实现聊天表情图片支持-资料篇”后，便有许多朋友找我要那个范例的源码。我在文章中就已提过那范例是从网上down来，并非我所做，自然没有源码。要源码，用X思，你懂的……

那好吧，源码来了。

例子很简单，所有的代码加起来都不到400行，但做的时候却很痛苦。因为要了解spark组件和FXG的特点，还要了解新的skin的做法。不过总算做好了，总结一下，纠结的地方主要有下面几点：

采用内嵌表情还是采用外部表情图片。
为了获得更小的文件（Flex4比Flex3编译的文件大了200多K），一直是采用外部表情图片的。在本机调试都正常。但上传到网上后，就无法显示图片。调整了swf的base属性之后，图片可以在输入框和文字框中显示，就是不能显示在图片选择面板中。最后一气之下改成了内嵌图片。后来发现有可能是浏览器缓存问题，不过改就改了，也就没再纠缠这个问题。
要注意的是，spark的BitmapImage是不支持外部图片的，必须要内嵌。所以如果要用外部图片，就必须用Halo组件中的Image。而由于TLF中的InlineGraphicElement又仅支持URL或者DisplayObject，而BitmapImage无法提供URL（本来嘛，是内嵌的撒）因此在我将外部图片转成内嵌后，原来的程序出了问题。原因是BitmapImage的source属性返回的是BitmapData对象，如果将其提供给InlineGraphicElement的source属性，就会报错。~~因此在提供图片信息的时候，必须要提供Bitmap才行。~~2010-10-07：正式版的InlineGraphicElement的source属性已经可以支持BitmapData对象了
<图片插入到TextInput之后不更新。
检查发现，InlineGraphicElement已经作为textFlow的元素存在了，但是在TextInput中却不显示出来，但如果再输入一些文字的话，图像又可以显示出来。因此判断是textFlow更新后没有执行flowComposer.updateAllControllers。把这个操作放在StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED事件后就行了。2010-10-07正式版中已经支持自动更新了。
Flex4 spark中的TextInpu焦点定位的怪问题。
在发送输入框文字之后，再将文字清空，如果使用按钮来发送文字，则清空过后还能重新定位回输入框继续输入文字；而如果使用TextInput的enter事件来完成这个动作，则清空后返回虽然能重新定位输入框，并显示闪烁的输入光标，但无论如何也无法输入文字了，必须重新单击一次输入框，才能再次输入。后来用一个变通的方法解决了。就是在为输入框重新设置焦点之前，先将焦点移到按钮上，再移回来…… 很无语Flash Builder beta2自带的SDK（以及后面的SDK）已经解决了这个问题
flowComposer自动清空为null的问题。
flowComposer偶尔会自动清空，造成flowComposer.compose()或者flowComposer.updateAllControllers()失效，后来发现在界面大小变更的时候以及通过text=”设置文字清空的时候，flowComposer都可能会清空为null。而只需要重新将ti或者ta设置焦点就可以填充flowComposer的值。Flash Builder beta2自带的SDK（以及后面的的SDK）已经解决了这个问题
滚动条不更新的问题。
输入的文字超过一屏之后，TextArea会自动出现滚动条。在Halo组件中，我是通过valueCommit事件来更新滚动条，但在spark中没有。不仅valueCommit没用，change等统统没用。后来改为用updateComplete来更新滚动条。其实，如果用textFlow的事件来更新，应该更加保险。
另外，spark的scroller组件也是蛮纠结的，在Halo中用ta.verticalScrollPosition = ta.maxVerticalScrollPosition就可以了，可spark又整了个viewport出来。这不，更新语句又要改成ta.scroller.viewport.verticalScrollPosition=ta.scroller.viewport.contentHeight。
还有几个麻烦的事情，比如ParagraphElement要进行深复制才能用，比如format和hostFormat……算了，不说了，直接看效果好了 :em50:

Note: There is a file embedded within this post, please visit this post to download the file.

在Flex中实现聊天表情图片支持-资料篇

zrong — Mon, 10 Aug 2009 10:03:03 +0000

2011年8月24日09:44:35 更新：重新找到了基于riaidea的TextField的图文混排组件源码，见作者博客

这个组件在对文本进行滚动的时候占用CPU较大，我在30行文本+少量表情滚动的时候，CPU瞬间可达30%以上（AMD羿龙II三核），因此在性能较差的机器上可能感觉滚动会卡。综合目前Flash Player 10的市占率90%以上来考虑，应该使用TLF来开发聊天表情支持功能（其实TLF大量文本滚动也会卡的，但比这个要好些）。见在Flex中实现聊天表情图片支持-实战篇。

2009年10月9日11:09:14 更新：增加riaidea的范例~~，（riaidea的作者自行关闭了googlecode上的开源项目，因此riaidea的源码不能下载了，我也没有源码）~~

2009年9月16日20:34:30 更新：在Flex中实现聊天表情图片支持-实战篇

2009年8月21日09:36:19 更新：Flash Text Engine、Text Layout Framework在Flex、Flash中的实现）

仔细研究了一下Flex支持表情图片，主要有下面三种方法：

使用TextArea，或直接使用TextField的html支持功能，在html中使用标签嵌入表情图片文件。但这样做有两个问题，一是图片文件载入较慢；二是不容易控制载入的图片在文本中的“流向”。虽然可以使用getImageReference获取对图片的引用，但处理起来也比较费力。
将文本中需要插入图像的地方留出空白空间，获取空白空间的位置，并使用图像替代。这种方法的缺点在于每次更新文字内容的时候，所有的图片都要重排位置，对性能有一定影响，尤其是文本和图像比较多的情况下。
使用Flash Player 10提供的flash.text.engine（简称FTE）提供的高级功能进行处理，具体是使用GraphicElement类，这无疑是更好的方法。Adobe提供的Text Layout Framework（简称TLF）就是架设FTE的基础之上的。

下面是一些我搜集的资料，为后面的实战做个记录：

下面这个范例是我在网上找到的，使用的应该是第2种方法。

（2009年10月9日11:16:10更新）再加一个范例：

在关闭AIR程序窗口前显示Alert

zrong — Sat, 28 Feb 2009 17:04:15 +0000

^?Download AIRClose.mxml

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" 
						layout="vertical" showStatusBar="false"
						closing="closeHandler(event)">
	>
		
			import org.zengrong.utils.Dialog;
			private function closeHandler(evt:Event):void
			{
				trace(evt.toString());
				evt.preventDefault();
				Dialog.confirm('确定退出？', _close);
			}
 
			private function _close($yes:Boolean):void
			{
				if($yes) this.nativeApplication.exit();
			}
 
		]]>
	>	
>

有关Dialog的用法与最新源码，详见zrong’s Class（下附源码）

^?Download Dialog.as

package org.zengrong.utils
{
	import flash.display.Sprite;
 
	import mx.controls.Alert;
	import mx.core.Application;
	import mx.events.CloseEvent;
 
	public class Dialog
	{
		public static function alert($info:String, $title:String=''):void
		{
			Alert.show($info, $title, 4, Application.application as Sprite);
		}
 
		/**
		* 弹出confirm确认对话框，根据用户的交互返回是否确认布尔值
		* @param $s	要显示的信息
		* @param $closeFun 关闭确认对话框时调用的函数
		*/
		public static function confirm($s:String, $closeFun:Function):void
		{
			var __fun:Function = function(evt:CloseEvent):void
			{
				$closeFun(evt.detail == Alert.YES);
			}
			Alert.show($s, '', Alert.YES|Alert.NO, Application.application as Sprite, __fun);
		}
	}
}

Flash Player 10中关于TextField的textInput与change事件行为的改变

zrong — Tue, 07 Oct 2008 08:51:14 +0000

偶尔发现原来写的打字测试有问题了，仔细研究了一下，发现是FlashPlayer的原因。

打字游戏中，对文字输入正确与否的判断，我采用的是TextField的textInput事件和change事件。问题就出在这里：将FlashPlayer升级到10以后，这两个事件的行为发生了改变。

在FlashPlaye r10以前，如果在TextField中输入整句的文字，文字有多少个，textInput事件和change事件就会发生多少次。而对于FlashPlayer来说，则是不论文字有多少个，只要是一次输入的，就只会发生一次。这种情况对于英文来说倒是无所谓，但对于中文来讲，由于常用的是词语输入，就会有很大影响。看下面的代码：

^?Download type.mxml

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	 textInput="textInput(event)" change="change(event)" width="100%" height="100%"/>
	>
		
			private function textInput(evt:TextEvent):void
			{
				trace(evt.text, evt.target.length);
			}
 
			private function change(evt:Event):void
			{
				trace(evt.target.text, evt.target.length);
			}
		]]>
	>
>

以输入“白日依山尽”（整句输入）为例，在FlashPlayer 9中，trace的信息如下：

白 0
白 1
日 1
白日 2
依 2
白日依 3
山 3
白日依山 4
尽 4
白日依山尽 5

在FlashPlayer 10中，trace的信息如下：

白日依山尽 0
白日依山尽 5