ActionScript3.0教學 - 互動聊天介面

Flash的應用愈來愈多元化，尤其是網路介面的層面，更加強了互動性。今天就要和大家分享一下用Flash 來製作聊天室功能的介面，有點類似Web MSN 的功能，配合ASP做成網頁，對ActionScript有興趣的讀者一定要試試唷。
以下是ActionScript的內容 ，檔名chat.fla
--------------------------------------------------------------------以下為程式碼
//強迫以本機編碼顯示，這樣載入中文時將不會產生亂碼
System.useCodepage = true;
//宣告介面中所使用到的組件的實體物件
var send_btn:mx.controls.Button;
//送出按鈕var send_txt:mx.controls.TextInput;
//輸入聊天內容的文字欄位var show_txt:mx.controls.TextArea;
//顯示聊天內容的文字區域var yourname_txt:mx.controls.TextInput;
//輸入自己姓名的文字欄位
//宣告一個LoadVars類別的物件，用來載入和送出聊天的內容
var my_lv:LoadVars = new LoadVars();
//下面的onData事件，將在取得聊天內容的資料時發生
my_lv.onData = function(data) {
//判斷取得的資料data是否為空
if (data != undefined) {
//在文字區域中顯示聊天內容
show_txt.text = data;
//如果聊天內容超過了一屏，將文字區域中的資料滾動到最下方
show_txt.vPosition = show_txt.maxVPosition;
} else {
//如果沒有聊天內容，顯示的提示訊息
show_txt.text = "無聊天記錄!";
}};
//載入聊天室chat.asp檔案的聊天內容
my_lv.load("chat.asp", my_lv, "POST");
//為【送出】按鈕添加click監聽器，當點擊按鈕時呼叫送出聊天內容的函數。send_btn.addEventListener("click", btn_onClick);
//為【輸入聊天內容】文字欄位添加enter監聽器，當在文字欄位中輸入聊天內容，然後按下鍵時呼叫送出聊天內容的函數。
send_txt.addEventListener("enter", btn_onClick);
//送出聊天內容的函數
function btn_onClick() {
//下面兩行?述分別用來指定聊天的內容和姓名
my_lv.talk = send_txt.text; my_lv.yourname = yourname_txt.text;
//將取得的資料以POST方式送出到chat.asp頁面
my_lv.sendAndLoad("chat.asp", my_lv, "POST");
//聊天內容送出清空文字欄位中的聊天內容
send_txt.text = "";
//並將焦點設定到送出聊天內容的文字欄位中
send_txt.setFocus();}
//設定每隔一秒鐘呼叫一次readData()函數
setInterval(readData, 1000);
function readData() { my_lv.talk = ""; my_lv.yourname = "";
//重新讀取聊天內容 my_lv.sendAndLoad("chat.asp", my_lv, "POST");
}
-----------------------------------------------------------------程式結束
這是搭配的ASP程式碼，檔名是chat.asp
--------------------------------------------------------------------以下為程式碼
<%
talk = Trim(Request("talk"))
yourname = Trim(Request("yourname"))
If talk <> "" Then Application.Lock()
out = out & "來自"
out = out & Request.ServerVariables("REMOTE_ADDR") & "的 "
out = out & yourname & now & " 說：
" & talk & "
"
Application("show") = Application("show") & out
Application.UnLock()
End If
Response.Write(Application("show"))
%>
-----------------------------------------------------------------程式結束
這是chat.html 的內容
----------------------------------------------------------------http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW">-------------------------------------------------------------------
把chat.fla匯出成swf檔，然後把所有檔案上傳到伺服器，就可以執行囉。大家也可以試著把layout改得更好看點，就是個簡單好用的聊天介面囉。