|
VỌC MÁY TÍNH
CÙNG NHẠC SĨ HOÀI AN |
|
Dùng Microsoft Agent
để tạo “nhân viên bán hàng” cho Website
HOÀI AN |
|
 |
|
Với ý tưởng áp dụng
công nghệ Microsoft Agent vào một Website bán sách trực
tuyến, bạn có thể dùng một nhân vật nào đó để giới thiệu
chi tiết hơn về một cuốn sách, khi khách hàng nhấp chuột
vào hình ảnh tương ứng trên Website (về sau, thậm chí
bạn có thể nhờ “nhân viên” đặc biệt này hướng dẫn cách
đặt hàng trực tuyến cho khách hàng). |
|
1.
Nạp các điều khiển ActiveX vào Website |
|
Các điều khiển
Microsoft Agent và Lernout and Hauspie TruVoice TTS
Engine cần phải nạp vào Website khi bạn muốn sử dụng
Microsoft Agent thông qua thẻ <OBJECT>. Trước hết bạn
nạp điều khiển Microsoft Agent, và đặt tên “agent” cho
thuộc tính ID để thuận tiện cho việc lập trình sau này: |
|
<OBJECT ID="agent" WIDTH="0" HEIGHT="0"
CLASSID="CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"
CODEBASE="#VERSION=2,0,0,0">
</OBJECT> |
|
Kế đến bạn thực hiện
tương tự bước trên cho điều khiển Lernout and Hauspie
TruVoice TTS Engine: |
|
<OBJECT WIDTH="0" HEIGHT="0"
CLASSID="CLSID:B8F2846E-CE36-11D0-AC83-00C04FD97575"
CODEBASE="#VERSION=6,0,0,0">
</OBJECT> |
|
Đối tượng này được điều
khiển ActiveX Microsoft Agent sử dụng để “đọc” phần văn
bản mà nhân vật phải thể hiện. Trình duyệt sẽ tải về các
điều khiển này từ trang Web của Microsoft nếu như chúng
chưa được cài đặt trên máy tính duyệt trang Web có
Microsoft Agent. Thuộc tính CODEBASE sẽ mô tả đường dẫn
để tải điều khiển và phiên bản của điều khiển đó. |
|
2.
Tải các trạng thái và hành vi của nhân vật |
|
Bạn cần nạp nhân vật
kèm theo các hành vi của nó trước khi sử dụng. Phương
thức Load() có hai tham số: tham số đầu tiên mô tả tên
để lập trình tương tác nhân vật sau này, và tham số thứ
hai chỉ đường dẫn của tập tin dữ liệu nhân vật:
peedy.acs. Trong ví dụ này các tập tin cần thiết đều
được cài đặt lên máy tính cục bộ, bạn có thể tải các tập
tin này tại đây rồi
tiến hành cài đặt lên máy tính của mình. Nếu cần bạn
thay đổi đường dẫn đến tập tin nhân vật trong đoạn mã
sau cho phù hợp: |
|
var parrot;
function loadAgent() {
agent.Connected = true;
agent.Characters.Load( "peedy",
"C:/WINDOWS/msagent/chars/peedy.acs" );
parrot = agent.Characters.Character( "peedy" );
parrot.LanguageID = 0x0409;
parrot.Get( "state", "Showing" );
parrot.Get( "state", "Speaking" );
parrot.Get( "state", "Hiding" );
parrot.Get( "animation", "Greet" );
parrot.MoveTo( screenLeft, screenTop - 100 );
parrot.Show();
parrot.Play( "Greet" );
parrot.Speak( "Hello. My name is Peedy ! " +
"Click a book icon, and I'll tell you about it." );
parrot.Play( "GreetReturn" );
parrot.Get( "animation", "Idling" );
parrot.Get( "animation", "MoveDown" );
parrot.Get( "animation", "MoveUp" );
parrot.Get( "animation", "MoveLeft" );
parrot.Get( "animation", "MoveRight" );
parrot.Get( "animation", "GetAttention" );
} |
|
Trong đoạn mã trên, giá
trị 0x0409 của thuộc tính LanguageID có ý nghĩa ngôn ngữ
dùng là tiếng Anh, vì Microsoft Agent cho phép nhân vật
sử dụng nhiều thứ tiếng. Phương thức Get() của nhân vật
sẽ cho phép bạn “lấy” những trạng thái hoặc hoạt hình (ở
tham số thứ nhất) và hành vi đáp trả (ở tham số thứ
hai). Cụ thể hơn, bạn cần những hành vi nào thì “lấy”
hành vi đó. Trong các hành vi được sử dụng ở ví dụ này
còn có cả những hành vi khi “rãnh rỗi” của nhân vật sau
một khoảng thời gian không có tác động, rất vui mắt và
ngộ nghĩnh. Đoạn mã trên cũng bao gồm phần tự giới
thiệu của nhân vật (chú vẹt) khi mới xuất hiện. Cuối
cùng, khi trang Web khởi động cũng là lúc bạn gọi hàm
khởi tạo nhân vật: |
|
<BODY BGCOLOR="pink" ONLOAD="loadAgent()"> |
|
3. Tổ
chức hình ảnh và lời chú thích |
|
Bạn khai báo mảng các
lời chú thích cho từng cuốn sách, vì đây chỉ là ví dụ
nhỏ nên các lời chú thích sẽ đặt ngay trong kịch bản
trang Web. Trong thực tế, bạn cần tổ chức cơ sở dữ liệu
(cả phần hình ảnh cũng là dữ liệu) riêng biệt với mã
nguồn chương trình. Kế đến bạn thiết kế hai hàm:
explain() và
chooseImage() cho phép nhân
vật di chuyển đến đúng vị trí để thuyết minh về cuốn
sách: |
|
function chooseImage( tip ) {
parrot.Stop();
for ( var i = 0; i < document.images.length; ++i )
if ( document.images( i ) == tip )
explain( i );
}
function explain( element ) {
image_Selected= document.images( element );
image_Selected.style.background = "red";
parrot.MoveTo( image_Selected.offsetParent.offsetLeft,
image_Selected.offsetParent.offsetTop + 100 );
parrot.Speak( explanations[ element ] );
} |
|
4.
Kết nối các sự kiện |
|
Tùy theo phần thiết kế
giao diện, bạn sẽ tính toán tọa độ di chuyển cho nhân
vật khi người lướt Web chọn một cuốn sách nào đó. Ở ví
dụ này, khi bạn rê chuột lên hình bìa một cuốn sách nào
đó, sẽ xuất hiện một dòng chú thích nhỏ, ngắn gọn. Và
khi bạn nhấp chuột lên hình bìa đó... chú vẹt sẽ di
chuyển đến rồi thuyết minh về cuốn sách. Tất cả việc kết
nối đơn giản chỉ là lời gọi hàm
chooseImage(hình được chọn) khi có sự kiện nhấp
chuột. |
|
<TD ALIGN="CENTER" VALIGN="top" WIDTH="400">
<IMG NAME="Symbian" SRC="Symbian.jpg"
ALT="Symbian OS Programming" BORDER="0"
ONCLICK="chooseImage( this )">
<BR>Symbian OS Programming</TD> |
|
|