积少成多Flash(5) - ActionScript 3.0 实例之闹钟(自定义事件, 画图, 动画)

[索引页]
[源码下载]

积少成多Flash(5) - ActionScript 3.0 实例之闹钟(自定义事件, 画图, 动画)

作者：webabcd


介绍
通过一个经典示例，即闹钟，对使用 Flash ActionScript 3.0 画图、做动画有一个大概的了解，并通过此示例学习自定义事件的开发

• 自定义事件 - 继承自 Event ，一个 public static const 定义事件类型，其他 public 变量定义事件属性
• 画图 - 通过 Shape 对象的 graphics 属性来执行矢量绘图命令 
• 动画 - 通过 Timer 对象或监听 Event.ENTER_FRAME 事件 

1、自定义事件（闹钟到点后所触发的自定义事件）
AlarmEvent.as

package    
{
        import flash.events.Event;
        
        public class AlarmEvent extends Event    
        {
                // 定义事件类型
                public static const ALARM:String = "alarm";
                
                // 定义闹钟在响铃时所显示的信息
                public var alermMessage:String;
                
                // 构造函数，msg 为提醒信息
                public function AlarmEvent(msg:String = "ALARM!")
                {
                        // 调用父类的构造函数。参数为事件类型，可以作为 Event.type 访问
                        super(ALARM);
        
                        alermMessage = msg;
                }
                
                // 重写 Event 的 clone() 方法
                public override function clone():Event
                {
                        return new AlarmEvent(alermMessage);
                }
                
                // 重写 Event 的 toString() 方法
                public override function toString():String
                {
                        // Event.formatToString() - 在自定义 Event 类中实现 toString() 方法的 utility 函数
                        return formatToString("AlarmEvent", "type", "bubbles", "cancelable", "eventPhase", "message");
                }
        }
}

 

 

2、画图（绘制表盘，刻度，时分秒针等）
ClockUI.as

package
{
        import flash.display.Shape;
        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.text.StaticText;
        import flash.events.*;
        import flash.text.TextField;
        import flash.text.TextFormat;
        import flash.display.Sprite;
        
        // 绘制表盘 UI
        public class ClockUI extends Sprite    
        {
                // 表盘半径
                public var radius:uint;
                
                // 表盘中心点的 X 坐标和 Y 坐标
                public var centerX:int;
                public var centerY:int;
                
                // 时, 分, 秒指针的形状
                public var hourHand:Shape;
                public var minuteHand:Shape;
                public var secondHand:Shape;
                
                // 表盘背景颜色，以及时, 分, 秒指针颜色（0x代表16进制）
                public var bgColor:uint = 0xEEEEFF;
                public var hourHandColor:uint = 0x003366;
                public var minuteHandColor:uint = 0x000099;
                public var secondHandColor:uint = 0xCC0033;
                
                // 构造函数，r 为表盘半径
                public function ClockUI(r:uint)    
                {
                        this.radius = r;
                                        
                        this.centerX = r;
                        this.centerY = r;
                }
                
                // 初始化表盘
                public function init():void    
                {
                        // 画表盘的边框
                        drawBorder();
                        
                        // 画表盘上的小时的标记
                        drawHourLabel();

                        // 画时, 分, 秒指针
                        drawHand();
                }
                
                public function drawBorder():void
                {
                        // 指定线条样式，两个参数分别为线条的粗细（以磅为单位）和线条的颜色
                        this.graphics.lineStyle(0.5, 0x999999);
                        // 以指定的颜色开始填充，在调用 endFill() 后才会呈现填充
                        this.graphics.beginFill(bgColor);
                        // 画园，三个参数分别为圆心的 X 坐标、圆心的 Y 坐标和园的半径。之前调用的 beginFill() 方法将填充此园
                        this.graphics.drawCircle(centerX, centerY, radius);
                        // 呈现上次的 beginFill() 的结果
                        this.graphics.endFill();
                }
    
                public function drawHourLabel():void
                {
                        for (var i:Number = 1; i <= 12; i++)
                        {
                                // 表盘的刻度标识，1 到 12
                                var lbl:TextField = new TextField();
                                lbl.text = i.toString();
                                
                                // 小时刻度标识所需旋转的弧度（使用弧度是为了方便之后的 sin() 和 cos() 计算）
                                var angle:Number = i * 30 * (Math.PI / 180);
                                
                                // 计算刻度标识的位置
                                lbl.x = centerX + (0.9 * radius * Math.sin(angle)) - 5;
                                lbl.y = centerY - (0.9 * radius * Math.cos(angle)) - 9;
                                
                                // 格式化刻度标识的文本样式
                                var tf:TextFormat = new TextFormat();
                                // tf.font = "Arial";
                                tf.bold = "true";
                                tf.size = 12;
                                lbl.setTextFormat(tf);
                                
                                // 在 Container 中添加指定的 DisplayObject ，返回值为被添加到 Container 后的 DisplayObject
                                this.addChild(lbl);
                        }
                }
                
                public function drawHand():void
                {                
                        hourHand = new Shape();
                        hourHand.graphics.lineStyle(3, hourHandColor);
                        // 移动当前的绘画起点到指定的位置
                        hourHand.graphics.moveTo(0, -radius * 0.5);
                        // 画直线到指定位置，起点位置由 moveTo() 决定
                        hourHand.graphics.lineTo(0, 0);
                        hourHand.x = centerX;
                        hourHand.y = centerY;                
                        addChild(hourHand);
                                            
                            minuteHand = new Shape();
                        minuteHand.graphics.lineStyle(2, minuteHandColor);
                        minuteHand.graphics.moveTo(0, -radius * 0.8);
                        minuteHand.graphics.lineTo(0, 0);
                         minuteHand.x = centerX;
                        minuteHand.y = centerY;
                        addChild(minuteHand);
    
                         secondHand = new Shape();
                        secondHand.graphics.lineStyle(0.5, secondHandColor);
                        secondHand.graphics.moveTo(0, -radius * 0.9);
                        secondHand.graphics.lineTo(0, 0);
                        secondHand.x = centerX;
                        secondHand.y = centerY;
                        addChild(secondHand);
                }
                
                // 以当前系统时间刷新表盘的呈现
                public function refresh():void
                {
                        // new Date() - Flash 宿主的系统时间
                        var currentTime:Date = new Date();
                        
                        var hour:uint = currentTime.getHours();
                        var minute:uint = currentTime.getMinutes();
                        var second:uint = currentTime.getSeconds();
        
                        // 时, 分, 秒指针做相应的旋转。单位：度数
                        this.hourHand.rotation = hour * 30 + minute * 0.5;
                        this.minuteHand.rotation = minute * 6;
                        this.secondHand.rotation = second * 6;
                }
        }
}

 

 

3、动画（让时,分,秒针动起来）
SimpleClock.as

package    
{
        import flash.display.Sprite;

        public class SimpleClock extends Sprite
        {
                import flash.events.TimerEvent;
                import flash.utils.Timer;
                
                private var timer:Timer;
                private var clockUI:ClockUI;
                
                // 构造函数，radius 为表盘半径
                public function SimpleClock(radius:Number = 100):void    
                {                        
                        // 实例化一个 ClockUI 对象，并将其添加到舞台上
                        clockUI = new ClockUI(Math.max(20, radius));
                        clockUI.init();
                        addChild(clockUI);
                
                        // 刷新表盘 UI
                        clockUI.refresh();

                        // 实例化一个计时器，每 1 秒 tick 一次
                        timer = new Timer(1000);                
                        timer.addEventListener(TimerEvent.TIMER, onTick);
                        timer.start();
                }

                private function onTick(e:TimerEvent):void    
                {
                        // 刷新表盘 UI
                        clockUI.refresh();
                }                
        }
}

 

 

4、组装以上各个类，以成为一个完整的闹钟对象（这里来确定如何触发我们开始写的那个自定义事件）
AlarmClock.as

package    
{
        public class AlarmClock extends SimpleClock    
        {
                import flash.events.MouseEvent;
                import flash.events.TimerEvent;
                import flash.utils.Timer;
                        
                private var alarmHour:Number = -1;    
                private var alarmMinute:Number = -1;
                private var alarmMessage:String;
                private var timer:Timer;
                
                // 构造函数， radius 为表盘半径
                public function AlarmClock(radius:Number = 100):void
                {
                        // 调用父类的构造函数
                        super(radius);

                        // 计时器，每 1 秒 tick 一次
                        timer = new Timer(1000);
                        timer.addEventListener(TimerEvent.TIMER, onTick);
                        timer.start();
                }

                /*
                 * 设置提醒时间
                 * @param hour                提醒时间的小时数
                 * @param minute        提醒时间的分钟数
                 * @param message        提醒信息
                 * @return 无返回值
                 */
                public function setAlarm(hour:Number = 0, minute:Number = 0, message:String = "Alarm!"):void
                {                    
                        alarmHour = hour;
                        alarmMinute = minute;
                         alarmMessage = message;
                }
                
                /*
                 * 清除提醒时间
                 */
                public function clearAlarm()
                {
                        alarmHour = alarmMinute = -1;
                }

                private function onTick(e:TimerEvent):void    
                {
                        var date:Date = new Date();
                        
                        if (alarmHour == date.hours && alarmMinute == date.minutes)
                        {
                                // 如果到了提醒时间则实例化 AlarmEvent，并通过 dispatchEvent() 触发该事件
                                var alarm:AlarmEvent = new AlarmEvent(alarmMessage);
                                dispatchEvent(alarm);
                        }
                }
        }
}

 

 

5、将闹钟对象显示到 UI 上，通过用户操作设置闹钟时间
在 UI 上放置两个 NumericStepper ，分别取名为 txtHour 和 txtMinute ，用来设置响铃的时间。再放置两份名称分别为 txtSet 和 txtClear 的 Button ，用来设置闹铃和取消闹铃。再放置一个名为 txtMessage 的 TextArea ，用来显示闹铃信息
Clock.as

package
{
        import flash.display.MovieClip;
        import flash.events.MouseEvent;
        
        public class Clock extends MovieClip    
        {
                var alarmClock:AlarmClock;
                
                public function Clock():void
                {
                        btnSet.addEventListener(MouseEvent.CLICK, onSetAlarm);
                        btnClear.addEventListener(MouseEvent.CLICK, onClearAlarm);
                        txtHour.maximum = 23;
                        txtMinute.maximum = 59;
                        txtHour.value = new Date().hours;
                        txtMinute.value = new Date().minutes;

                        // 实例化 AlarmClock，并在舞台上添加此对象
                        alarmClock = new AlarmClock(80);
                        alarmClock.x = 200;
                        alarmClock.y = 200;
                        alarmClock.addEventListener(AlarmEvent.ALARM, onAlarm);
                        addChild(alarmClock);
                }
                
                function onSetAlarm(e:MouseEvent):void
                {
                        alarmClock.setAlarm(txtHour.value, txtMinute.value, "起床啦");
                }
                
                function onClearAlarm(e:MouseEvent):void
                {
                        alarmClock.clearAlarm();
                        txtMessage.text = "";
                }
                
                function onAlarm(e:AlarmEvent):void
                {
                        txtMessage.text += e.alermMessage + " " + new Date().toString() + "\n";
                        txtMessage.verticalScrollPosition = txtMessage.maxVerticalScrollPosition;        
                }
        }
}

 

 

OK
[源码下载]