2008年5月3日 星期六

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">chathttp://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="400" id="chat" align="middle">http://www.macromedia.com/go/getflashplayer" />-------------------------------------------------------------------
把chat.fla匯出成swf檔,然後把所有檔案上傳到伺服器,就可以執行囉。大家也可以試著把layout改得更好看點,就是個簡單好用的聊天介面囉。
張貼留言

Google幫你找

使用Google搜尋站內文章 輸入關鍵字