Flash、Flex、RIA、web、Linux和我的生活
在Flex中实现聊天表情图片支持-实战篇
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来,并非我所做,自然没有源码。不过,也只需要用一个烂大街的方法就能获取源码了(这方法已经被许多老师采用过了,拿一个别人的课件改个名字就能来参赛
),也不知道为啥要源码的同志不想动动手……
那好吧,源码来了。
例子很简单,所有的代码加起来都不到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才行。 - 图片插入到TextInput之后不更新。
检查发现,InlineGraphicElement已经作为textFlow的元素存在了,但是在TextInput中却不显示出来,但如果再输入一些文字的话,图像又可以显示出来。因此判断是textFlow更新后没有执行flowComposer.updateAllControllers。把这个操作放在StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED事件后就行了。 - Flex4 spark中的TextInpu焦点定位的怪问题。(Flash Builder beta2自带的SDK已经解决了这个问题)
在发送输入框文字之后,再将文字清空,如果使用按钮来发送文字,则清空过后还能重新定位回输入框继续输入文字;而如果使用TextInput的enter事件来完成这个动作,则清空后返回虽然能重新定位输入框,并显示闪烁的输入光标,但无论如何也无法输入文字了,必须重新单击一次输入框,才能再次输入。后来用一个变通的方法解决了。就是在为输入框重新设置焦点之前,先将焦点移到按钮上,再移回来…… 很无语
当时在这里发帖求助,可没人理,也无语
- flowComposer自动清空为null的问题。(Flash Builder beta2自带的SDK已经解决了这个问题)
flowComposer偶尔会自动清空,造成flowComposer.compose()或者flowComposer.updateAllControllers()失效,后来发现在界面大小变更的时候以及通过text=”设置文字清空的时候,flowComposer都可能会清空为null。而只需要重新将ti或者ta设置焦点就可以填充flowComposer的值。 - 滚动条不更新的问题。
输入的文字超过一屏之后,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……算了,不说了,直接看效果好了
聊天表情图片支持源码 (41.4 KiB, 1,132 hits)
| 这篇文章由zrong于2009-09-16 15:40发表在技术。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |


Use OpenOffice.org
大约11月前
不错,很强悍。一直在关注着个东西,不过要写这东西也实属不易。总的来说TextLayOut还是比较强大的。我正尝试用你说的第二种办法实现,不过功败垂成。因为在Flex3-TextArea中不能准确的拿到index处字符的位置,所以正在被折磨着。。。
另外,谢谢你例子,源码~
大约11月前
TLF的强大之处,我前面已经介绍了不少,但只有当作了这个例子之后我才有深刻的体会。
其实,这东东制作好了之后,源码就变得没有意义了,我倒是更在乎制作这个东东的过程之中的这些体会,都是经验啊……
大约10月前
能不能发布一个flash build的版本,你这样通不过无法对你的代码不太了解,你的注释也很少。不知你具体形成思路。
大约10月前
这个就是Flash builder beta1做的,之所以通不过编译,是因为beta2改变了太多的东西,要改过来很麻烦。其实我写的这些文字基本上就可以看做是注释了,只不过主要是记录了一些经验,没有形成教程。不过这东东很简单,我也没用模式和框架,你认真看看源码就行啦。
大约8月前
请问你这个能在Flex3编译吗??还有http://www.zengrong.net//wp-content/uploads/2009/08/smilies_demo.swf这个你是在哪里找到的呢??
大约5月前
为什么在flash builder 4 beta2 中不能正常运行呢?
大约5月前
FB beta2 中很多类名和命名空间都变了。
大约5月前
请问有Flex 3的版本的吗??
大约5月前
Flex Builder4正式版之后,您的TextInput不支持TextFlow了…而且…更换了相应的组件名称及方法之后..在input和area里面还是不能显示表情图片…这是怎么回事啊..在调试阶段输出的是一个框(乱码?)这表示应该是有东西输出的…但是为什么在文本框中显示不不来呢..是不是InlineGraphicElement对象不能在文本框中显示啊.??
大约5月前
在正式版中的更改了一些类名..及相应属性…可以运行,,但是表情在文本框中无法显示…而且TextInput是不支持TextFlow的…..不我改成了TextArea应该没问题的…就是图片不能显示..选择表情之后…在文本框中有这个东西..调试过..看到了有一个类似乱码的小方格…这代表有东西输出..但为什么不能显示呢..??
大约4月前
正式版又改了一些类名和命名空间,可能会出问题。
看看。
你可以看一下正式版的中文帮助,如果还不行。可将源码发到
大约4月前
flex3的你可以看看这个:http://www.zengrong.net/?p=721
大约4月前
744712559@qq.com 发我一份 源码可以吗
大约2月前
我把textflow 传出去 再传回来就是object 了,无法转换为textflow了,
大约2月前
传出去之前先转成HTML,收到之后再从HTML转成textflow,这样就没问题了。
大约1月前
牛人
大约3周前
你好问个问题
现在flash player10.1中textArea的自动滚动到最低端(flex3用的valueCommit更新verticalScrollPosition属性值)现在不起作用了,10.1之前的版本没有问题,盼解答,谢谢~
大约2周前
cs3可以运行不啊
大约2周前
不可以
大约2周前
用的是spark组件还是mx组件?
大约1周前
你得源码下来看了,在flash builder 中text input 没有text flow,于是我改成textArea,但是textArer插不进去图片,不知你试过没?原因是什么啊?
大约1周前
你TextArea用的是spark的么?这个源码是用beta sdk写的,所以你用正式的sdk编译,会有问题的。