萬盛學電腦網

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

Flash 表單實戰(一):極簡輸入輸出表單

前言

Flash 不只能做動畫,強大的互動功能同樣亮眼。本教學以最精簡的方式示範:輸入框輸入文字 → 按「提交」顯示於輸出框 → 按「清除」歸零。適合初次接觸 Flash 表單元件與 ActionScript 的新手入門。

最終效果

舞台 350×250 px,橘黃底 #FF9933。上方「輸入」框、下方「輸出」框,下方並排「提交」「清除」兩按鈕。
圖1.1 簡單表單最終效果

製作步驟

1. 輸入文字框

文字工具拉出長條框,屬性面板設定:
• 類型:**輸入文字**
• 變數名稱:text1
• 字體、大小、顏色自訂
前方加靜態文字「輸入」做標籤。
圖1.2 繪製文本框
圖1.3 設定屬性
圖1.4 標籤

2. 輸出文字框

同樣拉框,屬性設定:
• 類型:**動態文字**
• 變數名稱:text2
前方加標籤「輸出」。
圖1.5 輸出框屬性
圖1.6 完成雙框

3. 通用按鈕元件

新建按鈕 btn:
• 彈起/經過/按下:簡單矩形(可自行美化)
• Hit 幀插入關鍵幀定義點擊區域
圖1.7 按鈕元件

4. 佈置場景

主場景拖入兩個 btn 實例,左「提交」、右「清除」,加文字標籤。
圖1.8 佈置按鈕

5. ActionScript(AS2 正規寫法)

選中左側「提交」按鈕 → 開啟動作面板:

on (release) {
    _root.text2 = _root.text1;
}

選中右側「清除」按鈕:

on (release) {
    _root.text1 = "";
    _root.text2 = "";
}

說明:_root 指向主時間軸,直接讀寫變數 text1/text2 即可雙向綁定文字框內容。

進階延伸

  • 加入輸入驗證:限制長度、過濾特殊字元、Email 格式檢查。
  • 改用元件:TextInput、Button(v2 Components)支援皮膚、無障礙、焦點管理。
  • 串接後端:LoadVars / XML / JSON 送至伺服器,實現留言板、登入系統。
  • 導入AS3:事件監聽器模型(addEventListener)、強型別變數、文件類別架構,代碼更健壯。
copyright © 萬盛學電腦網 all rights reserved