积少成多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，如需转载请自行联系原作者