萬盛學電腦網

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

AS3 代碼實作:奔跑馬兒動畫與歌詞同步顯示

本範例展示純 AS3 代碼構建的「奔跑馬兒」動畫:背景圖無縫循環滾動、兩匹馬交錯奔跑動畫、音樂播放同步歌詞逐字顯示(卡拉 OK 效果)。代碼結構清晰,涵蓋精靈管理、聲音控制、幀事件迴圈、字串截取同步等實用技巧。

核心功能模組

1. 無縫循環背景

var mysp:Sprite = new Sprite(); mysp.y = 80; addChild(mysp);
for (var i:uint = 0; i < 4; i++) {
    var picmc:MovieClip = new Pic(); // 庫中連結類別 Pic
    picmc.x = i * picmc.width;
    picmc.scaleX = Math.pow(-1, i); // 奇數鏡像翻轉無縫銜接
    mysp.addChild(picmc);
}
// 幀迴圈中:mysp.x -= 5; 超出寬度歸零 → 無限滾動

2. 雙馬奔跑動畫

var mp:MovieClip = new Mp(); addChild(mp); mp.x=200; mp.y=200; mp.scaleX=mp.scaleY=0.5;
var mp1:MovieClip = new Mp1(); addChild(mp1); mp1.x=150; mp1.y=200; mp1.scaleX=mp1.scaleY=0.45;
// Mp、Mp1 為庫中含幀動畫的影片剪輯類別

3. 音樂與播放控制

var pnkcy:Sound = new Pnyqkcy(); // 庫中連結音樂類別
var pnkCh:SoundChannel;
var ps:Boolean = true; // 播放狀態鎖
plst_mc.buttonMode = true;
plst_mc.addEventListener(MouseEvent.CLICK, plst);

function plst(ev:MouseEvent):void {
    if (ps) {
        addEventListener(Event.ENTER_FRAME, gctb);
        pnkCh = pnkcy.play();
        mp.play(); mp1.play();
        plst_mc.gotoAndStop(2); // 切換為暫停圖示
    } else {
        removeEventListener(Event.ENTER_FRAME, gctb);
        n = 0; pnkCh.stop(); mp.stop(); mp1.stop();
        plst_mc.gotoAndStop(1); // 切換為播放圖示
    }
    ps = !ps;
}

4. 歌詞同步顯示(核心亮點)

// 時間軸標記點(毫秒),對應 gc 陣列索引
var sj:Array = [1560, 3560, 5560, 10600, 23000, 35000, 43050, 59810, 71240, 80370, 89470, 93930, 98240, 108479, 122280, 132360, 146530, 158160, 166630, 181080, 196250, 206060, 216840, 220120, 224360, 239720, 243170, 262440, 271060, 290250];

// 歌詞內容陣列
var gc:Array = ["馬兒啊你慢些走", "演唱:德德瑪", "歌詞編輯:劉朋 QQ:406663870", "馬兒啊你慢些走慢些走哎", "我要把這壯麗的景色看個夠", ...];

function gctb(ev:Event):void {
    // 背景滾動
    if (mysp.x > -2 * picmc.width) mysp.x -= 5; else mysp.x = 0;

    // 根據音樂播放位置更新歌詞索引 n
    if (pnkCh.position >= sj[n+1]) n++;

    // 完整歌詞行顯示
    gca_txt.text = gc[n];

    // 逐字顯示邏輯:根據當前時間在該行時間區間內的比例,截取顯示字數
    var gcb:String = gc[n];
    var progress:Number = (pnkCh.position - sj[n]) / (sj[n+1] - sj[n]); // 0~1
    gcb_txt.text = gcb.substring(0, Math.floor((gcb.length + 2) * progress));
}

技術亮點總結

  • 精靈容器管理:Sprite 承載背景圖塊,統一位移實現無縫滾動。
  • 鏡像翻轉技巧:scaleX = Math.pow(-1, i) 交替翻轉圖塊,消除拼接縫隙。
  • 聲音通道控制:SoundChannel 實現播放/暫停/停止精確控制。
  • 時間軸同步策略:預設時間點陣列 sj 對應歌詞行索引,結合 SoundChannel.position 實時計算進度。
  • 逐字顯示算法:線性插值計算當前行顯示字數,實現卡拉 OK 效果,無需逐幀關鍵幀。
  • 事件驅動架構:ENTER_FRAME 統一驅動背景滾動與歌詞更新,按鈕事件切換監聽器啟停。

此範例展示了 AS3 開發互動多媒體應用的典型架構:資源管理(庫連結類別)、狀態機(播放/暫停)、時間同步(音訊位置映射視覺內容)、幀迴圈統一更新。

copyright © 萬盛學電腦網 all rights reserved