多媒體系統與應用

<期中報告>

GuiTalk

系所: 資訊工程學系 99級

姓名: 陳鏡宇
學號: F74952079
目錄
一、 專題簡介.............................................................................. 2

二、 研究背景及目的 .................................................................. 3

三、 研究方法.............................................................................. 4

1. 文獻蒐集與研讀 .......................................................................................... 4
2. 資料分析與方法設計................................................................................... 4

四、 實驗及測試評估 .................................................................. 5

五、 結論 ................................................................................... 13

六、 參考文獻............................................................................ 15

1
 一、 專題簡介
傳統的網路聊天室功能，就只是單純的以暱稱和顏色區分大家，使得在聊天時，
無法活生生的表現出動態畫面，然而若是採用及時通訊軟體+攝影機又讓人們必
須盛裝上線，或是擔心會有偷拍危機。希望能打造一個完全虛擬的平台，讓人們
可以在上面有所互動聊天，同時又有CG的圖案可以呈現個人風格特色，或是即
時的心情，但有別於網路當紅的Second Life或是一些坊間的聊天類型網路遊戲，
這是一個完完全全建構於瀏覽器基礎的虛擬聊天環境，只要開啟瀏覽器就能溝通
聊天，不需要安裝任何軟體。

時下流行的各式聊天工具

2
二、 研究背景及目的
架構一個簡單好用的平台，讓大家能夠享受以文字為主、圖形為輔的聊天樂趣，
同時使用者不需安裝瀏覽器以外的任何程式，使這個平台能夠真正達到跨平台的
優勢，拉攏生活週遭不同領域的朋友。

再者由於近來人們逐漸習慣以影像模式思考，像是網路媒體老大YouTube的迅速
竄紅就是最佳的寫照，人們開始喜歡以影像來表達自己的想法，因此我的目的是
打造一個能夠以影像視覺為主，文字訊息為輔的聊天空間，使得表達現在心情這
件事情變得再簡單不過。

即時的 千變萬化
訊息 的互動

生動的 簡潔的
CG 操作
GuiTalk

3
三、 研究方法

1. 文獻蒐集與研讀

研讀 PHP 網站開發相關書籍，以及 AJAX 或是 Flash 等 Client 端的應用程式開發，

最後以純手工繪製專案使用的插圖，並融合網路上各種多媒體應用的新鮮點子，
盡可能的與專案做最完美的搭配。

2. 資料分析與方法設計

預期以這樣的架構來實現：

Server 端

ＭySQL 資料庫

PHP 程式

非同步資料傳輸

Client 端

Flash 技術

或是

瀏覽器 UI
4
 四、 實驗及測試評估
成果測試網址:
http://proj.ncku.edu.tw/color/chat/GuiTalk.htm

 實驗環境之設定

 Server 部分:
PHP 部分運用 AMFPHP 這個套件進行資料結構上的包裝，以便跟 MySQL
資料庫進行資料的傳遞。

資料庫的結構圖:

5
實作與資料庫溝通的 class:

管理介面:

6
 Client 部分:
完全使用 Flash 技術實作 UI、訊息傳遞、動畫。UI 以及訊息的傳遞部分，
是使用 ActionScript 3.0 撰寫。由於每 500 毫秒會進行一次資料的交換，
因此使用者會有即時傳遞的感受。
(見下頁圖)

7
程式碼架構: (細節已省略)

8
  測試評估與系統整合

操作流程:

連結網頁

檢查資料是否填妥

登入作業

開始聊天
隨意觸發內定事件動畫 使用模式
事件選擇有: 1. 當做 twitter 自言自語
1. 滑鼠放到臉上後 2. 與朋友聊天
可搔癢自己或對方
2. 在臉上點擊滑鼠可觸發
揍人事件 關閉網頁
3. 在文字部分輸入”生氣
了!!”會有對應生氣表情

9
執行畫面:

登入畫面:

10
聊天畫面:

搔癢畫面:

11
揍人畫面:

生氣畫面:

12
 五、 結論

面這張圖是本次 project 一開始的預估行程和最後的實踐行程:

時程規劃與實踐

實際進度

資料蒐集
架構實作
動畫製作
預估進度

占據整體時程

可以很容易的看出，理想與現實有段大大的差距，原因在於一開始方向沒有很快確定下
來，原始想法是發展出與其他產品的區隔性，因此一直在構思怎樣把創意融入單調的聊
天情境當中，因此一開始的企圖是要做出一個擬真的情境，有多種角色的選擇，然後為
了拉攏目前微網誌的廣大用戶，還要有同步更新現有微網誌的功能等等。

不過在開始的資料蒐集階段就遇到了不知道要用哪種技術實作的窘境，原本想嘗試使用
AJAX 技術，搭配上時下流行的 JavaScript FrameWork，然而在蒐集這方面的資料一段
時間過後，才驚覺 JavaScript 不太適用於圖形動畫，畢竟圖形動畫是 Flash 的強項，雖
然 JavaScript 多少也可以結合 GIF 圖檔做出類似效果，但是諸多的不便之處，會讓人覺
得綁手綁腳。

因此拖了一段時間之後才開始研究 Flash 的 ActionScript 3.0 語法，由於前期準備時間太

過冗長，壓縮到最後的實作時間，使得整體架構不斷的簡化，最後的結果是聊天功能大
致完善無誤，然而延伸功能和互動功能稍嫌單薄。

在後期的動畫繪製上也遇到了很多瓶頸，由於我本身比較擅長使用 Illustrator 軟體繪製

向量圖型，因此 Flash 的繪圖工具用起來非常的不順手，又若使用轉換匯入的功能會有
層出不窮的物件管理問題，使得最後只有時間完成我的人頭部分。另外因為並不熟悉

13
Flash 的操作流程，加上 Flash 這軟體，想達到同樣的目的竟有百百款的方式，比方說
我要使用程式碼操控圖形的運動，就有三種把圖形轉換成程式物件的方式，又三種方式
都有優缺點，在美工繪製也有很多的差異點，使得我一直來回在美工與程式碼間修修改
改，非常的惱人。

整體來說，這次的 project 讓我學到了很多新的技術，縱使很多地方用起來還不是非常

熟練，但算是在這些我不熟悉的領域邁開了第一步。

14
六、 參考文獻

 http://www.w3schools.com/

 JQuery in Action by Bear Bibeault, Yehuda Katz,John Resig

 AJAX & PHP－Web2.0 網站開發手札 by Cristian Darie

 Flash ActionScript 3 殿堂之路 by 孫穎

15