Flash, ASP

《原文作者 Matt Duckhouse

Macromedia 的 Flash 常常只被用來製作惱人的網站簡介,讓人們一看到就想馬上跳過。自從最新版的 Flash 包含了和 ASP 或其他由伺服器所動態產生網頁的溝通能力,現在你便可以做更多的事情囉!

這一篇文章會解釋如何將 Flash 影片連結至 Access 資料庫,使用 ASP 頁面來查詢資料庫,然後處理資訊傳遞給 Flash 影片。我們將會建立一個非常簡單的 Flash 通訊錄用來示範這個技術。

你還需要一些工具來建立這個通訊錄: Macromedia Flash 5、Internet Information Services 4.0 (或 IIS 5.0) ,還有一份 Microsoft Access。

也可以下載完整的範例原始檔案,看看完成後的成品。

 

基本原理

Flash 影片沒有辦法直接查詢資料庫,然而,它可以讀取 ASP 頁面,而 ASP 就可以查詢資料庫了。這個方法的中心圍繞在 Flash 的 ActionScript 函數 loadVariables 身上,像是下面這樣:

loadVariables(URL, location);

loadVariables 函數會取回 URL 所指定的內容,並且根據內容來設定 Flash 影片內部的變數。這個內容必須為 Multipurpose Internet Mail Extension (MIME) 格式或 application/x-www-urlformencoded。舉例來說,如果某個 URL 指定的頁面包含下面這樣的內容:

Var1=Test&Var2=Demo

那麼 Flash 影片中的變數 Var1 會被設為 "Test",變數 Var2 會被設為 "Demo"。變數都可以透過 Flash ActionScript 來存取,用來控制影片內容的行為。在我們的範例中就要使用這樣的動作,從 Access 資料庫的傳遞資料到 Flash 影片,這些資料當然是透過 ASP 頁面查詢。

 

資料庫設計

首先讓我們來建立資料庫。這個通訊錄非常的陽春,所以資料庫只需要單一個資料表 "Contacts" 即可,裡面有五個欄位:ContactID, Name, Telephone, City, 和 Notes。

欄位名稱 類型 大小
ContactID 自動編號 -
Name 文字 50
Telephone 文字 50
City 文字 50
Notes 備註 -

這個資料庫檔名為 "AddressBook.mdb",放在和 ASP 以及我們將要製作的 Macromedia Flash SWF 格式檔案同一個目錄中。(SWF 是 Macromedia Flash 用來在網路上傳送圖形、動畫以及聲音的檔案格式,大約 90% 的網頁使用者不需要安裝 plug-in 就都可以看到 SWF 的內容。)

 

ASP 的設計

讓我們來看一下這個 ASP 頁面,抓取通訊錄資料庫中的記錄用的。

<%
'建立資料庫連線
Set DataConn = Server.CreateObject("ADODB.Connection")
DataConn.Open "Driver=Microsoft Access Driver (*.mdb);DBQ=" & _
Server.MapPath("AddressBook.mdb")

'建立 Recordset 物件
Set cmdTemp = Server.CreateObject("ADODB.Command")
Set rstContacts = Server.CreateObject("ADODB.Recordset")

cmdTemp.CommandText = "Select * From Contacts"
cmdTemp.CommandType = 1
Set cmdTemp.ActiveConnection = DataConn

'開啟資料集
rstContacts.Open cmdTemp, , 1, 3

'移動至某一筆記錄
rstContacts.Move CLng(Request("Record"))

'產生資料格式,傳遞給Flash使用
Response.write "Name=" & Server.URLEncode(rstContacts("Name")) & "&"
Response.write "Telephone=" & Server.URLEncode(rstContacts("Telephone")) & "&"
Response.write "City=" & Server.URLEncode(rstContacts("City")) & "&"
Response.write "Notes=" & Server.URLEncode(rstContacts("Notes")) & "&"
Response.write "TotalRecords=" & rstContacts.RecordCount

'結束,關閉物件
rstContacts.Close
DataConn.Close
%>

這個頁面假設我們會先傳遞在資料庫中我們想要的一筆記錄給它,然後它就用 Server.URLEncode 指令,建立出 MIME 格式的資訊傳回來。

這個 ASP 頁面典型的輸出應該像是下面這樣:

請注意:我們從 ASP 頁面額外多輸出了一項資訊(資料庫欄位以外的),就是 "TotalRecords"。這是個數字變數,存放通訊錄中總共有多少筆資料。這樣可以幫助 Flash 影片瞭解何時到達了通訊錄的最後一筆記錄。

我們的 ASP 頁面叫做 "GetDetail.asp",也會和資料庫以及 Flash 檔案一樣儲存在同一個目錄下。

 

Flash 的設計

資料庫和查詢用的 ASP 頁面都建立好後,接下來便是加入 Flash 影片,讓通訊錄的前後端都有了。讓我們從一個新的影片開始,然後在裡面插入一個空白的影片片段(Movie Clip)元件。

這個影片片段元件將會是我們的通訊錄,裡面包含了五個文字欄位(提供顯示資訊用的)和兩個按鈕(向左向右按鈕來瀏覽上一筆下一筆記錄)。通訊錄看起來像下面這樣:

文字欄位建立為動態文字(Dynamic Text),而且每個都有指定變數名稱,讓我們可以在 ActionScript 中控制文字欄位的內容。

Look at what happens when the movie clip is first loaded. We add an action to the clip to tell it to load up our ASP page with the first record as soon as it finishes loading. The ActionScript looks like this:

先來看當影片片段元件第一次載入時要做什麼事情。我們在元件上加入動作,讓元件一載入時就讀取包含第一筆記錄的 ASP 頁面。下面是這段 ActionScript:

onClipEvent(load)
{
  CurrentRecord = 0;
  loadVariables ("getdetails.asp?Record=0", this);
}

只是很簡單的初始化 CurrentRecord 變數(將會用來追蹤通訊錄目前正顯示第幾筆記錄),然後載入 GetDetails.asp 頁面,並要求第一筆記錄(也就是 Record 0)。

loadVariables 函數的功能之一就是它可以非同步的執行工作,意思就是 Flash 執行 loadVariables 指令之後,它不會停在那邊等待結果傳回來,因此不需要在執行 loadVariables 函數那一列的同時將資料載入。所以我們需要設一個機制,一旦資料都載入完成後,得告訴影片更新文字欄位才行。我們使用 onClipEvent(data) 動作來達成這個目的,不論何時只要 Flash 完成讀入所有的變數,就會呼叫這個動作。下面是這段 ActionScript:

onClipEvent(data)
{
strName = Name;
strTelephone = Telephone;
strCity = City;
strNotes = Notes;
strPosition = "Record " add String(CurrentRecord+1) add " of " add String(TotalRecords);
}

這段程式碼很單純地將從 ASP 頁面取得的變數,傳送到影片片段內的文字方塊中,也會一併更新文字欄位以秀出目前正在顯示的記錄。

Finally, we need to assign actions to the left and right arrows so we can navigate through the address book. Here's the code for the right (move to next record) arrow:

最後,我們需要指定左右箭頭的動作,如此一來才能利用它們瀏覽通訊錄中的每個記錄。下面是右箭頭(移至下一筆記錄)的程式碼:

on (release)
{
CurrentRecord++;
if (CurrentRecord == TotalRecords)
CurrentRecord = 0; loadVariables ("getdetails.asp?Record=" add String(CurrentRecord), this);
}

這段程式替 CurrentRecord 變數增加 1 然後檢查是否已經到達通訊錄中的最後一筆記錄。如果是的話, CurrentRecord 會被重設為 0,而使用者就會回到通訊錄中的第一筆記錄。接下來的程式碼從 ASP 頁面載入該筆記錄相關的變數,Flash 將會再次呼叫 onClipEvent(data) 動作,便能更新文字方塊讓使用者看到。

左箭頭(移至前一筆記錄)的程式碼幾乎一樣,除了用遞減目前的記錄數字來取代遞增以外。

所有的工作都完成啦!當我們從瀏覽器啟動 SWF 檔案,它將會在 onClipEvent(load) 動作內載入第一筆記錄到 Flash 變數中。當所有的變數都載入完成後,Flash 會呼叫 onClipEvent(data) 動作,其中我們利用來更新顯示的資訊給使用者看。

Clicking on either navigation button will trigger actions that retrieve our ASP page and load in the new record, again calling on the onClipEvent(data) action. Here is how the final product looks:

用滑鼠按下左或右兩個導覽箭頭,便會觸發動作再次取得 ASP 頁面,並且載入新的記錄,接著 onClipEvent(data) 又會再被呼叫一次。最後完成的樣成品就像下面這樣:

 

結論

結合 Flash 和 ASP 的功能,便是同時擁有 Flash 的圖形化介面以及 ASP 資料庫導向功能的解決方案。在這個範例中,我們已經看到了 Flash 影片是可以連接 Access 資料庫的。再者,只要藉由修改 ASP 的程式碼就可以連接 SQL server 或其他資料來源,達到相同的目的。