先做好背景及版面的設定，如下圖所示：

圖 1

分別在各淡藍色欄位範圍上方放入Text Field，並在 Text Field 的 Properties 對話方塊中分別設置如下的參數設定：

1.將"大家的話"欄位的 Text Field 參數設定如下圖所示：

圖 2

2."目前聊天室"、"我的暱稱"及"我想說的話"等三個欄位的Text Field 參數設定如下：

Variable：分別命名為 "name"、"user"及 "msg"。

Option：只勾選 "Restrict text length to .."項，並設限制文字數為 100 。

Outlines：都勾選第一項。

※TextField 參數設定詳細說明請參考註解一。

1.製作一按鈕，命名為"BtSend"，設其Actions如下：

　On (Release,Key:<Enter>)
　　Load Variables ("dochat.asp?action=send", "", vars=POST)
　　Set Variable:"msg"=""
　End On

圖 3

2.製作另一按鈕，命名為"BtClear"，設其Actions如下：

On (Release)
　 Load Variables ("dochat.asp?action=clear", "", vars=POST)
End On

3.另外製作三個與上述類似的按鈕，分別命名為BtPause、BtUpdate及BtStart，Actions先暫不要設定。

4.製作兩個內含箭頭的圓形按鈕，分別命名為BtScrollUp及BtScrollEnd。另外再作一個使用說明的按鈕命名為BtHelp，一樣先不設Actions。

5.按鈕完成後如下圖：

圖 4

1.先新增一MovieClip，命名為mScrollControler。將MovieClip的Layer1改名為"Buttons"，並新增一Layer名為"Actions"。

2.在MovieClip編輯畫面中，將上個步驟中作好的捲軸按鈕：BtScrollUp及BtScrollEnd 放到Layer Buttons 的場景中(Frame 1)，並將 Frame 3設成KeyFrame。(MovieClip影片長度設為 5個Frame)

3.將 Frame 1中的 BtScrollEnd 按鈕的Behavior 改成Graphic，如下圖所示，並將其Alpha 值調到 45%：

圖 5

※此步驟的目的是讓 Frame 1的 BtScrollEnd 按鈕(捲到底部)在平時是呈淡色表示沒有作用，只有在按下 BtScroollUp 按鈕(向上捲一行)時(也就是跳到 Frame 3 時)才會有作用。

4.將 Frame 1 及Frame 3中 BtScrollUp 的Actions設定如下：

　On (Press)
　　Go to and Stop (3)
　　Set Variable: "/:list.scroll" = /:list.scroll -1
　End On

5.將 Frame 3 中 BtScrollEnd 的 Actions 設定如下：

　On (Release)
　　Go to and Play (1)
　End On

※注意：是 Go to and Play 而不是 Go to and Stop

6.在 Layer Actions 中的 Frame 2 及Frame 3 分別插入Blank KeyFrame；然後在 Frame 1設定 Actions 如下：

　Set Variable: "/:list.scroll" = /:list.maxscroll -1

7.在 Layer Actions 中的 Frame 2 設定 Actions 如下：

　Go to and Play (1)

8.回到 Scene 1 中，將做好的捲軸按鈕MovieClip放到適當位置。

※捲軸參數 .scroll 及 .maxscroll 解說見註解二。

1.先新增一MovieClip，命名為mUpdating。將MovieClip的Layer1改名為"Buttons"，並新增一Layer名為"Actions"。

2. 在MovieClip編輯畫面中，將步驟四中作好的按鈕：BtPause放到Layer Buttons 的場景中(Frame 1)，並將 Frame 13插入BlankKeyFrame，置入BtUpate 及 BtStart。(MovieClip影片長度設為 13個Frame)

3.在 Layer Actions 的 Frame 12 及 Frame 13插入 Blank KeyFrame，並將 Frame 13 的 Label 設成 "pause"。

4.作一個Graphic Symbol內容為"更新中"的文字動畫，完成後將該Symbol放到Frame 1的 BtPause旁，如下圖所示。

圖 6

5.將 Frame 1 中 BtPause 的Actions設定如下：

　On (Release)
　　Go to and Stop ("pause")
　End On

6.將 Frame 13 中 BtUpdate 的Actions設定如下：

　On (Release)
　　Begin Tell Target ("/")
　　　Load Variables ("dochat.asp?action=update", "", vars=POST)
　　End Tell Target
　End On

7.將 Frame 13 中 BtStart 的Actions設定如下：

　On (Release)
　　Go to and Play (1)
　End On

8.將 Layer Actions 中的 Frame 1 的 Actions 設定如下：

　Begin Tell Target ("/")
　　Load Variables ("dochat.asp?action=update", "", vars=POST)
　End Tell Target

9.將 Layer Actions 中的 Frame 12 的 Actions 設定如下：

　Go to and Play (1)

10.為增加畫面活潑性，可另外製作小循環動畫(如本範例中滾動的小球)放入MovieClip中。

11.回到 Scene 1 中，將做好的更新畫面按鈕MovieClip放到適當位置。

1.先新增一MovieClip，命名為mHelp，將步驟四中做好的 BtHelp 按鈕放到MovieClip的場景中，並在 Frame 2 插入 KeyFrame。

2.將 Frame 1 中 BtHelp按鈕的 Actions設定如下：

　On (Release)
　　Go to and Stop (2)
　End On

3.將 Frame 2 中 BtHelp按鈕的 Actions設定如下：

　On (Release)
　　Go to and Stop (1)
　End On

4.將 Frame 1 的 Actions 設定成 Stop。

5.回到 Scene 1 中，將做好的Help按鈕MovieClip放到適當位置。

6.選取場景中的mHelp MovieClip，用滑鼠右鍵開啟快速選單，選 Edit in Place(在原地編輯)進入mHelp MovieClip的編輯模式。

7.在MovieClip的 Frame 2 中，BtHelp鈕(問號鈕)的左上方繪一圓角方形填色區(概略覆蓋下方的所有欄位的範圍)，並在其上置入聊天室的使用說明文字，如下圖所示：

圖 7

8.完成後回到Scene 1中。

1.在 Scene 1 Timeline的Frame 1 中設其Frame Actions如下：

　If (id eq "")
　　 Set Variable: "id" = "易學網聊天室"
　End If
　If (user eq "")
　　Set Variable: "user" = ""
　End If

2.用File > Publish Settings 在出版設定對話框的Formats(輸出格式)頁籤中勾選 "Html" 項，檢查及調整各頁籤的設定，確定無誤後，按Publish鈕輸出。

3.用網頁編輯軟體(如Dreamweaver)將剛才輸出網頁中的 Falsh 物件位置設成居中。

4.完成下述的ASP部分後，將一干檔案(chat.html、chat.swf和dochat.asp)上傳到網站中，測試無誤即大功告成。

用Window附屬應用程式中的記筆本，輸入下列黑色部分文字(紅色及藍色為說明文字，不用輸入)：

<%

Response.Expires = 0
將 Response.Expires 的值設為零這樣用戶端的瀏器就不會使用Cache(快取)來讀取資料，如此才可以即時下載網頁的資料。

action = Request.QueryString("action")
使用 QueryString 來讀取用戶端 Flash 中 Load Variables指令的 action 參數。

使用 Form 來讀取用戶端 Flash TextField(表單欄位)中的變數：
msg = Request.form("msg")　讀取 TextField："msg" 欄位 (我想說的話)
user = Request.form("user")　讀取 TextField："user" 欄位 (我的暱稱)
id = Request.form("id") 　 　 讀取 TextField："id" 欄位 (目前聊天室)
If Len(id) = 0 Then 　
　　　id = "default"
如果使用者未輸入聊天室的名稱時將它預設為 default 聊天室
End If

Application.Lock
ASP 的 Application 物件是用來供所有上線的使用者來存取資料，如要變更 Application 物件中的變數時要先呼叫 Lock，在變更完後再做Unlock
If action = "send" Then
如果使用者按《說出來》鈕呼叫"send"action的話，就將"msg"欄位(我想說的話)中的文字加到 Apllication 物件 id 的參數中
　　　 list = Application(id)
　　　 list = list + user + ": " + msg + chr(13)
　　　 Application(id) = list
ElseIf action = "clear" Then
如果使用者按《清除畫面》鈕呼叫"clear"action的話，就將 Apllication 物件 id 參數中的資料全部清除　
　　　 list = "" Application(id) = list
Else 'If action = "update" Then
如果使用者在暫停狀態時跳到其他聊天室，按《更新一下》鈕呼叫"update"action可更新 Flash Movie 中的聊天視窗的內容為新聊天室的內容。
　　　 list = Application(id)
End If
Application.Unlock

將資料傳回 Flash Movie 中的 list 欄位(大家的話)
response.write("list="+Server.URLEncode(list))
設定在 Flash 使用 Load Variables 讀取文字資料時，文字資料的格式必須為 URL Encoding 格式。

%>

 

完成後存檔名為dochat.asp。