萬盛學電腦網

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

Flash MX 自訂動畫滑鼠游標——三態切換完整教學

效果展示

  • 預設:不斷縮放的動畫箭頭
  • 滑鼠移入物件:手形游標
  • 滑鼠按下物件:握拳游標
    圖1 三種游標樣式

元件準備

  1. 物體一(按鈕)、物體二(影片剪輯):示範兩種不同元件類型的互動寫法差異。
  2. 箭頭(MovieClip):內部補間動畫實現縮放循環。
  3. 動畫指針(MovieClip,3 關鍵幀):
    - 幀 1 zhengchang:放入 箭頭
    - 幀 2 yidao:繪製手形
    - 幀 3 anxia:繪製握拳
    每幀 stop(); 防止自動播放。
    圖2 幀標籤設定

場景佈局與實例命名

主場景拖入三元件,實例名:
• Object1(物體一/按鈕)
• Object2(物體二/影片剪輯)
• dhzz(動畫指針)

元件內部拖曳腳本

Object1(按鈕):

on(press){ startDrag("_root.object1"); }
on(release){ stopDrag(); }

Object2(影片剪輯):

onClipEvent(mouseDown){ startDrag("_root.object2"); }
onClipEvent(mouseUp){ stopDrag(); }

差異在於按鈕用 on() 處理器,影片剪輯用 onClipEvent()。

主場景第 1 幀核心腳本

fscommand("trapallkeys", false);  // 禁用播放器快捷鍵
fscommand("showmenu", false);     // 禁用右鍵選單

function showzhengchang(){ dhzz.gotoAndStop("zhengchang"); }
function showyidao(){ dhzz.gotoAndStop("yidao"); }
function showanxia(){ dhzz.gotoAndStop("anxia"); }

// 物體一(按鈕)事件綁定
object1.onRollOut = showzhengchang;
object1.onRollOver = showyidao;
object1.onPress = showanxia;
object1.onRelease = showyidao;

// 物體二(影片剪輯)事件綁定
object2.onRollOver = showyidao;
object2.onRollOut = showzhengchang;
object2.onPress = showanxia;
object2.onRelease = showyidao;

關鍵技術解析

技術點說明
幀標籤替代幀號碼,便於維護;gotoAndStop("label") 更語意化。
函數封裝將游標切換邏輯封裝為函數,多物件共用,減少重複代碼。
事件屬性賦值AS2 中 btn.onRollOver = func 可動態綁定,優於元件內硬編碼。
startDrag 目標路徑按鈕用 "_root.object1"(字串路徑),MC 用 "_root.object2",需精確匹配實例名。

進階強化

  1. 手形/握拳也做成動畫:在 yidao/anxia 幀放入 MovieClip 而非靜態圖形。
  2. 自訂熱區:按鈕 Hit 狀態繪製更大區域,提升點擊容錯率。
  3. 隱藏系統游標:Mouse.hide() (AS3) / _root._ymouse 技巧 (AS2) 完全接管游標繪製。
  4. 多點觸控:AS3 Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT 支援多指游標。

遷移至 AS3 / HTML5 Canvas

// AS3 概念
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateCursor);
function updateCursor(e:MouseEvent):void {
    cursorMc.x = e.stageX; cursorMc.y = e.stageY;
}
object1.addEventListener(MouseEvent.ROLL_OVER, ()=>cursorMc.gotoAndStop("over"));
object1.addEventListener(MouseEvent.ROLL_OUT, ()=>cursorMc.gotoAndStop("normal"));
object1.addEventListener(MouseEvent.MOUSE_DOWN, ()=>cursorMc.gotoAndStop("down"));
object1.addEventListener(MouseEvent.MOUSE_UP, ()=>cursorMc.gotoAndStop("over"));
copyright © 萬盛學電腦網 all rights reserved