三步驟打造互動式探照燈/手電筒光束掃描效果

核心原理：圖形元件作為遮罩 + startDrag 鎖定滑鼠座標 = 滑鼠移動到哪，光束就照亮哪。極簡代碼，視覺效果極佳。

製作流程

1. 新建文檔：300×400，背景黑色（#000000）。
2. 導入背景圖：第 1 層 檔案 → 匯入 → 匯入到舞台，選圖片，屬性面板設 W:300, H:400, X:0, Y:0 填滿舞台。
3. 建立光束遮罩元件：Ctrl+F8 新增圖形元件，繪製一個白色圓形（大小自定），回主場景。
4. 佈置遮罩層：
   • 新增圖層 2，從庫拖入光束元件，實例名設為 shan。
   • 圖層 2 右鍵選 遮罩，第 1 層自動成為被遮罩層（圖標變縫合狀）。
5. 添加滑鼠跟隨代碼：
   • 新增圖層 3（動作層），第 1 幀按 F9 開啟動作面板：

startDrag("shan", true);

• true 參數表示鎖定滑鼠中心點（光束中心跟隨滑鼠）。

測試與效果

• Ctrl+Enter 測試：黑色背景下，滑鼠移動處顯示背景圖片（被光束照亮），其餘保持黑暗。
• 類似手電筒在黑暗中掃視、探照燈掃天的視覺隱喻。

文檔屬性與背景圖設定

背景圖屬性設定

新建圖形元件

繪製圓形光束

拖入光束元件、命名實例 shan

設定遮罩層

遮罩層關係建立

動作面板代碼

進階變體

• 光束形狀變化：將圓形改為扇形、矩形、自定義路徑，模擬不同光源類型。
• 多光束：多個遮罩元件分別 startDrag，或用陣列管理。
• 漸變邊緣：光束元件改用放射漸變（中心不透明 → 邊緣透明），產生柔和邊緣過渡。
• AS3 版本：shan.startDrag(true)，並監聽 MouseEvent.MOUSE_MOVE 更新座標（更符合現代規範）。
• 互動遊戲：結合碰撞檢測，光束照到特定物件觸發事件（尋物遊戲、解謎）。

常見問題

• 遮罩不生效：確認遮罩層圖標為「向下縫合箭頭」，被遮罩層為「向上縫合箭頭」；遮罩層必須在被遮罩層正上方。
• 光束位置偏移：檢查光束元件註冊點是否在中心（雙擊元件編輯時，中心十字對準圖形幾何中心）。
• 滑鼠離開舞台光束殘留：AS3 可監聽 Event.MOUSE_LEAVE 執行 stopDrag() 並隱藏光束。