学步园

[索引页]
[源码下载]

积少成多Flash(4) - ActionScript 3.0 实例之Hello World, 时钟, 计时器

作者：webabcd

介绍
通过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 "<font color='#FFFFFF'>Hello: " + name + "</font>";
        }
    }
}

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
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()
        {            
            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
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()
        {
            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;
                    break;
                case btnStop:
                    stopTimer(); // 停止计时器
                    btnPlay.visible = true;
                    btnPause.visible = false;
                    break;
            }    
        }
        
        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