我的聊天室開發教程(二):添加聊天表情
2004年11月28日13:39星期日 [
FMS
]
這個問題是網友提到的最多的問題,也的確是我在開發過程中遇到問題最多的地方。今天大致歸納下,不知道能不能全面。
主要是因為Flash本身對HTML的支持程度不足,才導致在Flashcom應用程序中使用表情符號要通過其它方式來處理。網上也有不同的實現方式,但是我認為smileyTextField組件是最方便的一種。
SmileyTextField表情組件介紹
更多的表情實現方法
但是,結合到FlashCom應用程序中,卻很多問題:
1. 表情符號總是顯示在第一行
2. 表情符號位置Y坐標偏移
3. 表情組件對新版List組件的影響
4. 表情組件的中文字符顯示問題
經過不斷的測試和交流,在Flashcom聊天室中集成表情組件的問題都已經解決,請詳細閱讀和參考以上日志。完整的SmileyTextField代碼請參考源文件。
主要影響到的和需要修改代碼的組件是:PeopleList組件和Chat組件。
Chat組件主要是要修改和和服務器端的結合部分,因為SmileyTextField組件只是負責前端顯示的轉換,同步工作仍然要通過FlashCom服務器。這部分的具體實施細節留待Chat組件的使用描述。
這里再講下如何添加自己的表情符號,一般使用默認的表情符號也夠用了。因為,要添加自定義的表情符號有些復雜。
首先,找到隱藏的assets圖層,選中smiLibrary_mc實例->編輯后,可以在第二幀找到表情MC庫,除了添加自定義表情MC為,不要忘了注冊表情實例,通過使用registerSmiley(smiVarsObj)方法。
smiVarsObj是一個表情對象,主要包含屬性:
注冊方法如:
曾經一直想把SmileyTextField組件的顯示框換成V2組件的文本框,但是問題很多,有朋友解決不妨交流下
主要是因為Flash本身對HTML的支持程度不足,才導致在Flashcom應用程序中使用表情符號要通過其它方式來處理。網上也有不同的實現方式,但是我認為smileyTextField組件是最方便的一種。
SmileyTextField表情組件介紹
更多的表情實現方法
但是,結合到FlashCom應用程序中,卻很多問題:
1. 表情符號總是顯示在第一行
2. 表情符號位置Y坐標偏移
3. 表情組件對新版List組件的影響
4. 表情組件的中文字符顯示問題
經過不斷的測試和交流,在Flashcom聊天室中集成表情組件的問題都已經解決,請詳細閱讀和參考以上日志。完整的SmileyTextField代碼請參考源文件。
主要影響到的和需要修改代碼的組件是:PeopleList組件和Chat組件。
Chat組件主要是要修改和和服務器端的結合部分,因為SmileyTextField組件只是負責前端顯示的轉換,同步工作仍然要通過FlashCom服務器。這部分的具體實施細節留待Chat組件的使用描述。
這里再講下如何添加自己的表情符號,一般使用默認的表情符號也夠用了。因為,要添加自定義的表情符號有些復雜。
首先,找到隱藏的assets圖層,選中smiLibrary_mc實例->編輯后,可以在第二幀找到表情MC庫,除了添加自定義表情MC為,不要忘了注冊表情實例,通過使用registerSmiley(smiVarsObj)方法。
smiVarsObj是一個表情對象,主要包含屬性:
-
_w?
:?
表情MC的寬度
-
_h?
:?
表情MC的高度
-
_code?
:?
表情對應的代碼
-
_link?
:?
表情對應的實例名
-
_anim?
:?
是否有動畫
-
_code和_link屬性是必須的,其實還有_show?和?_base?屬性不太常用,可以不用理會。
注冊方法如:
1 : #initclip 2
2 : SMI_NS.registerSmiley({ _code:':kiss:', _link:'smi_kiss', _w:37, _anim:true });
3 : #endinitclip
2 : SMI_NS.registerSmiley({ _code:':kiss:', _link:'smi_kiss', _w:37, _anim:true });
3 : #endinitclip
曾經一直想把SmileyTextField組件的顯示框換成V2組件的文本框,但是問題很多,有朋友解決不妨交流下