萬盛學電腦網

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

Flash CS4 滑鼠觸發煙火飄落互動特效教學

本範例示範 Flash CS4 製作滑鼠移動觸發煙火飄落互動特效,核心為滑鼠追蹤複製星形粒子、隨機縮放顏色火花元件。

滑鼠在畫面劃過,即見絢麗星火跟隨飛舞。

一、素材元件製作

  1. 新建 500×300 px、30 fps 文件,匯入背景圖 (西湖夜景) 置 (0,0),設定文件類別 Main。
  2. 元件 Star_mc:中心點畫放射漸變圓 (紅→深紅→透明) + 多角星形工具畫星形 (調整頂點) + 複製縮放 40% 白色星形疊加。
  3. 元件 Magic_mc:放射漸變矩形 (白→淡黃→橙→紅→深紅透明) → 任意變形工具旋轉 45° 複製 3 份 → 轉為 5 個影片剪輯 01~05 → 分別置於 5 個關鍵幀 → 各加不同「發光」濾鏡 → 新增 AS 圖層第 1 幀 stop()。

二、建立類別與控制碼

  1. 為 Magic_mc、Star_mc 設定同名類別 (Linkage)。
  2. 建立 Main.as (文件類別):
package {
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.ui.Mouse;

    public class Main extends Sprite {
        private var star:MovieClip;
        public function Main() {
            Mouse.hide();
            this.star = new Star_mc();
            addChild(star);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
        }
        private function moveHandler(e:MouseEvent):void {
            this.star.x = stage.mouseX;
            this.star.y = stage.mouseY;
            var _mc:MovieClip = new Magic_mc();
            _mc.x = stage.mouseX;
            _mc.y = stage.mouseY;
            addChild(_mc);
            _mc.addEventListener(Event.ENTER_FRAME, RemoveDrop);
        }
        private function RemoveDrop(event:Event):void {
            var _mc:MovieClip = event.target as MovieClip;
            if (_mc.scaleX <= 0) {
                _mc.removeEventListener(Event.ENTER_FRAME, RemoveDrop);
                removeChild(_mc);
            }
        }
    }
}

關鍵點: Mouse.hide() 隱藏系統游標,Star_mc 跟隨滑鼠,每次移動產生一個 Magic_mc 粒子,ENTER_FRAME 監聽縮放至 0 時移除。

  1. 建立 Magic_mc.as (元件擴展類別):
package {
    import flash.display.MovieClip;
    import flash.events.Event;

    public class Magic_mc extends MovieClip {
        private var dis:Number;
        public function Magic_mc() { init(); }
        private function init():void {
            var Random = 1 + Math.round(Math.random()*4);
            this.gotoAndStop(Random); // 隨機停在 1~5 幀 (不同顏色火花)
            this.scaleX = this.scaleY = 1;
            this.addEventListener(Event.ENTER_FRAME, scaleDown);
        }
        private function scaleDown(e:Event):void {
            this.scaleX -= 0.05;
            this.scaleY -= 0.05;
            this.alpha -= 0.05;
            if (this.scaleX <= 0) {
                this.removeEventListener(Event.ENTER_FRAME, scaleDown);
                if (this.parent) this.parent.removeChild(this);
            }
        }
    }
}

測試影片,即可體驗滑鼠拖曳如煙火綻放般的互動特效!

copyright © 萬盛學電腦網 all rights reserved