博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]

积少成多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);
                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 < 10 )
                
return ("0" + n.toString());
            
            
return n.toString();
        }

        
        
// 格式化 毫秒,返回长度为三个字符的字符串
        function formatNumber2(n:Number):String
        
{
            
if( n < 10 )
                
return ("00" + n.toString());
            
else if (n < 100)
                
return ("0" + n.toString());
            
            
return n.toString();
        }

        
/*---- 计时器的 Demo 结束 ----*/
    }

}


OK
[源码下载]