萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Flash 教學

Flash 動態網頁製作教學:利用 FS Command 實現即時日期時間顯示

SWF 動畫檔案中的圖像、聲音、文字與動畫皆為靜態內容,若需在 SWF 中呈現動態資料(如即時日期、時間),可透過 Flash 的 FS Command 功能達成。本教學將詳細說明如何在 Flash 4.0 環境下建立一個動態網頁時鐘,供參考學習。

製作步驟

1. 建立基礎畫面與靜態文字

開啟 Flash 4.0,新增檔案或開啟現有 Flash 頁面。選擇 Insert > Layer 新增一個圖層,確認為目前圖層後,使用矩形工具繪製一個無邊框的藍色長方形(約 100×120 像素)作為底色。接著選取文字工具,設定字體為黑體、字號 16、顏色白色,依序輸入「公元年 月」、「星期」、「時間」三行靜態文字。

2. 建立動態文字欄位(變數)

鎖定上一圖層,再新增一個圖層並確認為目前圖層。選取文字工具並勾選 Text Field 按鈕,設定字體 Arial、白色、字號 16。在「公元」後方繪製一個高度為單行、寬度約 4 個字元的長方形文字框。以選取工具點擊該文字框,開啟 Modify > Text Field 對話框,在 Variable(變數) 欄輸入 Year,並在 Option 中勾選 Disable Editing 與 Disable Selecting,使年份不可編輯。

同樣方式分別在「年」後、「星期」上、「星期」右側、「時間」右側的三個格子建立文字框,變數名稱依序為 Month(月)、Date(日)、Day(星期)、Hour(時)、Minute(分)、Second(秒)。注意:日期文字框字號可設大一點(如 36 號),時間文字框字號設小一點(如 10 號)。

3. 建立發送 FS Command 的影片剪輯

鎖定該圖層,再新增一個圖層並確認為目前圖層。選擇 Insert > New Symbol,類型選 Movie Clip,命名為 FS Command。進入編輯模式:

  • 雙擊第 1 幀的小圓圈,開啟 Frame Properties,選 Action,點「+」號選 FS Command,Command 填入 Showrl(顯示日曆),此動作會向網頁發送名為 Showrl 的 FS Command。
  • 在第 2 幀插入空白幀,用以持續向網頁發送 Showrl 命令。

返回場景,按 Ctrl+L 開啟 Library,將 FS Command 拖至場景中。儲存檔案為 rl.fla,並以預設設定發布(File > Publish Settings),產生 rl.html 與 rl.swf 兩個檔案。

4. 在網頁中嵌入並撰寫 JavaScript/VBScript 接收命令

以 FrontPage 2000 為例:新建網頁,選 Insert > File 插入 rl.html(Dreamweaver 可直接插入 rl.swf)。另存為 Index.htm。接著在 rl.htm 的 <head></head> 之間加入以下程式碼:

<script language="JAVASCRIPT">
var InternetExplorer = navigator.appName.indexOf("Microsoft") == -1;

function rl_DOFSCommand(command, args) {
    var movie = InternetExplorer ? rl : document.rl;
    var now = new Date();
    var date;
    if (now.getDay() == 0) date = "日";
    else if (now.getDay() == 1) date = "一";
    else if (now.getDay() == 2) date = "二";
    else if (now.getDay() == 3) date = "三";
    else if (now.getDay() == 4) date = "四";
    else if (now.getDay() == 5) date = "五";
    else if (now.getDay() == 6) date = "六";

    if (command == "showrl") {
        movie.SetVariable("/:year", now.getYear());
        movie.SetVariable("/:month", now.getMonth() + 1);
        movie.SetVariable("/:date", date);
        movie.SetVariable("/:day", now.getDate());
        movie.SetVariable("/:hour", now.getHours());
        movie.SetVariable("/:minute", now.getMinutes());
        movie.SetVariable("/:second", now.getSeconds());
    }
}
</script>

<script language="VBScript">
sub rl_FSCommand(ByVal command, ByVal args)
    call rl_DOFSCommand(command, args)
end sub
</script>

程式碼說明:

  • var movie… 行為 Flash FS Command 呼叫 JavaScript 的固定格式,可直接套用。
  • var now = new Date(); 取得當前日期時間物件。
  • 將 getDay() 回傳的數字(0-6)轉為中文「日」至「六」,符合中文習慣。
  • 當接收到 Showrl 命令時,利用 movie.SetVariable 將年、月、日、星期、時、分、秒分別傳入 Flash 對應的變數中(/:year 等為 Flash 4 的變數路徑寫法)。
  • 最後 5 行 VBScript 為 IE 瀏覽器相容性處理,若使用 Netscape 可略過。

5. 測試與微調

儲存網頁後以瀏覽器開啟,即可看到即時更新的日期與時間。若樣式不滿意,可回 Flash 調整字體、字號、顏色等,重新發布即可。建議將相關檔案放置同一目錄,方便維護。

以上即為利用 Flash 4 FS Command 製作動態網頁時鐘的完整流程,希望對初學者有所幫助!

copyright © 萬盛學電腦網 all rights reserved