積少成多Flash(4) - ActionScript 3.0 執行個體之Hello World, 時鐘, 計時器

<a href="http://webabcd.blog.51cto.com/1787395/342175" target="_blank">[索引頁]</a>

<a href="http://down.51cto.com/data/100162" target="_blank">[源碼下載下傳]</a>

積少成多Flash(4) - ActionScript 3.0 執行個體之Hello World, 時鐘, 計時器

介紹

通過3個簡單的示例，對使用 Flash ActionScript 3.0 開發程式有個感性的認識

Hello World - 示範最基本的互動。即按個按鈕，就會在 UI 上顯示對應的資訊

時鐘 - 示範如何做最基本的動畫處理。即對時鐘的時,分,秒針做旋轉動畫

計時器 - 示範稍微複雜一點的互動。即一個計時器，可以對其做啟動,暫停,停止的操作

1、Hello World

UI上放置一個名為lblMsg的Label，一個名為txtName的TextInput，一個名為btnHello的Button

Greeter.as

// 包名稱要與檔案的目錄結構對應，類名稱要與檔案名對應 

package code 

{ 

        /* 

         * 打招呼類 

         */ 

        public class Greeter    

        { 

                /* 

                 * 打招呼方法 

                 * @param name                名稱 

                 * @return                         打招呼的結果 

                 */ 

                public static function sayHello(name:String = "World"):String    

                { 

                        return "&lt;font color='#FFFFFF'&gt;Hello: " + name + "&lt;/font&gt;"; 

                } 

        } 

}

Hello.as

// 包 

package 

        // 導入相關的類 

        import flash.display.MovieClip; 

        import fl.events.ComponentEvent; 

        import flash.events.TimerEvent; 

        import flash.utils.Timer; 

        import flash.text.TextField; 

        import flash.display.SimpleButton; 

        import flash.events.MouseEvent; 

        import flash.events.Event; 

        import flash.utils.getTimer; 

        import code.Greeter;         

        public class Hello extends MovieClip 

        {                 

                // 構造函數 

                public function Hello() 

                        InitHello(); 

                /*---- Hello 的 Demo 開始 ----*/ 

                function InitHello() 

                        // 給 Label 元件的 htmlText 屬性指派 

                        lblMsg.htmlText = Greeter.sayHello(); 

                        // 為對象增加事件處理器（第一個參數：事件類型；第二個參數：事件處理器，也就是一個方法） 

                        txtName.addEventListener(ComponentEvent.ENTER, sayHello); 

                        btnHello.addEventListener(ComponentEvent.BUTTON_DOWN, sayHello); 

                function sayHello(e:ComponentEvent):void    

                        lblMsg.htmlText = Greeter.sayHello(txtName.text);         

                /*---- Hello 的 Demo 結束 ----*/ 

2、時鐘

在UI上畫3個MovieClip，分别對應時,分,秒針，分别取名為arrowHour,arrowMinute,arrowSecond

                {                         

                        InitClock(); 

                /*---- 時鐘的 Demo 開始 ----*/ 

                private var timer:Timer; 

                function InitClock() 

                        // 執行個體化計時器，其參數為 tick 的間隔 

                        timer = new Timer(1000);    

                        // 指定 onTick() 方法來處理 Timer 事件 

                        timer.addEventListener(TimerEvent.TIMER, onTick); 

                        // 啟動計時器 

                        timer.start(); 

                }                 

                function onTick(event:TimerEvent):void 

                {         

                        // 執行個體化 Date ，傳回宿主伺服器的目前時間 

                        var now:Date = new Date(); 

                        // rotation - 對指定對象做順時針旋轉的角度數 

                        arrowHour.rotation = now.getHours() * 30 + (now.getMinutes() / 2);                 

                        arrowMinute.rotation = now.getMinutes() * 6 + (now.getSeconds() / 10);         

                        arrowSecond.rotation = now.getSeconds() * 6;                 

                /*---- 時鐘的 Demo 結束 ----*/ 

3、計時器

在UI上放置4個動态文本，分别對應時,分,秒,毫秒，分别取名為txtHour,txtMinute,txtSecond,txtMillisecond。再放置3個按鈕，分别對應計時器的啟動,暫停,停止操作，分别取名為btnPlay,btnPause,btnStop

                        InitTimer(); 

                /*---- 計時器的 Demo 開始 ----*/ 

                // 計時器需要顯示的 時,分,秒,毫秒 變量 

                var hour:Number = 0; 

                var minute:Number = 0; 

                var second:Number = 0; 

                var millisecond:Number = 0; 

                // 計時器是否在計時 

                var running:Boolean = false; 

                // 播放器加載的總時長 

                var playerLength:Number = 0; 

                // 計時器暫停的總時長 

                var pauseLength:Number = 0; 

                // 計時器計時的總時長 

                var timerLength:Number = 0; 

                function InitTimer() 

                        // 設定暫停按鈕初始為隐藏狀态 

                        btnPause.visible = false; 

                        // addEventListener(EventType.EVENT_NAME, eventResponse) - 為對象添加事件監聽器 

                        //         EventType.EVENT_NAME - 事件類型 

                        //         eventResponse - 事件處理器（響應該事件的方法） 

                        // 為 3 個按鈕增加 Click 事件的事件處理器 

                        btnPlay.addEventListener(MouseEvent.CLICK, clickHandler); 

                        btnPause.addEventListener(MouseEvent.CLICK, clickHandler); 

                        btnStop.addEventListener(MouseEvent.CLICK, clickHandler); 

                        // 每次進入此幀時的事件處理器 

                        // 因為本例就 1 幀，速率為 30 fps，是以每 1/30 秒會觸發一次此事件 

                        this.addEventListener(Event.ENTER_FRAME, enterFrameHandler); 

                function clickHandler(event:MouseEvent):void 

                        // event.target - 觸發此事件的對象 

                        switch(event.target) 

                        { 

                                case btnPlay: 

                                        playTimer(); // 啟動計時器 

                                        btnPlay.visible = false; 

                                        btnPause.visible = true; 

                                        break; 

                                case btnPause: 

                                        pauseTimer(); // 暫停計時器 

                                        btnPlay.visible = true; 

                                        btnPause.visible = false; 

                                case btnStop: 

                                        stopTimer(); // 停止計時器 

                        }         

                function enterFrameHandler(event:Event):void 

                        if (running)    

                                // 目前計時器需要顯示的時間 

                                var goTime:Number = getTimer() - pauseLength - timerLength; 

                                // 從總的毫秒時間中解析出時間的 時,分,秒,毫秒 部分 

                                // Math.floor(val:Number) - 傳回小于等于指定數字的最接近的整數 

                                hour = Math.floor( goTime/3600/1000 ); 

                                minute = Math.floor( (goTime/3600/1000 - hour) * 60 ); 

                                second = Math.floor( ((goTime/3600/1000 - hour) * 60 - minute) * 60 ); 

                                millisecond = Math.floor( goTime - (second + minute*60 + hour*3600) * 1000 ); 

                                // 在 UI 上顯示格式化後的時間 

                                txtSecond.text = formatNumber(second); 

                                txtMinute.text = formatNumber(minute); 

                                txtHour.text = formatNumber(hour); 

                                txtMillisecond.text = formatNumber2(millisecond); 

                        } 

                // 停止計時器。相當于暫停計時器，然後資料歸零 

                function stopTimer():void 

                        txtHour.text = "00"; 

                        txtMinute.text = "00"; 

                        txtSecond.text = "00"; 

                        txtMillisecond.text = "000"; 

                        // 計時器總的啟動時長 

                        timerLength = getTimer() - pauseLength; 

                        pauseTimer(); 

                function playTimer():void 

                        // 計時器總的暫停時長 

                        pauseLength += getTimer() - playerLength; 

                        running = true; 

                function pauseTimer():void 

                        // getTimer() - 播放器（swf）被加載後，所經過的時長。機關：毫秒 

                        playerLength = getTimer(); 

                        running = false; 

                // 格式化 時,分,秒，傳回長度為兩個字元的字元串 

                function formatNumber(n:Number):String 

                        if( n &lt; 10 ) 

                                return ("0" + n.toString()); 

                        return n.toString(); 

                // 格式化 毫秒，傳回長度為三個字元的字元串 

                function formatNumber2(n:Number):String 

                                return ("00" + n.toString()); 

                        else if (n &lt; 100) 

                /*---- 計時器的 Demo 結束 ----*/ 

OK

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342188，如需轉載請自行聯系原作者